diff --git a/examples/js/postprocessing/BloomPass.js b/examples/js/postprocessing/BloomPass.js new file mode 100644 index 00000000..afef3bd9 --- /dev/null +++ b/examples/js/postprocessing/BloomPass.js @@ -0,0 +1,91 @@ +/** + * @author alteredq / http://alteredqualia.com/ + */ + +THREE.BloomPass = function( strength, kernelSize, sigma, resolution ) { + + strength = ( strength !== undefined ) ? strength : 1; + kernelSize = ( kernelSize !== undefined ) ? kernelSize : 25; + sigma = ( sigma !== undefined ) ? sigma : 4.0; + resolution = ( resolution !== resolution ) ? resolution : 256; + + // render targets + + var pars = { minFilter: THREE.LinearFilter, magFilter: THREE.LinearFilter, format: THREE.RGBFormat }; + + this.renderTargetX = new THREE.WebGLRenderTarget( resolution, resolution, pars ); + this.renderTargetY = new THREE.WebGLRenderTarget( resolution, resolution, pars ); + + // screen material + + var screenShader = THREE.ShaderUtils.lib[ "screen" ]; + + this.screenUniforms = THREE.UniformsUtils.clone( screenShader.uniforms ); + + this.screenUniforms[ "opacity" ].value = strength; + + this.materialScreen = new THREE.MeshShaderMaterial( { + + uniforms: this.screenUniforms, + vertexShader: screenShader.vertexShader, + fragmentShader: screenShader.fragmentShader, + blending: THREE.AdditiveBlending, + transparent: true + + } ); + + // convolution material + + var convolutionShader = THREE.ShaderUtils.lib[ "convolution" ]; + + this.convolutionUniforms = THREE.UniformsUtils.clone( convolutionShader.uniforms ); + + this.convolutionUniforms[ "uImageIncrement" ].value = THREE.BloomPass.blurx; + this.convolutionUniforms[ "cKernel" ].value = THREE.ShaderUtils.buildKernel( sigma ); + + this.materialConvolution = new THREE.MeshShaderMaterial( { + + uniforms: this.convolutionUniforms, + vertexShader: "#define KERNEL_SIZE " + kernelSize + ".0\n" + convolutionShader.vertexShader, + fragmentShader: "#define KERNEL_SIZE " + kernelSize + "\n" + convolutionShader.fragmentShader + + } ); + +}; + +THREE.BloomPass.prototype = { + + render: function ( renderer, renderTarget, delta ) { + + // Render quad with blured scene into texture (convolution pass 1) + + THREE.EffectComposer.quad.materials[ 0 ] = this.materialConvolution; + + this.convolutionUniforms[ "tDiffuse" ].texture = renderTarget; + this.convolutionUniforms[ "uImageIncrement" ].value = THREE.BloomPass.blurX; + + renderer.render( THREE.EffectComposer.scene, THREE.EffectComposer.camera, this.renderTargetX, true ); + + // Render quad with blured scene into texture (convolution pass 2) + + this.convolutionUniforms[ "tDiffuse" ].texture = this.renderTargetX; + this.convolutionUniforms[ "uImageIncrement" ].value = THREE.BloomPass.blurY; + + renderer.render( THREE.EffectComposer.scene, THREE.EffectComposer.camera, this.renderTargetY, true ); + + // Render original scene with superimposed blur to texture + + THREE.EffectComposer.quad.materials[ 0 ] = this.materialScreen; + + this.screenUniforms[ "tDiffuse" ].texture = this.renderTargetY; + + renderer.render( THREE.EffectComposer.scene, THREE.EffectComposer.camera, renderTarget, false ); + + } + +}; + +THREE.BloomPass.blurX = new THREE.Vector2( 0.001953125, 0.0 ); +THREE.BloomPass.blurY = new THREE.Vector2( 0.0, 0.001953125 ); + + diff --git a/examples/js/postprocessing/EffectComposer.js b/examples/js/postprocessing/EffectComposer.js new file mode 100644 index 00000000..2a166865 --- /dev/null +++ b/examples/js/postprocessing/EffectComposer.js @@ -0,0 +1,77 @@ +/** + * @author alteredq / http://alteredqualia.com/ + */ + +THREE.EffectComposer = function( renderer, renderTarget ) { + + this.renderer = renderer; + this.renderTarget = renderTarget; + + if ( this.renderTarget === undefined ) { + + this.renderTargetParameters = { minFilter: THREE.LinearFilter, magFilter: THREE.LinearFilter, format: THREE.RGBFormat, stencilBufer: false }; + this.renderTarget = new THREE.WebGLRenderTarget( window.innerWidth, window.innerHeight, this.renderTargetParameters ); + + } + + this.passes = []; + +}; + +THREE.EffectComposer.prototype = { + + addPass: function ( pass ) { + + this.passes.push( pass ); + + }, + + render: function ( delta ) { + + var i, il = this.passes.length; + + for ( i = 0; i < il; i ++ ) { + + this.passes[ i ].render( this.renderer, this.renderTarget, delta ); + + } + + }, + + reset: function () { + + if ( this.renderTargetParameters ) { + + this.renderTarget = new THREE.WebGLRenderTarget( window.innerWidth, window.innerHeight, this.renderTargetParameters ); + + } + + THREE.EffectComposer.quad.scale.set( window.innerWidth, window.innerHeight, 1 ); + + THREE.EffectComposer.camera.left = window.innerWidth / - 2; + THREE.EffectComposer.camera.right = window.innerWidth / 2; + THREE.EffectComposer.camera.top = window.innerHeight / 2; + THREE.EffectComposer.camera.bottom = window.innerHeight / - 2; + + THREE.EffectComposer.camera.updateProjectionMatrix(); + + + } + +}; + +// shared fullscreen quad scene + +THREE.EffectComposer.geometry = new THREE.PlaneGeometry( 1, 1 ); + +THREE.EffectComposer.quad = new THREE.Mesh( THREE.EffectComposer.geometry, null ); +THREE.EffectComposer.quad.position.z = -100; +THREE.EffectComposer.quad.scale.set( window.innerWidth, window.innerHeight, 1 ); + +THREE.EffectComposer.scene = new THREE.Scene(); +THREE.EffectComposer.scene.addObject( THREE.EffectComposer.quad ); + +// shared ortho camera + +THREE.EffectComposer.camera = new THREE.OrthoCamera( window.innerWidth / - 2, window.innerWidth / 2, window.innerHeight / 2, window.innerHeight / - 2, -10000, 10000 ); + diff --git a/examples/js/postprocessing/FilmPass.js b/examples/js/postprocessing/FilmPass.js new file mode 100644 index 00000000..770afd9a --- /dev/null +++ b/examples/js/postprocessing/FilmPass.js @@ -0,0 +1,49 @@ +/** + * @author alteredq / http://alteredqualia.com/ + */ + +THREE.FilmPass = function( noiseIntensity, scanlinesIntensity, scanlinesCount, grayscale ) { + + var shader = THREE.ShaderUtils.lib[ "film" ]; + + this.uniforms = THREE.UniformsUtils.clone( shader.uniforms ); + + this.material = new THREE.MeshShaderMaterial( { + + uniforms: this.uniforms, + vertexShader: shader.vertexShader, + fragmentShader: shader.fragmentShader + + } ); + + if ( grayscale !== undefined ) this.uniforms.grayscale.value = grayscale; + if ( noiseIntensity !== undefined ) this.uniforms.nIntensity.value = noiseIntensity; + if ( scanlinesIntensity !== undefined ) this.uniforms.sIntensity.value = scanlinesIntensity; + if ( scanlinesCount !== undefined ) this.uniforms.sCount.value = scanlinesCount; + + this.renderToScreen = false; + +}; + +THREE.FilmPass.prototype = { + + render: function ( renderer, renderTarget, delta ) { + + this.uniforms[ "tDiffuse" ].texture = renderTarget; + this.uniforms[ "time" ].value += delta; + + THREE.EffectComposer.quad.materials[ 0 ] = this.material; + + if ( this.renderToScreen ) { + + renderer.render( THREE.EffectComposer.scene, THREE.EffectComposer.camera ); + + } else { + + renderer.render( THREE.EffectComposer.scene, THREE.EffectComposer.camera, renderTarget, false ); + + } + + } + +}; diff --git a/examples/js/postprocessing/RenderPass.js b/examples/js/postprocessing/RenderPass.js new file mode 100644 index 00000000..fca47e9e --- /dev/null +++ b/examples/js/postprocessing/RenderPass.js @@ -0,0 +1,22 @@ +/** + * @author alteredq / http://alteredqualia.com/ + */ + +THREE.RenderPass = function ( scene, camera ) { + + this.scene = scene; + this.camera = camera; + + this.clear = true; + +}; + +THREE.RenderPass.prototype = { + + render: function ( renderer, renderTarget, delta ) { + + renderer.render( this.scene, this.camera, renderTarget, this.clear ); + + } + +}; diff --git a/examples/js/postprocessing/ScreenPass.js b/examples/js/postprocessing/ScreenPass.js new file mode 100644 index 00000000..fe4e3d46 --- /dev/null +++ b/examples/js/postprocessing/ScreenPass.js @@ -0,0 +1,34 @@ +/** + * @author alteredq / http://alteredqualia.com/ + */ + +THREE.ScreenPass = function( opacity ) { + + var shader = THREE.ShaderUtils.lib[ "screen" ]; + + this.uniforms = THREE.UniformsUtils.clone( shader.uniforms ); + this.uniforms[ "opacity" ].value = ( opacity !== undefined ) ? opacity : 1.0; + + this.material = new THREE.MeshShaderMaterial( { + + uniforms: this.uniforms, + vertexShader: shader.vertexShader, + fragmentShader: shader.fragmentShader + + } ); + +}; + +THREE.ScreenPass.prototype = { + + render: function ( renderer, renderTarget, delta ) { + + this.uniforms[ "tDiffuse" ].texture = renderTarget; + + THREE.EffectComposer.quad.materials[ 0 ] = this.material; + + renderer.render( THREE.EffectComposer.scene, THREE.EffectComposer.camera ); + + } + +}; diff --git a/examples/webgl_flycamera_earth.html b/examples/webgl_flycamera_earth.html index cd0ce633..f53b115d 100644 --- a/examples/webgl_flycamera_earth.html +++ b/examples/webgl_flycamera_earth.html @@ -32,6 +32,11 @@ + + + + + @@ -59,19 +64,13 @@ var SCREEN_HEIGHT = window.innerHeight - MARGIN * 2; var SCREEN_WIDTH = window.innerWidth; - var ENABLE_LENSFLARES = false; - - var lensFlare, lensFlareRotate; - var container, stats; var camera, scene, sceneCube, renderer; var geometry, meshPlanet, meshClouds, meshMoon; var dirLight, pointLight, ambientLight; var lastUpdate = new Date().getTime(); - var t, d, dPlanet, dMoon, dMoonVec = new THREE.Vector3(); - - var postprocessing = { enabled : true, bloom: false }; + var delta, d, dPlanet, dMoon, dMoonVec = new THREE.Vector3(); init(); animate(); @@ -105,10 +104,6 @@ dirLight.position.normalize(); scene.addLight( dirLight ); - pointLight = new THREE.PointLight( 0x000000 ); - pointLight.position.set( -5000, 0, 5000 ); - //scene.addLight( pointLight ); - ambientLight = new THREE.AmbientLight( 0x000000 ); scene.addLight( ambientLight ); @@ -153,7 +148,7 @@ // clouds - var materialClouds = new THREE.MeshLambertMaterial( { color: 0xffffff, map: cloudsTexture, transparent:true } ); + var materialClouds = new THREE.MeshLambertMaterial( { color: 0xffffff, map: cloudsTexture, transparent: true } ); meshClouds = new THREE.Mesh( geometry, materialClouds ); meshClouds.scale.set( cloudsScale, cloudsScale, cloudsScale ); @@ -174,7 +169,7 @@ var i, r = radius, starsGeometry = [ new THREE.Geometry(), new THREE.Geometry() ]; - for ( i = 0; i < 250; ++i ) { + for ( i = 0; i < 250; i ++ ) { vector1 = new THREE.Vector3( Math.random() * 2 - 1, Math.random() * 2 - 1, Math.random() * 2 - 1 ); vector1.multiplyScalar( r ); @@ -201,9 +196,10 @@ new THREE.ParticleBasicMaterial( { color: 0x1a1a1a, size: 1, sizeAttenuation: false } ) ]; - for ( i = 10; i < 30; i ++) { + for ( i = 10; i < 30; i ++ ) { stars = new THREE.ParticleSystem( starsGeometry[ i % 2 ], starsMaterials[ i % 6 ] ); + stars.rotation.x = Math.random() * 6; stars.rotation.y = Math.random() * 6; stars.rotation.z = Math.random() * 6; @@ -218,38 +214,10 @@ } - if ( ENABLE_LENSFLARES ) { - - lensFlare = new THREE.LensFlare( THREE.ImageUtils.loadTexture( "textures/lensflare/lensflare0.png" ), 700, 0.0, THREE.AdditiveBlending ); - - lensFlare.add( THREE.ImageUtils.loadTexture( "textures/lensflare/lensflare2.png" ), 512, 0.0, THREE.AdditiveBlending ); - lensFlare.add( lensFlare.lensFlares[ 1 ].texture, 512, 0.0, THREE.AdditiveBlending ); - lensFlare.add( lensFlare.lensFlares[ 1 ].texture, 512, 0.0, THREE.AdditiveBlending ); - - lensFlare.add( THREE.ImageUtils.loadTexture( "textures/lensflare/lensflare3.png" ), 60, 0.6, THREE.AdditiveBlending ); - lensFlare.add( lensFlare.lensFlares[ 4 ].texture, 70, 0.7, THREE.AdditiveBlending ); - lensFlare.add( lensFlare.lensFlares[ 4 ].texture, 120, 0.9, THREE.AdditiveBlending ); - lensFlare.add( lensFlare.lensFlares[ 4 ].texture, 70, 1.0, THREE.AdditiveBlending ); - - lensFlare.customUpdateCallback = lensFlareUpdateCallback; - lensFlare.position.set( 0, 0, -99000 ); - - - lensFlareRotate = new THREE.Object3D(); - lensFlareRotate.addChild( lensFlare ); - - scene.addChild( lensFlareRotate ); - - lensFlareRotate.rotation.x = Math.PI; - lensFlareRotate.rotation.y = Math.PI / 2; - - } - renderer = new THREE.WebGLRenderer( { clearAlpha: 1, clearColor: 0x000000 } ); renderer.setSize( SCREEN_WIDTH, SCREEN_HEIGHT ); renderer.sortObjects = false; - initPostprocessing(); renderer.autoClear = false; container.appendChild( renderer.domElement ); @@ -258,10 +226,22 @@ stats.domElement.style.position = 'absolute'; stats.domElement.style.top = '0px'; stats.domElement.style.zIndex = 100; - //container.appendChild( stats.domElement ); + container.appendChild( stats.domElement ); window.addEventListener( 'resize', onWindowResize, false ); + // postprocessing + + var renderModel = new THREE.RenderPass( scene, camera ); + var effectFilm = new THREE.FilmPass( 0.35, 0.75, 2048, false ); + + effectFilm.renderToScreen = true; + + composer = new THREE.EffectComposer( renderer ); + + composer.addPass( renderModel ); + composer.addPass( effectFilm ); + }; function onWindowResize( event ) { @@ -274,106 +254,16 @@ camera.aspect = SCREEN_WIDTH / SCREEN_HEIGHT; camera.updateProjectionMatrix(); - initPostprocessing(); + composer.reset(); } - function initPostprocessing() { - - postprocessing.scene = new THREE.Scene(); - - postprocessing.camera = new THREE.OrthoCamera( SCREEN_WIDTH / - 2, SCREEN_WIDTH / 2, SCREEN_HEIGHT / 2, SCREEN_HEIGHT / - 2, -10000, 10000 ); - postprocessing.camera.position.z = 100; - - var pars = { minFilter: THREE.LinearFilter, magFilter: THREE.LinearFilter, format: THREE.RGBAFormat }; - postprocessing.rtTexture1 = new THREE.WebGLRenderTarget( SCREEN_WIDTH, SCREEN_HEIGHT, 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.35; - postprocessing.materialFilm.uniforms.sIntensity.value = 0.75; - postprocessing.materialFilm.uniforms.sCount.value = 2048; - - postprocessing.quad = new THREE.Mesh( new THREE.PlaneGeometry( SCREEN_WIDTH, SCREEN_HEIGHT ), postprocessing.materialConvolution ); - postprocessing.quad.position.z = - 500; - postprocessing.scene.addObject( postprocessing.quad ); - - }; - function cap_bottom( val, bottom ) { return val < bottom ? bottom : val; }; - function lensFlareUpdateCallback( object ) { - - var f, fl = object.lensFlares.length; - var flare; - var vecX = -object.positionScreen.x * 2; - var vecY = -object.positionScreen.y * 2; - - - for( f = 0; f < fl; f++ ) { - - flare = object.lensFlares[ f ]; - - flare.x = object.positionScreen.x + vecX * flare.distance; - flare.y = object.positionScreen.y + vecY * flare.distance; - - flare.rotation = 0; - - flare.opacity = cap_bottom( 1 - 0.01 * d / radius, 0 ); - - } - - // hard coded stuff - - object.lensFlares[ 2 ].y += 0.025; - object.lensFlares[ 3 ].rotation = object.positionScreen.x * 0.5 + 45 * Math.PI / 180; - - }; function animate() { @@ -395,10 +285,10 @@ // rotate the planet and clouds - t = this.getFrametime(); + delta = this.getFrametime(); - meshPlanet.rotation.y += rotationSpeed * t; - meshClouds.rotation.y += 1.25 * rotationSpeed * t; + meshPlanet.rotation.y += rotationSpeed * delta; + meshClouds.rotation.y += 1.25 * rotationSpeed * delta; // slow down as we approach the surface @@ -419,63 +309,8 @@ camera.movementSpeed = 0.33 * d; - if ( ENABLE_LENSFLARES ) { - - lensFlareRotate.position.set( camera.position.x, camera.position.y, camera.position.z ); - - } - - if ( postprocessing.enabled ) { - - renderer.clear(); - - // Render scene into texture - - renderer.render( scene, camera, postprocessing.rtTexture1, true ); - - if ( postprocessing.bloom ) { - - // 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 = 0.75; - - renderer.render( postprocessing.scene, postprocessing.camera, postprocessing.rtTexture1, false ); - - } - - // Render to screen - - postprocessing.materialFilm.uniforms.time.value += 0.01; - postprocessing.quad.materials = [ postprocessing.materialFilm ]; - - postprocessing.materialScreen.uniforms.tDiffuse.texture = postprocessing.rtTexture1; - renderer.render( postprocessing.scene, postprocessing.camera ); - - } else { - - renderer.clear(); - renderer.render( scene, camera ); - - } + renderer.clear(); + composer.render( delta ); }; diff --git a/examples/webgl_lines_colors.html b/examples/webgl_lines_colors.html index c6538a4d..16541e25 100644 --- a/examples/webgl_lines_colors.html +++ b/examples/webgl_lines_colors.html @@ -45,6 +45,11 @@ + + + + + @@ -58,10 +63,8 @@ windowHalfX = window.innerWidth / 2, windowHalfY = window.innerHeight / 2, - camera, scene, renderer, material; + camera, scene, renderer, material, composer; - var postprocessing = { enabled: true }; - init(); animate(); @@ -69,8 +72,8 @@ var i, container; - container = document.createElement('div'); - document.body.appendChild(container); + container = document.createElement( 'div' ); + document.body.appendChild( container ); camera = new THREE.Camera( 33, window.innerWidth / window.innerHeight, 1, 10000 ); camera.position.z = 700; @@ -79,6 +82,7 @@ renderer = new THREE.WebGLRenderer( { clearColor: 0x000000, clearAlpha: 1, antialias: false } ); renderer.setSize( window.innerWidth, window.innerHeight ); + renderer.autoClear = false; container.appendChild( renderer.domElement ); @@ -132,19 +136,30 @@ } - + // + stats = new Stats(); stats.domElement.style.position = 'absolute'; stats.domElement.style.top = '0px'; - //container.appendChild(stats.domElement); + //container.appendChild( stats.domElement ); + // document.addEventListener( 'mousemove', onDocumentMouseMove, false ); document.addEventListener( 'touchstart', onDocumentTouchStart, false ); document.addEventListener( 'touchmove', onDocumentTouchMove, false ); - initPostprocessing(); - renderer.autoClear = false; + // + + var renderModel = new THREE.RenderPass( scene, camera ); + var effectBloom = new THREE.BloomPass( 1.3 ); + var effectScreen = new THREE.ScreenPass(); + + composer = new THREE.EffectComposer( renderer ); + + composer.addPass( renderModel ); + composer.addPass( effectBloom ); + composer.addPass( effectScreen ); } @@ -153,7 +168,7 @@ function hilbert3D( center, side, iterations, v0, v1, v2, v3, v4, v5, v6, v7 ) { - var half = side/2, + var half = side / 2, vec_s = [ @@ -192,63 +207,11 @@ // - function initPostprocessing() { - - postprocessing.scene = new THREE.Scene(); - - postprocessing.camera = new THREE.Camera(); - postprocessing.camera.projectionMatrix = THREE.Matrix4.makeOrtho( 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 - - } ); - - 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) { + function onDocumentMouseMove( event ) { mouseX = event.clientX - windowHalfX; mouseY = event.clientY - windowHalfY; + } function onDocumentTouchStart( event ) { @@ -259,7 +222,9 @@ mouseX = event.touches[ 0 ].pageX - windowHalfX; mouseY = event.touches[ 0 ].pageY - windowHalfY; + } + } function onDocumentTouchMove( event ) { @@ -271,6 +236,7 @@ mouseX = event.touches[ 0 ].pageX - windowHalfX; mouseY = event.touches[ 0 ].pageY - windowHalfY; } + } // @@ -278,7 +244,6 @@ function animate() { requestAnimationFrame( animate ); - render(); } @@ -290,60 +255,17 @@ var time = new Date().getTime() * 0.0005; - for( var i = 0; i diff --git a/examples/webgl_postprocessing.html b/examples/webgl_postprocessing.html index 62ae4bca..e8fcccf2 100644 --- a/examples/webgl_postprocessing.html +++ b/examples/webgl_postprocessing.html @@ -25,7 +25,6 @@ } a { color: red; } - @@ -38,6 +37,11 @@ + + + + + @@ -45,19 +49,22 @@ @@ -75,7 +83,9 @@ var container, stats; - var cameraOrtho, cameraPerspective, sceneModel, sceneScreen, sceneBG, renderer, mesh, directionalLight; + var composer; + + var cameraOrtho, cameraPerspective, sceneModel, sceneBG, renderer, mesh, directionalLight; var windowHalfX = window.innerWidth / 2; var windowHalfY = window.innerHeight / 2; @@ -97,20 +107,22 @@ cameraPerspective = new THREE.Camera( 50, window.innerWidth / window.innerHeight, 1, 10000 ); cameraPerspective.position.z = 900; + // + sceneModel = new THREE.Scene(); - sceneScreen = new THREE.Scene(); - sceneBG = new THREE.Scene(); directionalLight = new THREE.DirectionalLight( 0xffffff ); directionalLight.position.set( 0, 0, 1 ); directionalLight.position.normalize(); sceneModel.addLight( directionalLight ); - var pars1 = { minFilter: THREE.LinearFilter, magFilter: THREE.NearestFilter, format: THREE.RGBFormat }, - pars2 = { minFilter: THREE.LinearFilter, magFilter: THREE.LinearFilter, format: THREE.RGBFormat }; - rtTexture1 = new THREE.WebGLRenderTarget( window.innerWidth, window.innerHeight, pars1 ); - rtTexture2 = new THREE.WebGLRenderTarget( 256, 512, pars2 ); - rtTexture3 = new THREE.WebGLRenderTarget( 512, 256, pars2 ); + loader = new THREE.JSONLoader( true ); + document.body.appendChild( loader.statusDomElement ); + loader.load( { model: "obj/leeperrysmith/LeePerrySmith.js", callback: function( geometry ) { createMesh( geometry, sceneModel, 100 ) } } ); + + // + + sceneBG = new THREE.Scene(); materialColor = new THREE.MeshShaderMaterial( { @@ -121,70 +133,13 @@ } ); - var screen_shader = THREE.ShaderUtils.lib[ "screen" ]; - var screen_uniforms = THREE.UniformsUtils.clone( screen_shader.uniforms ); - - screen_uniforms[ "tDiffuse" ].texture = rtTexture1; - screen_uniforms[ "opacity" ].value = 0.4; - - materialScreen = new THREE.MeshShaderMaterial( { - - uniforms: screen_uniforms, - vertexShader: screen_shader.vertexShader, - fragmentShader: screen_shader.fragmentShader, - blending: THREE.AdditiveBlending, - transparent: true - - } ); - - var film_shader = THREE.ShaderUtils.lib["film"]; - var film_uniforms = THREE.UniformsUtils.clone( film_shader.uniforms ); - - film_uniforms[ "tDiffuse" ].texture = rtTexture1; - film_uniforms[ "nIntensity" ].value = 0.25; - film_uniforms[ "sIntensity" ].value = 0.5; - - materialFilm = new THREE.MeshShaderMaterial( { - - uniforms: film_uniforms, - vertexShader: film_shader.vertexShader, - fragmentShader: film_shader.fragmentShader - - } ); - - var increment = 0.001953125; - - blurx = new THREE.Vector2( increment, 0.0 ), - blury = new THREE.Vector2( 0.0, increment ); - - var convolution_shader = THREE.ShaderUtils.lib[ "convolution" ]; - var convolution_uniforms = THREE.UniformsUtils.clone( convolution_shader.uniforms ); - - convolution_uniforms[ "tDiffuse" ].texture = rtTexture1; - convolution_uniforms[ "uImageIncrement" ].value = blurx; - convolution_uniforms[ "cKernel" ].value = THREE.ShaderUtils.buildKernel( 4.0 ); - - 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 plane = new THREE.PlaneGeometry( window.innerWidth, window.innerHeight ); quadBG = new THREE.Mesh( plane, materialColor ); quadBG.position.z = -500; sceneBG.addObject( quadBG ); - loader = new THREE.JSONLoader( true ); - document.body.appendChild( loader.statusDomElement ); - loader.load( { model: "obj/leeperrysmith/LeePerrySmith.js", callback: function( geometry ) { createMesh( geometry, sceneModel, 100 ) } } ); - - quadScreen = new THREE.Mesh( plane, materialConvolution ); - quadScreen.position.z = -100; - sceneScreen.addObject( quadScreen ); + // renderer = new THREE.WebGLRenderer( { antialias: false } ); renderer.setSize( window.innerWidth, window.innerHeight ); @@ -195,7 +150,24 @@ stats = new Stats(); stats.domElement.style.position = 'absolute'; stats.domElement.style.top = '0px'; - //container.appendChild( stats.domElement ); + container.appendChild( stats.domElement ); + + // + + var renderBackground = new THREE.RenderPass( sceneBG, cameraOrtho ); + var renderModel = new THREE.RenderPass( sceneModel, cameraPerspective ); + var effectBloom = new THREE.BloomPass( 1.0 ); + var effectFilm = new THREE.FilmPass( 0.25, 0.5 ); + + renderModel.clear = false; + effectFilm.renderToScreen = true; + + composer = new THREE.EffectComposer( renderer ); + + composer.addPass( renderBackground ); + composer.addPass( renderModel ); + composer.addPass( effectBloom ); + composer.addPass( effectFilm ); } @@ -264,51 +236,13 @@ } - materialColor.uniforms.time.value += delta/2; - materialFilm.uniforms.time.value += delta; + materialColor.uniforms.time.value += delta / 2; renderer.clear(); - - // Render scene into texture - - // background - - renderer.render( sceneBG, cameraOrtho, rtTexture1, true ); - - // model - - renderer.render( sceneModel, cameraPerspective, rtTexture1, false ); - - // Render quad with blured scene into texture (convolution pass 1) - - quadScreen.materials[ 0 ] = materialConvolution; - materialConvolution.uniforms.tDiffuse.texture = rtTexture1; - materialConvolution.uniforms.uImageIncrement.value = blurx; - renderer.render( sceneScreen, cameraOrtho, rtTexture2, true ); - - // Render quad with blured scene into texture (convolution pass 2) - - materialConvolution.uniforms.tDiffuse.texture = rtTexture2; - materialConvolution.uniforms.uImageIncrement.value = blury; - renderer.render( sceneScreen, cameraOrtho, rtTexture3, true ); - - // Render original scene with superimposed blur into texture - - quadScreen.materials[ 0 ] = materialScreen; - - materialScreen.uniforms.tDiffuse.texture = rtTexture3; - materialScreen.uniforms.opacity.value = 1.0; - renderer.render( sceneScreen, cameraOrtho, rtTexture1, false ); - - // Render final scene to the screen with film shader - - materialFilm.uniforms.tDiffuse.texture = rtTexture1; - quadScreen.materials[ 0 ] = materialFilm; - renderer.render( sceneScreen, cameraOrtho ); + composer.render( delta ); } - diff --git a/examples/webgl_ribbons.html b/examples/webgl_ribbons.html index a8155b67..b78de97f 100644 --- a/examples/webgl_ribbons.html +++ b/examples/webgl_ribbons.html @@ -33,6 +33,11 @@ + + + + + @@ -57,6 +62,8 @@ var postprocessing = { enabled : true }; + var composer; + init(); animate(); @@ -71,12 +78,6 @@ scene = new THREE.Scene(); scene.fog = new THREE.FogExp2( 0x000000, 0.0016 ); - renderer = new THREE.WebGLRenderer( { antialias: false } ); - renderer.setSize( window.innerWidth, window.innerHeight ); - container.appendChild( renderer.domElement ); - - renderer.setClearColor( scene.fog.color, 1 ); - geometry = new THREE.Geometry(); geometry2 = new THREE.Geometry(); @@ -99,12 +100,11 @@ vector = new THREE.Vector3( x, y, z ); geometry.vertices.push( new THREE.Vertex( vector ) ); - vector = new THREE.Vector3( x, y, z ); geometry2.vertices.push( new THREE.Vertex( vector ) ); - h = i2%2 ? 1 : 0.15; - if( i2%4 <= 2 ) h -= 0.15; + h = i2 % 2 ? 1 : 0.15; + if( i2 % 4 <= 2 ) h -= 0.15; color = new THREE.Color( 0xffffff ); color.setHSV( 0.1 , 0, h ); @@ -116,22 +116,17 @@ var tmpRot = new THREE.Matrix4(); tmpRot.setRotationAxis( new THREE.Vector3( 1, 0, 0 ), 1.57 ); - var material_base = new THREE.MeshBasicMaterial( { color:0xffffff, vertexColors:true } ); - - renderer.initMaterial( material_base, scene.lights, scene.fog ); - xgrid = 34; ygrid = 15; nribbons = xgrid * ygrid; c = 0; - for ( i = 0; i < xgrid; i++ ) - for ( j = 0; j < ygrid; j++ ) { + for ( i = 0; i < xgrid; i ++ ) + for ( j = 0; j < ygrid; j ++ ) { - materials[c] = new THREE.MeshBasicMaterial( { color:0xffffff, vertexColors:true } ); - //materials[c].program = material_base.program; + materials[ c ] = new THREE.MeshBasicMaterial( { color: 0xffffff, vertexColors: true } ); - ribbon = new THREE.Ribbon( i % 2 ? geometry : geometry2, materials[c] ); + ribbon = new THREE.Ribbon( i % 2 ? geometry : geometry2, materials[ c ] ); ribbon.rotation.x = 0; ribbon.rotation.y = 1.57; ribbon.rotation.z = 3.14; @@ -141,7 +136,7 @@ z = 0; ribbon.position.set( x, y, z ); - materials[c].color.setHSV( i/xgrid, 0.3 + 0.7*j/ygrid, 1 ); + materials[c].color.setHSV( i / xgrid, 0.3 + 0.7 * j / ygrid, 1 ); ribbon.doubleSided = true; ribbon.matrixAutoUpdate = false; @@ -171,24 +166,46 @@ ribbons.push( ribbon ); scene.addObject( ribbon ); - c++; + c ++; } scene.matrixAutoUpdate = false; - initPostprocessing(); + // + + renderer = new THREE.WebGLRenderer( { antialias: false } ); + renderer.setSize( window.innerWidth, window.innerHeight ); renderer.autoClear = false; + renderer.setClearColor( scene.fog.color, 1 ); + + container.appendChild( renderer.domElement ); + + // stats = new Stats(); stats.domElement.style.position = 'absolute'; stats.domElement.style.top = '0px'; container.appendChild( stats.domElement ); + // + document.addEventListener( 'mousemove', onDocumentMouseMove, false ); document.addEventListener( 'touchstart', onDocumentTouchStart, false ); document.addEventListener( 'touchmove', onDocumentTouchMove, false ); + // + + var renderModel = new THREE.RenderPass( scene, camera ); + var effectBloom = new THREE.BloomPass( 1.0 ); + var effectScreen = new THREE.ScreenPass(); + + composer = new THREE.EffectComposer( renderer ); + + composer.addPass( renderModel ); + composer.addPass( effectBloom ); + composer.addPass( effectScreen ); + } function onDocumentMouseMove( event ) { @@ -223,58 +240,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 - - } ); - - 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() { @@ -293,73 +258,30 @@ camera.position.x += ( mouseX - camera.position.x ) * 0.036; camera.position.y += ( - (mouseY) - camera.position.y ) * 0.036; - for ( i = -n; i < n; i++ ) { + for ( i = -n; i < n; i ++ ) { i2 = i + n; z = 10 * Math.sin( i2 * 0.1 + time*30 ); z2 = 20 * Math.cos( Math.sin( i2 * 0.1 + time * 20 ) ); - geometry.vertices[i2].position.z = z; - geometry2.vertices[i2].position.z = z2; + geometry.vertices[ i2 ].position.z = z; + geometry2.vertices[ i2 ].position.z = z2; } geometry.__dirtyVertices = true; geometry2.__dirtyVertices = true; - for( i = 0; i < nribbons; i++ ) { - h = ( 360 * ( i/nribbons + time ) % 360 ) / 360; - materials[i].color.setHSV( h, 0.5+0.5*(i%20/20), 1 ); + h = ( 360 * ( i / nribbons + time ) % 360 ) / 360; + materials[ i ].color.setHSV( h, 0.5 + 0.5 * ( i % 20 / 20 ), 1 ); } - 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; - postprocessing.materialScreen.uniforms.opacity.value = 1.2; - - 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.clear(); - renderer.render( scene, camera ); - - } + renderer.clear(); + composer.render( 0.1 ); } diff --git a/examples/webgl_shader_lava.html b/examples/webgl_shader_lava.html index c366c304..ffcf9783 100644 --- a/examples/webgl_shader_lava.html +++ b/examples/webgl_shader_lava.html @@ -37,6 +37,11 @@ + + + + + @@ -86,6 +91,7 @@ gl_FragColor = mix( gl_FragColor, vec4( fogColor, gl_FragColor.w ), fogFactor ); } +