From 058f86f6ab25c82184c0bb51f703df49ccd3537f Mon Sep 17 00:00:00 2001 From: alteredq Date: Wed, 31 Aug 2011 15:04:38 +0200 Subject: [PATCH] Moved focus shader out of dynamic particles example into ShaderExtras. Also updated dynamic particles example to handle resizing. --- examples/js/ShaderExtras.js | 192 +++++++++++++++++++------- examples/webgl_particles_dynamic.html | 124 ++++------------- 2 files changed, 171 insertions(+), 145 deletions(-) diff --git a/examples/js/ShaderExtras.js b/examples/js/ShaderExtras.js index 61453eb9..5113bdc4 100644 --- a/examples/js/ShaderExtras.js +++ b/examples/js/ShaderExtras.js @@ -275,67 +275,67 @@ THREE.ShaderExtras = { "void main() {", - "vec2 aspectcorrect = vec2( 1.0, aspect );", + "vec2 aspectcorrect = vec2( 1.0, aspect );", - "vec4 depth1 = texture2D( tDepth, vUv );", + "vec4 depth1 = texture2D( tDepth, vUv );", - "float factor = depth1.x - focus;", + "float factor = depth1.x - focus;", - "vec2 dofblur = vec2 ( clamp( factor * aperture, -maxblur, maxblur ) );", + "vec2 dofblur = vec2 ( clamp( factor * aperture, -maxblur, maxblur ) );", - "vec2 dofblur9 = dofblur * 0.9;", - "vec2 dofblur7 = dofblur * 0.7;", - "vec2 dofblur4 = dofblur * 0.4;", + "vec2 dofblur9 = dofblur * 0.9;", + "vec2 dofblur7 = dofblur * 0.7;", + "vec2 dofblur4 = dofblur * 0.4;", - "vec4 col = vec4( 0.0 );", + "vec4 col = vec4( 0.0 );", - "col += texture2D( tColor, vUv.xy );", - "col += texture2D( tColor, vUv.xy + ( vec2( 0.0, 0.4 ) * aspectcorrect ) * dofblur );", - "col += texture2D( tColor, vUv.xy + ( vec2( 0.15, 0.37 ) * aspectcorrect ) * dofblur );", - "col += texture2D( tColor, vUv.xy + ( vec2( 0.29, 0.29 ) * aspectcorrect ) * dofblur );", - "col += texture2D( tColor, vUv.xy + ( vec2( -0.37, 0.15 ) * aspectcorrect ) * dofblur );", - "col += texture2D( tColor, vUv.xy + ( vec2( 0.40, 0.0 ) * aspectcorrect ) * dofblur );", - "col += texture2D( tColor, vUv.xy + ( vec2( 0.37, -0.15 ) * aspectcorrect ) * dofblur );", - "col += texture2D( tColor, vUv.xy + ( vec2( 0.29, -0.29 ) * aspectcorrect ) * dofblur );", - "col += texture2D( tColor, vUv.xy + ( vec2( -0.15, -0.37 ) * aspectcorrect ) * dofblur );", - "col += texture2D( tColor, vUv.xy + ( vec2( 0.0, -0.4 ) * aspectcorrect ) * dofblur );", - "col += texture2D( tColor, vUv.xy + ( vec2( -0.15, 0.37 ) * aspectcorrect ) * dofblur );", - "col += texture2D( tColor, vUv.xy + ( vec2( -0.29, 0.29 ) * aspectcorrect ) * dofblur );", - "col += texture2D( tColor, vUv.xy + ( vec2( 0.37, 0.15 ) * aspectcorrect ) * dofblur );", - "col += texture2D( tColor, vUv.xy + ( vec2( -0.4, 0.0 ) * aspectcorrect ) * dofblur );", - "col += texture2D( tColor, vUv.xy + ( vec2( -0.37, -0.15 ) * aspectcorrect ) * dofblur );", - "col += texture2D( tColor, vUv.xy + ( vec2( -0.29, -0.29 ) * aspectcorrect ) * dofblur );", - "col += texture2D( tColor, vUv.xy + ( vec2( 0.15, -0.37 ) * aspectcorrect ) * dofblur );", + "col += texture2D( tColor, vUv.xy );", + "col += texture2D( tColor, vUv.xy + ( vec2( 0.0, 0.4 ) * aspectcorrect ) * dofblur );", + "col += texture2D( tColor, vUv.xy + ( vec2( 0.15, 0.37 ) * aspectcorrect ) * dofblur );", + "col += texture2D( tColor, vUv.xy + ( vec2( 0.29, 0.29 ) * aspectcorrect ) * dofblur );", + "col += texture2D( tColor, vUv.xy + ( vec2( -0.37, 0.15 ) * aspectcorrect ) * dofblur );", + "col += texture2D( tColor, vUv.xy + ( vec2( 0.40, 0.0 ) * aspectcorrect ) * dofblur );", + "col += texture2D( tColor, vUv.xy + ( vec2( 0.37, -0.15 ) * aspectcorrect ) * dofblur );", + "col += texture2D( tColor, vUv.xy + ( vec2( 0.29, -0.29 ) * aspectcorrect ) * dofblur );", + "col += texture2D( tColor, vUv.xy + ( vec2( -0.15, -0.37 ) * aspectcorrect ) * dofblur );", + "col += texture2D( tColor, vUv.xy + ( vec2( 0.0, -0.4 ) * aspectcorrect ) * dofblur );", + "col += texture2D( tColor, vUv.xy + ( vec2( -0.15, 0.37 ) * aspectcorrect ) * dofblur );", + "col += texture2D( tColor, vUv.xy + ( vec2( -0.29, 0.29 ) * aspectcorrect ) * dofblur );", + "col += texture2D( tColor, vUv.xy + ( vec2( 0.37, 0.15 ) * aspectcorrect ) * dofblur );", + "col += texture2D( tColor, vUv.xy + ( vec2( -0.4, 0.0 ) * aspectcorrect ) * dofblur );", + "col += texture2D( tColor, vUv.xy + ( vec2( -0.37, -0.15 ) * aspectcorrect ) * dofblur );", + "col += texture2D( tColor, vUv.xy + ( vec2( -0.29, -0.29 ) * aspectcorrect ) * dofblur );", + "col += texture2D( tColor, vUv.xy + ( vec2( 0.15, -0.37 ) * aspectcorrect ) * dofblur );", - "col += texture2D( tColor, vUv.xy + ( vec2( 0.15, 0.37 ) * aspectcorrect ) * dofblur9 );", - "col += texture2D( tColor, vUv.xy + ( vec2( -0.37, 0.15 ) * aspectcorrect ) * dofblur9 );", - "col += texture2D( tColor, vUv.xy + ( vec2( 0.37, -0.15 ) * aspectcorrect ) * dofblur9 );", - "col += texture2D( tColor, vUv.xy + ( vec2( -0.15, -0.37 ) * aspectcorrect ) * dofblur9 );", - "col += texture2D( tColor, vUv.xy + ( vec2( -0.15, 0.37 ) * aspectcorrect ) * dofblur9 );", - "col += texture2D( tColor, vUv.xy + ( vec2( 0.37, 0.15 ) * aspectcorrect ) * dofblur9 );", - "col += texture2D( tColor, vUv.xy + ( vec2( -0.37, -0.15 ) * aspectcorrect ) * dofblur9 );", - "col += texture2D( tColor, vUv.xy + ( vec2( 0.15, -0.37 ) * aspectcorrect ) * dofblur9 );", + "col += texture2D( tColor, vUv.xy + ( vec2( 0.15, 0.37 ) * aspectcorrect ) * dofblur9 );", + "col += texture2D( tColor, vUv.xy + ( vec2( -0.37, 0.15 ) * aspectcorrect ) * dofblur9 );", + "col += texture2D( tColor, vUv.xy + ( vec2( 0.37, -0.15 ) * aspectcorrect ) * dofblur9 );", + "col += texture2D( tColor, vUv.xy + ( vec2( -0.15, -0.37 ) * aspectcorrect ) * dofblur9 );", + "col += texture2D( tColor, vUv.xy + ( vec2( -0.15, 0.37 ) * aspectcorrect ) * dofblur9 );", + "col += texture2D( tColor, vUv.xy + ( vec2( 0.37, 0.15 ) * aspectcorrect ) * dofblur9 );", + "col += texture2D( tColor, vUv.xy + ( vec2( -0.37, -0.15 ) * aspectcorrect ) * dofblur9 );", + "col += texture2D( tColor, vUv.xy + ( vec2( 0.15, -0.37 ) * aspectcorrect ) * dofblur9 );", - "col += texture2D( tColor, vUv.xy + ( vec2( 0.29, 0.29 ) * aspectcorrect ) * dofblur7 );", - "col += texture2D( tColor, vUv.xy + ( vec2( 0.40, 0.0 ) * aspectcorrect ) * dofblur7 );", - "col += texture2D( tColor, vUv.xy + ( vec2( 0.29, -0.29 ) * aspectcorrect ) * dofblur7 );", - "col += texture2D( tColor, vUv.xy + ( vec2( 0.0, -0.4 ) * aspectcorrect ) * dofblur7 );", - "col += texture2D( tColor, vUv.xy + ( vec2( -0.29, 0.29 ) * aspectcorrect ) * dofblur7 );", - "col += texture2D( tColor, vUv.xy + ( vec2( -0.4, 0.0 ) * aspectcorrect ) * dofblur7 );", - "col += texture2D( tColor, vUv.xy + ( vec2( -0.29, -0.29 ) * aspectcorrect ) * dofblur7 );", - "col += texture2D( tColor, vUv.xy + ( vec2( 0.0, 0.4 ) * aspectcorrect ) * dofblur7 );", + "col += texture2D( tColor, vUv.xy + ( vec2( 0.29, 0.29 ) * aspectcorrect ) * dofblur7 );", + "col += texture2D( tColor, vUv.xy + ( vec2( 0.40, 0.0 ) * aspectcorrect ) * dofblur7 );", + "col += texture2D( tColor, vUv.xy + ( vec2( 0.29, -0.29 ) * aspectcorrect ) * dofblur7 );", + "col += texture2D( tColor, vUv.xy + ( vec2( 0.0, -0.4 ) * aspectcorrect ) * dofblur7 );", + "col += texture2D( tColor, vUv.xy + ( vec2( -0.29, 0.29 ) * aspectcorrect ) * dofblur7 );", + "col += texture2D( tColor, vUv.xy + ( vec2( -0.4, 0.0 ) * aspectcorrect ) * dofblur7 );", + "col += texture2D( tColor, vUv.xy + ( vec2( -0.29, -0.29 ) * aspectcorrect ) * dofblur7 );", + "col += texture2D( tColor, vUv.xy + ( vec2( 0.0, 0.4 ) * aspectcorrect ) * dofblur7 );", - "col += texture2D( tColor, vUv.xy + ( vec2( 0.29, 0.29 ) * aspectcorrect ) * dofblur4 );", - "col += texture2D( tColor, vUv.xy + ( vec2( 0.4, 0.0 ) * aspectcorrect ) * dofblur4 );", - "col += texture2D( tColor, vUv.xy + ( vec2( 0.29, -0.29 ) * aspectcorrect ) * dofblur4 );", - "col += texture2D( tColor, vUv.xy + ( vec2( 0.0, -0.4 ) * aspectcorrect ) * dofblur4 );", - "col += texture2D( tColor, vUv.xy + ( vec2( -0.29, 0.29 ) * aspectcorrect ) * dofblur4 );", - "col += texture2D( tColor, vUv.xy + ( vec2( -0.4, 0.0 ) * aspectcorrect ) * dofblur4 );", - "col += texture2D( tColor, vUv.xy + ( vec2( -0.29, -0.29 ) * aspectcorrect ) * dofblur4 );", - "col += texture2D( tColor, vUv.xy + ( vec2( 0.0, 0.4 ) * aspectcorrect ) * dofblur4 );", + "col += texture2D( tColor, vUv.xy + ( vec2( 0.29, 0.29 ) * aspectcorrect ) * dofblur4 );", + "col += texture2D( tColor, vUv.xy + ( vec2( 0.4, 0.0 ) * aspectcorrect ) * dofblur4 );", + "col += texture2D( tColor, vUv.xy + ( vec2( 0.29, -0.29 ) * aspectcorrect ) * dofblur4 );", + "col += texture2D( tColor, vUv.xy + ( vec2( 0.0, -0.4 ) * aspectcorrect ) * dofblur4 );", + "col += texture2D( tColor, vUv.xy + ( vec2( -0.29, 0.29 ) * aspectcorrect ) * dofblur4 );", + "col += texture2D( tColor, vUv.xy + ( vec2( -0.4, 0.0 ) * aspectcorrect ) * dofblur4 );", + "col += texture2D( tColor, vUv.xy + ( vec2( -0.29, -0.29 ) * aspectcorrect ) * dofblur4 );", + "col += texture2D( tColor, vUv.xy + ( vec2( 0.0, 0.4 ) * aspectcorrect ) * dofblur4 );", - "gl_FragColor = col / 41.0;", - "gl_FragColor.a = 1.0;", + "gl_FragColor = col / 41.0;", + "gl_FragColor.a = 1.0;", "}" @@ -588,6 +588,96 @@ THREE.ShaderExtras = { }, + /* -------------------------------------------------------------------------------------------------- + // Focus shader + // - based on PaintEffect postprocess from ro.me + // http://code.google.com/p/3-dreams-of-black/source/browse/deploy/js/effects/PaintEffect.js + -------------------------------------------------------------------------------------------------- */ + + 'focus': { + + uniforms : { + + "tDiffuse": { type: "t", value: 0, texture: null }, + "screenWidth": { type: "f", value: 1024 }, + "screenHeight": { type: "f", value: 1024 }, + "sampleDistance": { type: "f", value: 0.94 }, + "waveFactor": { type: "f", value: 0.00125 } + + }, + + vertexShader: [ + + "varying vec2 vUv;", + + "void main() {", + + "vUv = vec2( uv.x, 1.0 - uv.y );", + "gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );", + + "}" + + ].join("\n"), + + fragmentShader: [ + + "uniform float screenWidth;", + "uniform float screenHeight;", + "uniform float sampleDistance;", + "uniform float waveFactor;", + + "uniform sampler2D tDiffuse;", + + "varying vec2 vUv;", + + "void main() {", + + "vec4 color, org, tmp, add;", + "float sample_dist, f;", + "vec2 vin;", + "vec2 uv = vUv;", + + "add += color = org = texture2D( tDiffuse, uv );", + + "vin = ( uv - vec2( 0.5 ) ) * vec2( 1.4 );", + "sample_dist = dot( vin, vin ) * 2.0;", + + "f = ( waveFactor * 100.0 + sample_dist ) * sampleDistance * 4.0;", + + "vec2 sampleSize = vec2( 1.0 / screenWidth, 1.0 / screenHeight ) * vec2( f );", + + "add += tmp = texture2D( tDiffuse, uv + vec2( 0.111964, 0.993712 ) * sampleSize );", + "if( tmp.b < color.b ) color = tmp;", + + "add += tmp = texture2D( tDiffuse, uv + vec2( 0.846724, 0.532032 ) * sampleSize );", + "if( tmp.b < color.b ) color = tmp;", + + "add += tmp = texture2D( tDiffuse, uv + vec2( 0.943883, -0.330279 ) * sampleSize );", + "if( tmp.b < color.b ) color = tmp;", + + "add += tmp = texture2D( tDiffuse, uv + vec2( 0.330279, -0.943883 ) * sampleSize );", + "if( tmp.b < color.b ) color = tmp;", + + "add += tmp = texture2D( tDiffuse, uv + vec2( -0.532032, -0.846724 ) * sampleSize );", + "if( tmp.b < color.b ) color = tmp;", + + "add += tmp = texture2D( tDiffuse, uv + vec2( -0.993712, -0.111964 ) * sampleSize );", + "if( tmp.b < color.b ) color = tmp;", + + "add += tmp = texture2D( tDiffuse, uv + vec2( -0.707107, 0.707107 ) * sampleSize );", + "if( tmp.b < color.b ) color = tmp;", + + "color = color * vec4( 2.0 ) - ( add / vec4( 8.0 ) );", + "color = color + ( add / vec4( 8.0 ) - color ) * ( vec4( 1.0 ) - vec4( sample_dist * 0.5 ) );", + + "gl_FragColor = vec4( color.rgb * color.rgb * vec3( 0.95 ) + color.rgb, 1.0 );", + + "}" + + + ].join("\n") + }, + /* ------------------------------------------------------------------------- // Simple test shader ------------------------------------------------------------------------- */ diff --git a/examples/webgl_particles_dynamic.html b/examples/webgl_particles_dynamic.html index 280fe962..421b751e 100644 --- a/examples/webgl_particles_dynamic.html +++ b/examples/webgl_particles_dynamic.html @@ -73,7 +73,7 @@ var total = 0, totaln = 0; - var composer; + var composer, effectFocus; init(); animate(); @@ -169,7 +169,11 @@ var renderModel = new THREE.RenderPass( scene, camera ); var effectBloom = new THREE.BloomPass( 0.75 ); var effectFilm = new THREE.FilmPass( 0.5, 0.5, 1448, false ); - var effectFocus = new THREE.ShaderPass( generateFocusShader(), "map" ); + + effectFocus = new THREE.ShaderPass( THREE.ShaderExtras[ "focus" ] ); + + effectFocus.uniforms[ "screenWidth" ].value = window.innerWidth; + effectFocus.uniforms[ "screenHeight" ].value = window.innerHeight; effectFocus.renderToScreen = true; @@ -180,8 +184,30 @@ composer.addPass( effectFilm ); composer.addPass( effectFocus ); + // + + window.addEventListener( 'resize', onWindowResize, false ); + } + // + + function onWindowResize( event ) { + + renderer.setSize( window.innerWidth, window.innerHeight ); + + camera.aspect = window.innerWidth / window.innerHeight; + camera.updateProjectionMatrix(); + + composer.reset(); + + effectFocus.uniforms[ "screenWidth" ].value = window.innerWidth; + effectFocus.uniforms[ "screenHeight" ].value = window.innerHeight; + + } + + // + function createMesh( originalGeometry, scene, scale, x, y, z, color, dynamic ) { var i, c; @@ -260,97 +286,7 @@ dynamic: dynamic, bb: geometry.boundingBox } ); - console.log( total, totaln ); - - } - - function generateFocusShader() { - - var shader = { - - uniforms : { - - "map": { type: "t", value: 0, texture: null }, - "screenWidth": { type: "f", value: SCREEN_WIDTH }, - "screenHeight": { type: "f", value: SCREEN_HEIGHT }, - "sampleDistance": { type: "f", value: 0.94 }, - "waveFactor": { type: "f", value: 0.00125 } - - }, - - vertexShader: [ - - "varying vec2 vUv;", - - "void main() {", - - "vUv = vec2( uv.x, 1.0 - uv.y );", - "gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );", - - "}" - - ].join("\n"), - - fragmentShader: [ - - "uniform float screenWidth;", - "uniform float screenHeight;", - "uniform float sampleDistance;", - "uniform float waveFactor;", - - "uniform sampler2D map;", - "varying vec2 vUv;", - - "void main() {", - - "vec4 color, org, tmp, add;", - "float sample_dist, f;", - "vec2 vin;", - "vec2 uv = vUv;", - - "add += color = org = texture2D( map, uv );", - - "vin = ( uv - vec2( 0.5 ) ) * vec2( 1.4 );", - "sample_dist = dot( vin, vin ) * 2.0;", - - "f = ( waveFactor * 100.0 + sample_dist ) * sampleDistance * 4.0;", - - "vec2 sampleSize = vec2( 1.0 / screenWidth, 1.0 / screenHeight ) * vec2(f);", - - "add += tmp = texture2D( map, uv + vec2(0.111964, 0.993712) * sampleSize );", - "if( tmp.b < color.b ) color = tmp;", - - "add += tmp = texture2D( map, uv + vec2(0.846724, 0.532032) * sampleSize );", - "if( tmp.b < color.b ) color = tmp;", - - "add += tmp = texture2D( map, uv + vec2(0.943883, -0.330279) * sampleSize );", - "if( tmp.b < color.b ) color = tmp;", - - "add += tmp = texture2D( map, uv + vec2(0.330279, -0.943883) * sampleSize );", - "if( tmp.b < color.b ) color = tmp;", - - "add += tmp = texture2D( map, uv + vec2(-0.532032, -0.846724) * sampleSize );", - "if( tmp.b < color.b ) color = tmp;", - - "add += tmp = texture2D( map, uv + vec2(-0.993712, -0.111964) * sampleSize );", - "if( tmp.b < color.b ) color = tmp;", - - "add += tmp = texture2D( map, uv + vec2(-0.707107, 0.707107) * sampleSize );", - "if( tmp.b < color.b ) color = tmp;", - - "color = color * vec4( 2.0 ) - ( add / vec4( 8.0 ) );", - "color = color + ( add / vec4(8.0) - color ) * ( vec4(1.0) - vec4(sample_dist * 0.5) );", - - "gl_FragColor = vec4( color.rgb * color.rgb * vec3( 0.95 ) + color.rgb, 1.0 );", - - "}" - - - ].join("\n") - - }; - - return shader; + //console.log( total, totaln ); } @@ -363,7 +299,7 @@ requestAnimationFrame( animate ); render(); - //stats.update(); + stats.update(); }