diff --git a/examples/webgl_materials_video.html b/examples/webgl_materials_video.html
index 0226b0edef7797be087d55991a76186559993401..320381697339f4165eb23eb1f7592ad638f1501b 100644
--- a/examples/webgl_materials_video.html
+++ b/examples/webgl_materials_video.html
@@ -40,6 +40,11 @@
+
+
+
+
+
@@ -59,14 +64,14 @@
var video, texture, material, mesh;
+ var composer;
+
var mouseX = 0;
var mouseY = 0;
var windowHalfX = window.innerWidth / 2;
var windowHalfY = window.innerHeight / 2;
- var postprocessing = { enabled: true };
-
var cube_count,
meshes = [],
@@ -165,7 +170,6 @@
}
- initPostprocessing();
renderer.autoClear = false;
stats = new Stats();
@@ -175,6 +179,20 @@
document.addEventListener( 'mousemove', onDocumentMouseMove, false );
+ // postprocessing
+
+ var renderModel = new THREE.RenderPass( scene, camera );
+ var effectBloom = new THREE.BloomPass( 1.3 );
+ var effectScreen = new THREE.ShaderPass( THREE.ShaderExtras[ "screen" ] );
+
+ effectScreen.renderToScreen = true;
+
+ composer = new THREE.EffectComposer( renderer );
+
+ composer.addPass( renderModel );
+ composer.addPass( effectBloom );
+ composer.addPass( effectScreen );
+
}
function change_uvs( geometry, unitx, unity, offsetx, offsety ) {
@@ -197,58 +215,6 @@
}
- function initPostprocessing() {
-
- postprocessing.scene = new THREE.Scene();
-
- postprocessing.camera = new THREE.OrthoCamera( window.innerWidth / - 2, window.innerWidth / 2, window.innerHeight / 2, window.innerHeight / - 2, -10000, 10000 );
- postprocessing.camera.position.z = 100;
-
- var pars = { minFilter: THREE.LinearFilter, magFilter: THREE.LinearFilter, format: THREE.RGBFormat };
- postprocessing.rtTexture1 = new THREE.WebGLRenderTarget( window.innerWidth, window.innerHeight, pars );
- postprocessing.rtTexture2 = new THREE.WebGLRenderTarget( 512, 512, pars );
- postprocessing.rtTexture3 = new THREE.WebGLRenderTarget( 512, 512, pars );
-
- var screen_shader = THREE.ShaderExtras["screen"];
- var screen_uniforms = THREE.UniformsUtils.clone( screen_shader.uniforms );
-
- screen_uniforms["tDiffuse"].texture = postprocessing.rtTexture1;
- screen_uniforms["opacity"].value = 1.0;
-
- postprocessing.materialScreen = new THREE.MeshShaderMaterial( {
-
- uniforms: screen_uniforms,
- vertexShader: screen_shader.vertexShader,
- fragmentShader: screen_shader.fragmentShader,
- blending: THREE.AdditiveBlending,
- transparent: true
-
- } );
-
- var convolution_shader = THREE.ShaderExtras["convolution"];
- var convolution_uniforms = THREE.UniformsUtils.clone( convolution_shader.uniforms );
-
- postprocessing.blurx = new THREE.Vector2( 0.001953125, 0.0 ),
- postprocessing.blury = new THREE.Vector2( 0.0, 0.001953125 );
-
- convolution_uniforms["tDiffuse"].texture = postprocessing.rtTexture1;
- convolution_uniforms["uImageIncrement"].value = postprocessing.blurx;
- convolution_uniforms["cKernel"].value = THREE.ShaderExtras.buildKernel( 4.0 );
-
- postprocessing.materialConvolution = new THREE.MeshShaderMaterial( {
-
- uniforms: convolution_uniforms,
- vertexShader: "#define KERNEL_SIZE 25.0\n" + convolution_shader.vertexShader,
- fragmentShader: "#define KERNEL_SIZE 25\n" + convolution_shader.fragmentShader
-
- } );
-
- postprocessing.quad = new THREE.Mesh( new THREE.PlaneGeometry( window.innerWidth, window.innerHeight ), postprocessing.materialConvolution );
- postprocessing.quad.position.z = -500;
- postprocessing.scene.addObject( postprocessing.quad );
-
- }
-
function onDocumentMouseMove(event) {
mouseX = ( event.clientX - windowHalfX );
@@ -321,51 +287,11 @@
}
- counter++;
+ counter ++;
renderer.clear();
+ composer.render();
- if ( postprocessing.enabled ) {
-
- // Render scene into texture
-
- renderer.render( scene, camera, postprocessing.rtTexture1, true );
-
- // Render quad with blured scene into texture (convolution pass 1)
-
- postprocessing.quad.materials = [ postprocessing.materialConvolution ];
-
- postprocessing.materialConvolution.uniforms.tDiffuse.texture = postprocessing.rtTexture1;
- postprocessing.materialConvolution.uniforms.uImageIncrement.value = postprocessing.blurx;
-
- renderer.render( postprocessing.scene, postprocessing.camera, postprocessing.rtTexture2, true );
-
- // Render quad with blured scene into texture (convolution pass 2)
-
- postprocessing.materialConvolution.uniforms.tDiffuse.texture = postprocessing.rtTexture2;
- postprocessing.materialConvolution.uniforms.uImageIncrement.value = postprocessing.blury;
-
- renderer.render( postprocessing.scene, postprocessing.camera, postprocessing.rtTexture3, true );
-
- // Render original scene with superimposed blur to texture
-
- postprocessing.quad.materials = [ postprocessing.materialScreen ];
-
- postprocessing.materialScreen.uniforms.tDiffuse.texture = postprocessing.rtTexture3;
- postprocessing.materialScreen.uniforms.opacity.value = 1.3;
-
- renderer.render( postprocessing.scene, postprocessing.camera, postprocessing.rtTexture1, false );
-
- // Render to screen
-
- postprocessing.materialScreen.uniforms.tDiffuse.texture = postprocessing.rtTexture1;
- renderer.render( postprocessing.scene, postprocessing.camera );
-
- } else {
-
- renderer.render( scene, camera );
-
- }
}
diff --git a/examples/webgl_particles_dynamic.html b/examples/webgl_particles_dynamic.html
index 3616b45b87e8800d895bd2b6e6a5479e45824f63..280fe96231afa3c71a36bf43aa3614010ee5d562 100644
--- a/examples/webgl_particles_dynamic.html
+++ b/examples/webgl_particles_dynamic.html
@@ -43,6 +43,12 @@
+
+
+
+
+
+
@@ -67,8 +73,7 @@
var total = 0, totaln = 0;
- var postprocessing1 = {};
- var postprocessing2 = {};
+ var composer;
init();
animate();
@@ -90,9 +95,6 @@
directionalLight.position.normalize();
scene.addLight( directionalLight );
- initPostprocessingBloom( postprocessing1 );
- initPostprocessingFocus( postprocessing2 );
-
aloader = new THREE.JSONLoader( );
bloader = new THREE.BinaryLoader( true );
@@ -132,6 +134,8 @@
} } );
+ //
+
renderer = new THREE.WebGLRenderer( { clearColor: 0x000000, clearAlpha: 1, antialias: false } );
renderer.setSize( SCREEN_WIDTH, SCREEN_HEIGHT );
renderer.autoClear = false;
@@ -140,11 +144,15 @@
renderer.setClearColor( scene.fog.color, 1 );
+ //
+
stats = new Stats();
stats.domElement.style.position = 'absolute';
stats.domElement.style.top = '0px';
//container.appendChild( stats.domElement );
+ //
+
parent = new THREE.Object3D();
scene.addObject( parent );
@@ -156,6 +164,22 @@
totaln += 1;
total += grid.geometry.vertices.length;
+ // postprocessing
+
+ 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.renderToScreen = true;
+
+ composer = new THREE.EffectComposer( renderer );
+
+ composer.addPass( renderModel );
+ composer.addPass( effectBloom );
+ composer.addPass( effectFilm );
+ composer.addPass( effectFocus );
+
}
function createMesh( originalGeometry, scene, scale, x, y, z, color, dynamic ) {
@@ -240,30 +264,20 @@
}
- function initPostprocessingFocus( effect ) {
-
- effect.type = "focus";
-
- effect.scene = new THREE.Scene();
+ function generateFocusShader() {
- effect.camera = new THREE.OrthoCamera( SCREEN_WIDTH / - 2, SCREEN_WIDTH / 2, SCREEN_HEIGHT / 2, SCREEN_HEIGHT / - 2, -10000, 10000 );
- effect.camera.position.z = 100;
+ var shader = {
- effect.texture = new THREE.WebGLRenderTarget( SCREEN_WIDTH, SCREEN_HEIGHT, { minFilter: THREE.LinearFilter, magFilter: THREE.NearestFilter, format: THREE.RGBFormat } );
+ uniforms : {
- var heatUniforms = {
-
- "map": { type: "t", value:0, texture: effect.texture },
- "screenWidth": { type: "f", value: SCREEN_WIDTH },
- "screenHeight": { type: "f", value: SCREEN_HEIGHT },
- "sampleDistance": { type: "f", value: 0.94 },
- "waveFactor": { type: "f", value: 0.00125 }
-
- };
+ "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 }
- effect.materialHeat = new THREE.MeshShaderMaterial( {
+ },
- uniforms: heatUniforms,
vertexShader: [
"varying vec2 vUv;",
@@ -279,134 +293,67 @@
fragmentShader: [
- "uniform float screenWidth;",
- "uniform float screenHeight;",
- "uniform float sampleDistance;",
- "uniform float waveFactor;",
+ "uniform float screenWidth;",
+ "uniform float screenHeight;",
+ "uniform float sampleDistance;",
+ "uniform float waveFactor;",
- "uniform sampler2D map;",
- "varying vec2 vUv;",
+ "uniform sampler2D map;",
+ "varying vec2 vUv;",
- "void main() {",
+ "void main() {",
- "vec4 color, org, tmp, add;",
- "float sample_dist, f;",
- "vec2 vin;",
- "vec2 uv = vUv;",
+ "vec4 color, org, tmp, add;",
+ "float sample_dist, f;",
+ "vec2 vin;",
+ "vec2 uv = vUv;",
- "add += color = org = texture2D( map, uv );",
+ "add += color = org = texture2D( map, uv );",
- "vin = ( uv - vec2( 0.5 ) ) * vec2( 1.4 );",
- "sample_dist = dot( vin, vin ) * 2.0;",
+ "vin = ( uv - vec2( 0.5 ) ) * vec2( 1.4 );",
+ "sample_dist = dot( vin, vin ) * 2.0;",
- "f = ( waveFactor * 100.0 + sample_dist ) * sampleDistance * 4.0;",
+ "f = ( waveFactor * 100.0 + sample_dist ) * sampleDistance * 4.0;",
- "vec2 sampleSize = vec2( 1.0 / screenWidth, 1.0 / screenHeight ) * vec2(f);",
+ "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.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.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.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.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.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.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;",
+ "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) );",
+ "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 );",
+ "gl_FragColor = vec4( color.rgb * color.rgb * vec3( 0.95 ) + color.rgb, 1.0 );",
- "}"
+ "}"
- ].join("\n")
+ ].join("\n")
- } );
+ };
- effect.quad = new THREE.Mesh( new THREE.PlaneGeometry( SCREEN_WIDTH, SCREEN_HEIGHT ), effect.materialHeat );
- effect.quad.position.z = -500;
- effect.scene.addObject( effect.quad );
+ return shader;
}
- function initPostprocessingBloom( effect ) {
-
- effect.type = "bloomnoise";
-
- effect.scene = new THREE.Scene();
-
- effect.camera = new THREE.OrthoCamera( SCREEN_WIDTH / - 2, SCREEN_WIDTH / 2, SCREEN_HEIGHT / 2, SCREEN_HEIGHT / - 2, -10000, 10000 );
- effect.camera.position.z = 100;
-
- var pars = { minFilter: THREE.LinearFilter, magFilter: THREE.LinearFilter, format: THREE.RGBFormat };
-
- effect.rtTexture1 = new THREE.WebGLRenderTarget( SCREEN_WIDTH, SCREEN_HEIGHT, pars );
- effect.rtTexture2 = new THREE.WebGLRenderTarget( 256, 512, pars );
- effect.rtTexture3 = new THREE.WebGLRenderTarget( 512, 256, pars );
-
- var screen_shader = THREE.ShaderExtras[ "screen" ];
- var screen_uniforms = THREE.UniformsUtils.clone( screen_shader.uniforms );
-
- screen_uniforms["tDiffuse"].texture = effect.rtTexture3;
- screen_uniforms["opacity"].value = 0.75;
-
- effect.materialScreen = new THREE.MeshShaderMaterial( {
-
- uniforms: screen_uniforms,
- vertexShader: screen_shader.vertexShader,
- fragmentShader: screen_shader.fragmentShader,
- blending: THREE.AdditiveBlending,
- transparent: true
-
- } );
-
- var convolution_shader = THREE.ShaderExtras[ "convolution" ];
- var convolution_uniforms = THREE.UniformsUtils.clone( convolution_shader.uniforms );
-
- effect.blurx = new THREE.Vector2( 0.001953125, 0.0 ),
- effect.blury = new THREE.Vector2( 0.0, 0.001953125 );
-
- convolution_uniforms["tDiffuse"].texture = effect.rtTexture1;
- convolution_uniforms["uImageIncrement"].value = effect.blurx;
- convolution_uniforms["cKernel"].value = THREE.ShaderExtras.buildKernel( 4.0 );
-
- effect.materialConvolution = new THREE.MeshShaderMaterial( {
-
- uniforms: convolution_uniforms,
- vertexShader: "#define KERNEL_SIZE 25.0\n" + convolution_shader.vertexShader,
- fragmentShader: "#define KERNEL_SIZE 25\n" + convolution_shader.fragmentShader
-
- } );
-
- var film_shader = THREE.ShaderExtras[ "film" ];
- var film_uniforms = THREE.UniformsUtils.clone( film_shader.uniforms );
-
- film_uniforms["tDiffuse"].texture = effect.rtTexture1;
-
- effect.materialFilm = new THREE.MeshShaderMaterial( { uniforms: film_uniforms, vertexShader: film_shader.vertexShader, fragmentShader: film_shader.fragmentShader } );
- effect.materialFilm.uniforms.grayscale.value = 0;
- effect.materialFilm.uniforms.nIntensity.value = 0.5;
- effect.materialFilm.uniforms.sIntensity.value = 0.5;
- effect.materialFilm.uniforms.sCount.value = 1448;
-
- effect.quad = new THREE.Mesh( new THREE.PlaneGeometry( SCREEN_WIDTH, SCREEN_HEIGHT ), effect.materialConvolution );
- effect.quad.position.z = -500;
- effect.scene.addObject( effect.quad );
-
- }
var j, jl, cm, data, vertices, vertices_tmp, vl, d, vt,
time, oldTime, delta;
@@ -591,46 +538,7 @@
}
renderer.clear();
-
- // BLOOM
-
- // Render scene into texture
-
- renderer.render( scene, camera, postprocessing1.rtTexture1, true );
-
- // Render quad with blured scene into texture (convolution pass 1)
-
- postprocessing1.quad.materials[ 0 ] = postprocessing1.materialConvolution;
-
- postprocessing1.materialConvolution.uniforms.tDiffuse.texture = postprocessing1.rtTexture1;
- postprocessing1.materialConvolution.uniforms.uImageIncrement.value = postprocessing1.blurx;
-
- renderer.render( postprocessing1.scene, postprocessing1.camera, postprocessing1.rtTexture2, true );
-
- // Render quad with blured scene into texture (convolution pass 2)
-
- postprocessing1.materialConvolution.uniforms.tDiffuse.texture = postprocessing1.rtTexture2;
- postprocessing1.materialConvolution.uniforms.uImageIncrement.value = postprocessing1.blury;
-
- renderer.render( postprocessing1.scene, postprocessing1.camera, postprocessing1.rtTexture3, true );
-
- // Render original scene with superimposed blur to texture
-
- postprocessing1.quad.materials[ 0 ] = postprocessing1.materialScreen;
-
- renderer.render( postprocessing1.scene, postprocessing1.camera, postprocessing1.rtTexture1, false );
-
-
- // NOISE + SCANLINES
-
- postprocessing1.materialFilm.uniforms.time.value += 0.01;
- postprocessing1.quad.materials[ 0 ] = postprocessing1.materialFilm;
-
- renderer.render( postprocessing1.scene, postprocessing1.camera, postprocessing2.texture, true );
-
- // FOCUS
-
- renderer.render( postprocessing2.scene, postprocessing2.camera );
+ composer.render( 0.01 );
}