/**
* @author alteredq / http://alteredqualia.com/
*/
THREE.EffectComposer = function ( renderer, renderTarget ) {
this.renderer = renderer;
if ( renderTarget === undefined ) {
var parameters = {
minFilter: THREE.LinearFilter,
magFilter: THREE.LinearFilter,
format: THREE.RGBAFormat,
stencilBuffer: false
};
var size = renderer.getDrawingBufferSize();
renderTarget = new THREE.WebGLRenderTarget( size.width, size.height, parameters );
renderTarget.texture.name = 'EffectComposer.rt1';
}
this.renderTarget1 = renderTarget;
this.renderTarget2 = renderTarget.clone();
this.renderTarget2.texture.name = 'EffectComposer.rt2';
this.writeBuffer = this.renderTarget1;
this.readBuffer = this.renderTarget2;
this.passes = [];
// dependencies
if ( THREE.CopyShader === undefined ) {
console.error( 'THREE.EffectComposer relies on THREE.CopyShader' );
}
if ( THREE.ShaderPass === undefined ) {
console.error( 'THREE.EffectComposer relies on THREE.ShaderPass' );
}
this.copyPass = new THREE.ShaderPass( THREE.CopyShader );
};
Object.assign( THREE.EffectComposer.prototype, {
swapBuffers: function() {
var tmp = this.readBuffer;
this.readBuffer = this.writeBuffer;
this.writeBuffer = tmp;
},
addPass: function ( pass ) {
this.passes.push( pass );
var size = this.renderer.getDrawingBufferSize();
pass.setSize( size.width, size.height );
},
insertPass: function ( pass, index ) {
this.passes.splice( index, 0, pass );
},
render: function ( delta ) {
var maskActive = false;
var pass, i, il = this.passes.length;
for ( i = 0; i < il; i ++ ) {
pass = this.passes[ i ];
if ( pass.enabled === false ) continue;
pass.render( this.renderer, this.writeBuffer, this.readBuffer, delta, maskActive );
if ( pass.needsSwap ) {
if ( maskActive ) {
var context = this.renderer.context;
context.stencilFunc( context.NOTEQUAL, 1, 0xffffffff );
this.copyPass.render( this.renderer, this.writeBuffer, this.readBuffer, delta );
context.stencilFunc( context.EQUAL, 1, 0xffffffff );
}
this.swapBuffers();
}
if ( THREE.MaskPass !== undefined ) {
if ( pass instanceof THREE.MaskPass ) {
maskActive = true;
} else if ( pass instanceof THREE.ClearMaskPass ) {
maskActive = false;
}
}
}
},
reset: function ( renderTarget ) {
if ( renderTarget === undefined ) {
var size = this.renderer.getDrawingBufferSize();
renderTarget = this.renderTarget1.clone();
renderTarget.setSize( size.width, size.height );
}
this.renderTarget1.dispose();
this.renderTarget2.dispose();
this.renderTarget1 = renderTarget;
this.renderTarget2 = renderTarget.clone();
this.writeBuffer = this.renderTarget1;
this.readBuffer = this.renderTarget2;
},
setSize: function ( width, height ) {
this.renderTarget1.setSize( width, height );
this.renderTarget2.setSize( width, height );
for ( var i = 0; i < this.passes.length; i ++ ) {
this.passes[i].setSize( width, height );
}
}
} );
THREE.Pass = function () {
// if set to true, the pass is processed by the composer
this.enabled = true;
// if set to true, the pass indicates to swap read and write buffer after rendering
this.needsSwap = true;
// if set to true, the pass clears its buffer before rendering
this.clear = false;
// if set to true, the result of the pass is rendered to screen
this.renderToScreen = false;
};
Object.assign( THREE.Pass.prototype, {
setSize: function( width, height ) {},
render: function ( renderer, writeBuffer, readBuffer, delta, maskActive ) {
console.error( 'THREE.Pass: .render() must be implemented in derived pass.' );
}
} );
/**
* @author alteredq / http://alteredqualia.com/
*
* Full-screen textured quad shader
*/
THREE.CopyShader = {
uniforms: {
"tDiffuse": { value: null },
"opacity": { value: 1.0 }
},
vertexShader: [
"varying vec2 vUv;",
"void main() {",
"vUv = uv;",
"gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );",
"}"
].join( "\n" ),
fragmentShader: [
"uniform float opacity;",
"uniform sampler2D tDiffuse;",
"varying vec2 vUv;",
"void main() {",
"vec4 texel = texture2D( tDiffuse, vUv );",
"gl_FragColor = opacity * texel;",
"}"
].join( "\n" )
};
/**
* @author felixturner / http://airtight.cc/
*
* RGB Shift Shader
* Shifts red and blue channels from center in opposite directions
* Ported from http://kriss.cx/tom/2009/05/rgb-shift/
* by Tom Butterworth / http://kriss.cx/tom/
*
* amount: shift distance (1 is width of input)
* angle: shift angle in radians
*/
THREE.DigitalGlitch = {
uniforms: {
"tDiffuse": { value: null },//diffuse texture
"tDisp": { value: null },//displacement texture for digital glitch squares
"byp": { value: 0 },//apply the glitch ?
"amount": { value: 0.08 },
"angle": { value: 0.02 },
"seed": { value: 0.02 },
"seed_x": { value: 0.02 },//-1,1
"seed_y": { value: 0.02 },//-1,1
"distortion_x": { value: 0.5 },
"distortion_y": { value: 0.6 },
"col_s": { value: 0.05 }
},
vertexShader: [
"varying vec2 vUv;",
"void main() {",
"vUv = uv;",
"gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );",
"}"
].join( "\n" ),
fragmentShader: [
"uniform int byp;",//should we apply the glitch ?
"uniform sampler2D tDiffuse;",
"uniform sampler2D tDisp;",
"uniform float amount;",
"uniform float angle;",
"uniform float seed;",
"uniform float seed_x;",
"uniform float seed_y;",
"uniform float distortion_x;",
"uniform float distortion_y;",
"uniform float col_s;",
"varying vec2 vUv;",
"float rand(vec2 co){",
"return fract(sin(dot(co.xy ,vec2(12.9898,78.233))) * 43758.5453);",
"}",
"void main() {",
"if(byp<1) {",
"vec2 p = vUv;",
"float xs = floor(gl_FragCoord.x / 0.5);",
"float ys = floor(gl_FragCoord.y / 0.5);",
//based on staffantans glitch shader for unity https://github.com/staffantan/unityglitch
"vec4 normal = texture2D (tDisp, p*seed*seed);",
"if(p.y<distortion_x+col_s && p.y>distortion_x-col_s*seed) {",
"if(seed_x>0.){",
"p.y = 1. - (p.y + distortion_y);",
"}",
"else {",
"p.y = distortion_y;",
"}",
"}",
"if(p.x<distortion_y+col_s && p.x>distortion_y-col_s*seed) {",
"if(seed_y>0.){",
"p.x=distortion_x;",
"}",
"else {",
"p.x = 1. - (p.x + distortion_x);",
"}",
"}",
"p.x+=normal.x*seed_x*(seed/5.);",
"p.y+=normal.y*seed_y*(seed/5.);",
//base from RGB shift shader
"vec2 offset = amount * vec2( cos(angle), sin(angle));",
"vec4 cr = texture2D(tDiffuse, p + offset);",
"vec4 cga = texture2D(tDiffuse, p);",
"vec4 cb = texture2D(tDiffuse, p - offset);",
"gl_FragColor = vec4(cr.r, cga.g, cb.b, cga.a);",
//add noise
"vec4 snow = 200.*amount*vec4(rand(vec2(xs * seed,ys * seed*50.))*0.2);",
"gl_FragColor = gl_FragColor+ snow;",
"}",
"else {",
"gl_FragColor=texture2D (tDiffuse, vUv);",
"}",
"}"
].join( "\n" )
};
/**
* @author alteredq / http://alteredqualia.com/
*/
THREE.RenderPass = function ( scene, camera, overrideMaterial, clearColor, clearAlpha ) {
THREE.Pass.call( this );
this.scene = scene;
this.camera = camera;
this.overrideMaterial = overrideMaterial;
this.clearColor = clearColor;
this.clearAlpha = ( clearAlpha !== undefined ) ? clearAlpha : 0;
this.clear = true;
this.clearDepth = false;
this.needsSwap = false;
};
THREE.RenderPass.prototype = Object.assign( Object.create( THREE.Pass.prototype ), {
constructor: THREE.RenderPass,
render: function ( renderer, writeBuffer, readBuffer, delta, maskActive ) {
var oldAutoClear = renderer.autoClear;
renderer.autoClear = false;
this.scene.overrideMaterial = this.overrideMaterial;
var oldClearColor, oldClearAlpha;
if ( this.clearColor ) {
oldClearColor = renderer.getClearColor().getHex();
oldClearAlpha = renderer.getClearAlpha();
renderer.setClearColor( this.clearColor, this.clearAlpha );
}
if ( this.clearDepth ) {
renderer.clearDepth();
}
renderer.render( this.scene, this.camera, this.renderToScreen ? null : readBuffer, this.clear );
if ( this.clearColor ) {
renderer.setClearColor( oldClearColor, oldClearAlpha );
}
this.scene.overrideMaterial = null;
renderer.autoClear = oldAutoClear;
}
} );
/**
* @author alteredq / http://alteredqualia.com/
*/
THREE.ShaderPass = function ( shader, textureID ) {
THREE.Pass.call( this );
this.textureID = ( textureID !== undefined ) ? textureID : "tDiffuse";
if ( shader instanceof THREE.ShaderMaterial ) {
this.uniforms = shader.uniforms;
this.material = shader;
} else if ( shader ) {
this.uniforms = THREE.UniformsUtils.clone( shader.uniforms );
this.material = new THREE.ShaderMaterial( {
defines: shader.defines || {},
uniforms: this.uniforms,
vertexShader: shader.vertexShader,
fragmentShader: shader.fragmentShader
} );
}
this.camera = new THREE.OrthographicCamera( - 1, 1, 1, - 1, 0, 1 );
this.scene = new THREE.Scene();
this.quad = new THREE.Mesh( new THREE.PlaneBufferGeometry( 2, 2 ), null );
this.quad.frustumCulled = false; // Avoid getting clipped
this.scene.add( this.quad );
};
THREE.ShaderPass.prototype = Object.assign( Object.create( THREE.Pass.prototype ), {
constructor: THREE.ShaderPass,
render: function( renderer, writeBuffer, readBuffer, delta, maskActive ) {
if ( this.uniforms[ this.textureID ] ) {
this.uniforms[ this.textureID ].value = readBuffer.texture;
}
this.quad.material = this.material;
if ( this.renderToScreen ) {
renderer.render( this.scene, this.camera );
} else {
renderer.render( this.scene, this.camera, writeBuffer, this.clear );
}
}
} );
/**
* @author alteredq / http://alteredqualia.com/
*/
THREE.GlitchPass = function ( dt_size ) {
THREE.Pass.call( this );
if ( THREE.DigitalGlitch === undefined ) console.error( "THREE.GlitchPass relies on THREE.DigitalGlitch" );
var shader = THREE.DigitalGlitch;
this.uniforms = THREE.UniformsUtils.clone( shader.uniforms );
if ( dt_size == undefined ) dt_size = 64;
this.uniforms[ "tDisp" ].value = this.generateHeightmap( dt_size );
this.material = new THREE.ShaderMaterial( {
uniforms: this.uniforms,
vertexShader: shader.vertexShader,
fragmentShader: shader.fragmentShader
} );
this.camera = new THREE.OrthographicCamera( - 1, 1, 1, - 1, 0, 1 );
this.scene = new THREE.Scene();
this.quad = new THREE.Mesh( new THREE.PlaneBufferGeometry( 2, 2 ), null );
this.quad.frustumCulled = false; // Avoid getting clipped
this.scene.add( this.quad );
this.goWild = false;
this.curF = 0;
this.generateTrigger();
};
THREE.GlitchPass.prototype = Object.assign( Object.create( THREE.Pass.prototype ), {
constructor: THREE.GlitchPass,
render: function ( renderer, writeBuffer, readBuffer, delta, maskActive ) {
this.uniforms[ "tDiffuse" ].value = readBuffer.texture;
this.uniforms[ 'seed' ].value = Math.random();//default seeding
this.uniforms[ 'byp' ].value = 0;
if ( this.goWild == true ) {
this.uniforms[ 'amount' ].value = Math.random() / 100;
//this.uniforms[ 'angle' ].value = THREE.Math.randFloat( - Math.PI, Math.PI );
this.uniforms[ 'seed_x' ].value = THREE.Math.randFloat( -.2, .3 );
this.uniforms[ 'seed_y' ].value = THREE.Math.randFloat( -.2, .3 );
this.uniforms[ 'distortion_x' ].value = THREE.Math.randFloat( 0, -.5 );
this.uniforms[ 'distortion_y' ].value = THREE.Math.randFloat( 0, -.5 );
this.curF = 0;
this.generateTrigger();
} else if ( this.curF % this.randX < this.randX / 10 && this.goWild == false ) {
this.uniforms[ 'amount' ].value = Math.random() / 100;
//this.uniforms[ 'angle' ].value = THREE.Math.randFloat( - Math.PI, Math.PI );
this.uniforms[ 'distortion_x' ].value = THREE.Math.randFloat( 0, -.5 );
this.uniforms[ 'distortion_y' ].value = THREE.Math.randFloat( 0, -.5 );
this.uniforms[ 'seed_x' ].value = THREE.Math.randFloat( - 0, .1 );
this.uniforms[ 'seed_y' ].value = THREE.Math.randFloat( - 0, .1);
} else {
this.uniforms[ 'byp' ].value = 1;
}
this.curF ++;
this.quad.material = this.material;
if ( this.renderToScreen ) {
renderer.render( this.scene, this.camera );
} else {
renderer.render( this.scene, this.camera, writeBuffer, this.clear );
}
},
generateTrigger: function() {
this.randX = THREE.Math.randInt( 120, 250 );
},
generateHeightmap: function( dt_size ) {
var data_arr = new Float32Array( dt_size * dt_size * 3 );
var length = dt_size * dt_size;
for ( var i = 0; i < length; i ++ ) {
var val = THREE.Math.randFloat( 0, 1 );
data_arr[ i * 3 + 0 ] = val;
data_arr[ i * 3 + 1 ] = val;
data_arr[ i * 3 + 2 ] = val;
}
var texture = new THREE.DataTexture( data_arr, dt_size, dt_size, THREE.RGBFormat, THREE.FloatType );
texture.needsUpdate = true;
return texture;
}
} );
var container;
var camera, scene, renderer;
var geometry, loader;
var composer;
var shaderTime = 0;
var glitchPass;
var renderPass, copyPass;
var mesh;
var timer;
var updateMeshScale;
var glitchPass;
var renderPass, copyPass;
var rgbParams, rgbPass;
var filmParams, filmPass;
var renderPass, copyPass;
var gui;
var pnoise, globalParams;
b = 0;
var windowHalfX = $('#container').width() / 2;
var windowHalfY = $('#container').height() / 2;
var scrollbar;
pixelRatio = window.devicePixelRatio || 0;
var manager = new THREE.LoadingManager();
var loader = new THREE.TextureLoader(manager);
var backgroundsLoaded = false;
var backgrounds = [];
var loadedBackgrounds = [];
//https://s3-us-west-2.amazonaws.com/s.cdpn.io/253981/nasa1_eve4gg.jpg
var backgroundImages = ['https://s3-us-west-2.amazonaws.com/s.cdpn.io/253981/nasa3_dofw9c.jpg','https://s3-us-west-2.amazonaws.com/s.cdpn.io/253981/nasa2_jh1ueh.jpg','https://s3-us-west-2.amazonaws.com/s.cdpn.io/253981/nasa1_eve4gg.jpg','https://s3-us-west-2.amazonaws.com/s.cdpn.io/253981/nasa4_cftbva.jpg', 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/253981/nasa5_nr7yau.jpg'];
var backgroundData = [
'001','002','003','004','005'
]
loadBackgrounds(backgroundImages[0]);
var loadChecker = setInterval(function(){
if(backgroundsLoaded){
clearInterval(loadChecker);
onLoad();
}
},100);
function init() {
container = $('#container');
pixelRatio = window.devicePixelRatio || 0;
renderer = new THREE.WebGLRenderer();
renderer.setPixelRatio( pixelRatio );
renderer.setSize( $('#container').width() , $('#container').height() );
console.log($('#container').width() +', '+ $('#container').height())
container.append( renderer.domElement );
vFov = (2 * Math.atan( ($('#container').height()) / ( 2 * 1500 ) )) * 180 / Math.PI;
camera = new THREE.OrthographicCamera( ($('#container').width()) / - 2, ($('#container').width()) / 2, ($('#container').height() )/ 2, ($('#container').height() ) / - 2, 1, 10000 );
camera.aspect = $('#container').width() / $('#container').height();
camera.position.z = 3000;
scene = new THREE.Scene();
scene.position.y =0 ;
var geometry = new THREE.PlaneBufferGeometry( 16, 16, 16 );
for ( var i = 0; i < loadedBackgrounds.length; i ++ ) {
var material = new THREE.MeshBasicMaterial( { color: 0xffffff, map: loadedBackgrounds[i] ,refractionRatio: 0.95, transparent: true, opacity: 1 } );
material.side = THREE.DoubleSide;
material.wrapS = material.wrapT = THREE.RepeatWrapping;
var mesh = new THREE.Mesh( geometry, material);
mesh.geometry.needsUpdate = true;
mesh.geometry.dynamic = true;
mesh.position.x = .5;
mesh.position.y = $('#container').width() * i *-1;
mesh.position.z = 1500;
mesh.scale.x = mesh.scale.y = mesh.scale.z = $('#container').width()/16;
scene.add( mesh );
backgrounds.push( mesh );
}
composer = new THREE.EffectComposer(renderer);
composer.setSize( $('#container').width() * pixelRatio, $('#container').height() * pixelRatio );
composer.addPass( new THREE.RenderPass( scene, camera ) );
glitchPass = new THREE.GlitchPass();
glitchPass.renderToScreen = true;
composer.addPass( glitchPass );
window.addEventListener( 'resize', onWindowResize, false );
var scrollbar = Scrollbar.init($('#container')[0], {
speed: 0.9,
damping: 0.1,
renderByPixels: true,
syncCallbacks: true,
continuousScrolling: false,
overscrollEffect: false
});
scrollbar.addListener(function (status) {
$scrolled = status.offset.y;
$('#container').attr('data-scrolled',$scrolled);
$('#container #data').css('top',$scrolled + 'px');
//$('#container #data p').css('top',$('#container').height()*$scrolled/$('#spacer').height() + 'px');
$('#container .fixed, #container canvas').css('top',$scrolled + 'px');
glitchPass.goWild = true;
for ( var i = 0, il = backgrounds.length; i < il; i ++ ) {
var background = backgrounds[ i ];
$unit = Math.max($('#container').width(), $('#container').height());
$threshold = $scrolled + ($('#container').width() - $('#container').height())/2;
if($narrow){
$threshold = $scrolled;
}
if($unit*i < $threshold + $unit/2 && ($unit*(i+2)) > $threshold){
$data = backgroundData[i];
if(!$data){
$data = backgroundData[0];
}
$('#data p').html($data);
}
}
clearTimeout(timer);
timer = setTimeout( function(){
glitchPass.goWild = false;
},50);
});
onWindowResize();
}
function loadBackgrounds(bg){
var loader = new THREE.TextureLoader(manager)
loader.load(bg, function (object) {
loadedBackgrounds.push(object);
if(loadedBackgrounds.length == backgroundImages.length ){
backgroundsLoaded = true;
} else{
b++
if(b < backgroundImages.length){
loadBackgrounds(backgroundImages[b]);
} else{
backgroundsLoaded = true;
}
}
});
}
function onLoad(){
init();
animate();
}
$narrow = false;
function onWindowResize() {
renderer.setSize( $('#container').width(), $('#container').height() );
//composer.setSize( $('#container').width() * pixelRatio, $('#container').height() * pixelRatio );
if($('#container').width() > $('#container').height()){
$narrow = false;
} else{
$narrow = true;
}
for ( var i = 0, il = backgrounds.length; i < il; i ++ ) {
var background = backgrounds[ i ];
background.scale.x = background.scale.y = background.scale.z = Math.max($('#container').width()/16, $('#container').height()/16);
background.position.y = Math.max($('#container').width(), $('#container').height()) * i *-1;
}
vFov = (2 * Math.atan( $('#container').height() / ( 2 * 1500 ) )) * 180 / Math.PI;
camera.fov = vFov;
camera.left = $('#container').width() / -2;
camera.right = $('#container').width() / 2;
camera.top = $('#container').height() / 2;
camera.bottom = $('#container').height() / -2;
camera.updateProjectionMatrix();
$('#container #spacer').height(Math.max($('#container').width(), $('#container').height()) * backgrounds.length);
}
function animate() {
requestAnimationFrame( animate );
if($narrow){
scene.position.y = (parseInt($('#container').attr('data-scrolled')));
} else{
scene.position.y = (parseInt($('#container').attr('data-scrolled')) - ($('#container').width() - $('#container').height())/2);
}
//renderer.render(scene,camera);
composer.render();
}
!
