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 ); }