diff --git a/examples/webgl_geometry_text.html b/examples/webgl_geometry_text.html
index 027b5cf5..8e3631d2 100644
--- a/examples/webgl_geometry_text.html
+++ b/examples/webgl_geometry_text.html
@@ -41,6 +41,11 @@
+
+
+
+
+
@@ -68,6 +73,8 @@
var camera, scene, renderer;
+ var composer;
+
var textMesh1, textMesh2, textGeo, faceMaterial, textMaterialFront, textMaterialSide, parent;
var firstLetter = true;
@@ -148,11 +155,15 @@
permalink = document.getElementById( "permalink" );
+ // CAMERA
+
camera = new THREE.Camera( 30, window.innerWidth / window.innerHeight, 1, 1500 );
camera.position.y = 400;
camera.position.z = 700;
camera.target.position.y = 100;
+ // SCENE
+
scene = new THREE.Scene();
scene.fog = new THREE.Fog( 0x000000, 250, 1400 );
@@ -222,6 +233,8 @@
plane.position.y = 100;
scene.addChild( plane );
+ // RENDERER
+
renderer = new THREE.WebGLRenderer( { antialias: true } );
renderer.setSize( window.innerWidth, window.innerHeight );
@@ -229,11 +242,15 @@
container.appendChild( renderer.domElement );
+ // STATS
+
stats = new Stats();
stats.domElement.style.position = 'absolute';
stats.domElement.style.top = '0px';
//container.appendChild( stats.domElement );
+ // EVENTS
+
document.addEventListener( 'mousedown', onDocumentMouseDown, false );
document.addEventListener( 'touchstart', onDocumentTouchStart, false );
document.addEventListener( 'touchmove', onDocumentTouchMove, false );
@@ -315,9 +332,23 @@
}, false );
- initPostprocessing();
+
+ // POSTPROCESSING
+
renderer.autoClear = false;
+ var renderModel = new THREE.RenderPass( scene, camera );
+ var effectBloom = new THREE.BloomPass( 0.25 );
+ var effectFilm = new THREE.FilmPass( 0.5, 0.125, 2048, false );
+
+ effectFilm.renderToScreen = true;
+
+ composer = new THREE.EffectComposer( renderer );
+
+ composer.addPass( renderModel );
+ composer.addPass( effectBloom );
+ composer.addPass( effectFilm );
+
}
//
@@ -561,76 +592,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.ShaderUtils.lib["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.ShaderUtils.lib["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.ShaderUtils.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
-
- } );
-
- var film_shader = THREE.ShaderUtils.lib["film"];
- var film_uniforms = THREE.UniformsUtils.clone( film_shader.uniforms );
-
- film_uniforms["tDiffuse"].texture = postprocessing.rtTexture1;
-
- postprocessing.materialFilm = new THREE.MeshShaderMaterial( { uniforms: film_uniforms, vertexShader: film_shader.vertexShader, fragmentShader: film_shader.fragmentShader } );
- postprocessing.materialFilm.uniforms.grayscale.value = 0;
- postprocessing.materialFilm.uniforms.nIntensity.value = 0.15;
- postprocessing.materialFilm.uniforms.sIntensity.value = 0.25;
- postprocessing.materialFilm.uniforms.sCount.value = 2048;
-
- //postprocessing.materialFilm.uniforms.nIntensity.value = 0;
- //postprocessing.materialFilm.uniforms.sIntensity.value = 0;
-
- postprocessing.materialScreen.uniforms.opacity.value = glow;
-
- 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 animate() {
requestAnimationFrame( animate );
@@ -652,49 +613,14 @@
parent.rotation.y += ( targetRotation - parent.rotation.y ) * 0.05;
+ renderer.clear();
+
if ( postprocessing.enabled ) {
- renderer.clear();
-
- // Render scene into texture
-
- renderer.render( scene, camera, postprocessing.rtTexture1, true );
-
- // Render quad with blured scene into texture (convolution pass 1)
-
- postprocessing.quad.materials[ 0 ] = 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[ 0 ] = postprocessing.materialScreen;
-
- postprocessing.materialScreen.uniforms.tDiffuse.texture = postprocessing.rtTexture3;
-
- renderer.render( postprocessing.scene, postprocessing.camera, postprocessing.rtTexture1, false );
-
- // Render to screen
-
- postprocessing.materialFilm.uniforms.time.value += 0.01;
- postprocessing.quad.materials[ 0 ] = postprocessing.materialFilm;
-
- postprocessing.materialScreen.uniforms.tDiffuse.texture = postprocessing.rtTexture1;
- renderer.render( postprocessing.scene, postprocessing.camera );
+ composer.render( 0.05 );
} else {
- renderer.clear();
renderer.render( scene, camera );
}