From beeac6bc081b1198f87e043480edfd7396fc123b Mon Sep 17 00:00:00 2001 From: alteredq Date: Tue, 30 Aug 2011 21:44:32 +0200 Subject: [PATCH] Updated text example to use new postprocessing system. --- examples/webgl_geometry_text.html | 144 ++++++++---------------------- 1 file changed, 35 insertions(+), 109 deletions(-) diff --git a/examples/webgl_geometry_text.html b/examples/webgl_geometry_text.html index 027b5cf50e..8e3631d2f8 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; - if ( postprocessing.enabled ) { - - renderer.clear(); - - // Render scene into texture - - renderer.render( scene, camera, postprocessing.rtTexture1, true ); + renderer.clear(); - // 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; + if ( postprocessing.enabled ) { - postprocessing.materialScreen.uniforms.tDiffuse.texture = postprocessing.rtTexture1; - renderer.render( postprocessing.scene, postprocessing.camera ); + composer.render( 0.05 ); } else { - renderer.clear(); renderer.render( scene, camera ); } -- GitLab