Examples: Improved webgl_postprocessing_crossfade.

examples/webgl_postprocessing_crossfade.html

@@ -22,20 +22,18 @@
 			import Stats from './jsm/libs/stats.module.js';
 			import { GUI } from './jsm/libs/dat.gui.module.js';
 
-			import * as BufferGeometryUtils from './jsm/utils/BufferGeometryUtils.js';
-
 			let container, stats;
 			let renderer;
 			let transition;
 
 			const transitionParams = {
-				"useTexture": true,
-				"transition": 0.5,
-				"transitionSpeed": 2.0,
-				"texture": 5,
-				"loopTexture": true,
-				"animateTransition": true,
-				"textureThreshold": 0.3
+				'useTexture': true,
+				'transition': 0,
+				'transitionSpeed': 2.0,
+				'texture': 5,
+				'loopTexture': true,
+				'animateTransition': true,
+				'textureThreshold': 0.3
 			};
 
 			const clock = new THREE.Clock();
@@ -47,7 +45,7 @@
 
 				initGUI();
 
-				container = document.getElementById( "container" );
+				container = document.getElementById( 'container' );
 
 				renderer = new THREE.WebGLRenderer( { antialias: true } );
 				renderer.setPixelRatio( window.devicePixelRatio );
@@ -57,8 +55,10 @@
 				stats = new Stats();
 				container.appendChild( stats.dom );
 
-				const sceneA = new FXScene( "cube", 5000, 1200, 120, new THREE.Vector3( 0, - 0.4, 0 ), 0xffffff );
-				const sceneB = new FXScene( "sphere", 500, 2000, 50, new THREE.Vector3( 0, 0.2, 0.1 ), 0x000000 );
+				const geometryA = new THREE.BoxGeometry( 1, 1, 1 );
+				const geometryB = new THREE.IcosahedronGeometry( 1, 1 );
+				const sceneA = new FXScene( geometryA, 5000, 1200, 120, new THREE.Vector3( 0, - 0.4, 0 ), 0xffffff );
+				const sceneB = new FXScene( geometryB, 500, 2000, 50, new THREE.Vector3( 0, 0.2, 0.1 ), 0x000000 );
 
 				transition = new Transition( sceneA, sceneB );
 
@@ -77,7 +77,7 @@
 
 				const gui = new GUI();
 
-				gui.add( transitionParams, "useTexture" ).onChange( function ( value ) {
+				gui.add( transitionParams, 'useTexture' ).onChange( function ( value ) {
 
 					transition.useTexture( value );
 
@@ -91,15 +91,15 @@
 
 				} ).listen();
 
-				gui.add( transitionParams, "textureThreshold", 0, 1, 0.01 ).onChange( function ( value ) {
+				gui.add( transitionParams, 'textureThreshold', 0, 1, 0.01 ).onChange( function ( value ) {
 
 					transition.setTextureThreshold( value );
 
 				} );
 
-				gui.add( transitionParams, "animateTransition" );
-				gui.add( transitionParams, "transition", 0, 1, 0.01 ).listen();
-				gui.add( transitionParams, "transitionSpeed", 0.5, 5, 0.01 );
+				gui.add( transitionParams, 'animateTransition' );
+				gui.add( transitionParams, 'transition', 0, 1, 0.01 ).listen();
+				gui.add( transitionParams, 'transitionSpeed', 0.5, 5, 0.01 );
 
 			}
 
@@ -110,106 +110,78 @@
 
 			}
 
-			function generateGeometry( objectType, numObjects ) {
-
-				function applyVertexColors( geometry, color ) {
-
-					const position = geometry.attributes.position;
-					const colors = [];
+			function generateInstancedMesh( geometry, material, count ) {
 
-					for ( let i = 0; i < position.count; i ++ ) {
-
-						colors.push( color.r, color.g, color.b );
-
-					}
+				const mesh = new THREE.InstancedMesh( geometry, material, count );
 
-					geometry.setAttribute( 'color', new THREE.Float32BufferAttribute( colors, 3 ) );
-
-				}
-
-				const geometries = [];
-
-				const matrix = new THREE.Matrix4();
-				const position = new THREE.Vector3();
-				const rotation = new THREE.Euler();
-				const quaternion = new THREE.Quaternion();
-				const scale = new THREE.Vector3();
+				const dummy = new THREE.Object3D();
 				const color = new THREE.Color();
 
-				for ( let i = 0; i < numObjects; i ++ ) {
-
-					position.x = Math.random() * 10000 - 5000;
-					position.y = Math.random() * 6000 - 3000;
-					position.z = Math.random() * 8000 - 4000;
+				for ( let i = 0; i < count; i ++ ) {
 
-					rotation.x = Math.random() * 2 * Math.PI;
-					rotation.y = Math.random() * 2 * Math.PI;
-					rotation.z = Math.random() * 2 * Math.PI;
-					quaternion.setFromEuler( rotation );
+					dummy.position.x = Math.random() * 10000 - 5000;
+					dummy.position.y = Math.random() * 6000 - 3000;
+					dummy.position.z = Math.random() * 8000 - 4000;
 
-					scale.x = Math.random() * 200 + 100;
+					dummy.rotation.x = Math.random() * 2 * Math.PI;
+					dummy.rotation.y = Math.random() * 2 * Math.PI;
+					dummy.rotation.z = Math.random() * 2 * Math.PI;
 
-					let geometry;
+					dummy.scale.x = Math.random() * 200 + 100;
 
-					if ( objectType === 'cube' ) {
+					if ( geometry.type === 'BoxGeometry' ) {
 
-						geometry = new THREE.BoxGeometry( 1, 1, 1 );
-						geometry = geometry.toNonIndexed(); // merging needs consistent buffer geometries
-						scale.y = Math.random() * 200 + 100;
-						scale.z = Math.random() * 200 + 100;
-						color.setRGB( 0, 0, 0.1 + 0.9 * Math.random() );
+						dummy.scale.y = Math.random() * 200 + 100;
+						dummy.scale.z = Math.random() * 200 + 100;
 
-					} else if ( objectType === 'sphere' ) {
+					} else {
 
-						geometry = new THREE.IcosahedronGeometry( 1, 1 );
-						scale.y = scale.z = scale.x;
-						color.setRGB( 0.1 + 0.9 * Math.random(), 0, 0 );
+						dummy.scale.y = dummy.scale.x;
+						dummy.scale.z = dummy.scale.x;
 
 					}
 
-					// give the geom's vertices a random color, to be displayed
-					applyVertexColors( geometry, color );
-
-					matrix.compose( position, quaternion, scale );
-					geometry.applyMatrix4( matrix );
+					dummy.updateMatrix();
 
-					geometries.push( geometry );
+					mesh.setMatrixAt( i, dummy.matrix );
+					mesh.setColorAt( i, color.setScalar( 0.1 + 0.9 * Math.random() ) );
 
 				}
 
-				return BufferGeometryUtils.mergeBufferGeometries( geometries );
+				return mesh;
 
 			}
 
-			function FXScene( type, numObjects, cameraZ, fov, rotationSpeed, clearColor ) {
+			function FXScene( geometry, numObjects, cameraZ, fov, rotationSpeed, clearColor ) {
 
 				this.clearColor = clearColor;
 
-				this.camera = new THREE.PerspectiveCamera( fov, window.innerWidth / window.innerHeight, 1, 10000 );
-				this.camera.position.z = cameraZ;
+				const camera = new THREE.PerspectiveCamera( fov, window.innerWidth / window.innerHeight, 1, 10000 );
+				camera.position.z = cameraZ;
 
 				// Setup scene
-				this.scene = new THREE.Scene();
-				this.scene.add( new THREE.AmbientLight( 0x555555 ) );
+				const scene = new THREE.Scene();
+				scene.add( new THREE.AmbientLight( 0x555555 ) );
 
 				const light = new THREE.SpotLight( 0xffffff, 1.5 );
 				light.position.set( 0, 500, 2000 );
-				this.scene.add( light );
+				scene.add( light );
 
 				this.rotationSpeed = rotationSpeed;
 
-				const defaultMaterial = new THREE.MeshPhongMaterial( { color: 0xffffff, flatShading: true, vertexColors: true } );
-				this.mesh = new THREE.Mesh( generateGeometry( type, numObjects ), defaultMaterial );
-				this.scene.add( this.mesh );
+				const color = geometry.type === 'BoxGeometry' ? 0x0000ff : 0xff0000;
+				const material = new THREE.MeshPhongMaterial( { color: color, flatShading: true } );
+				const mesh = generateInstancedMesh( geometry, material, numObjects );
+				scene.add( mesh );
 
 				const renderTargetParameters = { minFilter: THREE.LinearFilter, magFilter: THREE.LinearFilter, format: THREE.RGBFormat };
 				this.fbo = new THREE.WebGLRenderTarget( window.innerWidth, window.innerHeight, renderTargetParameters );
 
 				this.render = function ( delta, rtt ) {
 
-					this.mesh.rotation.x += delta * this.rotationSpeed.x;
-					this.mesh.rotation.y += delta * this.rotationSpeed.y;
-					this.mesh.rotation.z += delta * this.rotationSpeed.z;
+					mesh.rotation.x += delta * this.rotationSpeed.x;
+					mesh.rotation.y += delta * this.rotationSpeed.y;
+					mesh.rotation.z += delta * this.rotationSpeed.z;
 
 					renderer.setClearColor( this.clearColor );
 
@@ -217,12 +189,12 @@
 
 						renderer.setRenderTarget( this.fbo );
 						renderer.clear();
-						renderer.render( this.scene, this.camera );
+						renderer.render( scene, camera );
 
 					} else {
 
 						renderer.setRenderTarget( null );
-						renderer.render( this.scene, this.camera );
+						renderer.render( scene, camera );
 
 					}
 
@@ -232,18 +204,24 @@
 
 			function Transition( sceneA, sceneB ) {
 
-				this.scene = new THREE.Scene();
+				const scene = new THREE.Scene();
+
+				const width = window.innerWidth;
+				const height = window.innerHeight;
 
-				this.cameraOrtho = new THREE.OrthographicCamera( window.innerWidth / - 2, window.innerWidth / 2, window.innerHeight / 2, window.innerHeight / - 2, - 10, 10 );
+				const camera = new THREE.OrthographicCamera( width / - 2, width / 2, height / 2, height / - 2, - 10, 10 );
 
-				this.textures = [];
+				const textures = [];
 
 				const loader = new THREE.TextureLoader();
 
-				for ( let i = 0; i < 6; i ++ )
-					this.textures[ i ] = loader.load( 'textures/transition/transition' + ( i + 1 ) + '.png' );
+				for ( let i = 0; i < 6; i ++ ) {
+
+					textures[ i ] = loader.load( 'textures/transition/transition' + ( i + 1 ) + '.png' );
+
+				}
 
-				this.quadmaterial = new THREE.ShaderMaterial( {
+				const material = new THREE.ShaderMaterial( {
 
 					uniforms: {
 
@@ -263,88 +241,83 @@
 							value: 1
 						},
 						tMixTexture: {
-							value: this.textures[ 0 ]
+							value: textures[ 0 ]
 						}
 					},
 					vertexShader: [
 
-						"varying vec2 vUv;",
+						'varying vec2 vUv;',
 
-						"void main() {",
+						'void main() {',
 
-						"vUv = vec2( uv.x, uv.y );",
-						"gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );",
+						'vUv = vec2( uv.x, uv.y );',
+						'gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );',
 
-						"}"
+						'}'
 
-					].join( "\n" ),
+					].join( '\n' ),
 					fragmentShader: [
 
-						"uniform float mixRatio;",
+						'uniform float mixRatio;',
 
-						"uniform sampler2D tDiffuse1;",
-						"uniform sampler2D tDiffuse2;",
-						"uniform sampler2D tMixTexture;",
+						'uniform sampler2D tDiffuse1;',
+						'uniform sampler2D tDiffuse2;',
+						'uniform sampler2D tMixTexture;',
 
-						"uniform int useTexture;",
-						"uniform float threshold;",
+						'uniform int useTexture;',
+						'uniform float threshold;',
 
-						"varying vec2 vUv;",
+						'varying vec2 vUv;',
 
-						"void main() {",
+						'void main() {',
 
-						"	vec4 texel1 = texture2D( tDiffuse1, vUv );",
-						"	vec4 texel2 = texture2D( tDiffuse2, vUv );",
+						'	vec4 texel1 = texture2D( tDiffuse1, vUv );',
+						'	vec4 texel2 = texture2D( tDiffuse2, vUv );',
 
-						"	if (useTexture==1) {",
+						'	if (useTexture==1) {',
 
-						"		vec4 transitionTexel = texture2D( tMixTexture, vUv );",
-						"		float r = mixRatio * (1.0 + threshold * 2.0) - threshold;",
-						"		float mixf=clamp((transitionTexel.r - r)*(1.0/threshold), 0.0, 1.0);",
+						'		vec4 transitionTexel = texture2D( tMixTexture, vUv );',
+						'		float r = mixRatio * (1.0 + threshold * 2.0) - threshold;',
+						'		float mixf=clamp((transitionTexel.r - r)*(1.0/threshold), 0.0, 1.0);',
 
-						"		gl_FragColor = mix( texel1, texel2, mixf );",
+						'		gl_FragColor = mix( texel1, texel2, mixf );',
 
-						"	} else {",
+						'	} else {',
 
-						"		gl_FragColor = mix( texel2, texel1, mixRatio );",
+						'		gl_FragColor = mix( texel2, texel1, mixRatio );',
 
-						"	}",
+						'	}',
 
-						"}"
+						'}'
 
-					].join( "\n" )
+					].join( '\n' )
 
 				} );
 
-				const quadgeometry = new THREE.PlaneGeometry( window.innerWidth, window.innerHeight );
+				const geometry = new THREE.PlaneGeometry( window.innerWidth, window.innerHeight );
+				const mesh = new THREE.Mesh( geometry, material );
+				scene.add( mesh );
 
-				this.quad = new THREE.Mesh( quadgeometry, this.quadmaterial );
-				this.scene.add( this.quad );
-
-				// Link both scenes and their FBOs
-				this.sceneA = sceneA;
-				this.sceneB = sceneB;
-
-				this.quadmaterial.uniforms.tDiffuse1.value = sceneA.fbo.texture;
-				this.quadmaterial.uniforms.tDiffuse2.value = sceneB.fbo.texture;
+				material.uniforms.tDiffuse1.value = sceneA.fbo.texture;
+				material.uniforms.tDiffuse2.value = sceneB.fbo.texture;
 
 				this.needChange = false;
 
 				this.setTextureThreshold = function ( value ) {
 
-					this.quadmaterial.uniforms.threshold.value = value;
+					material.uniforms.threshold.value = value;
 
 				};
 
 				this.useTexture = function ( value ) {
 
-					this.quadmaterial.uniforms.useTexture.value = value ? 1 : 0;
+					material.uniforms.useTexture.value = value ? 1 : 0;
 
 				};
 
 				this.setTexture = function ( i ) {
 
-					this.quadmaterial.uniforms.tMixTexture.value = this.textures[ i ];
+					material.uniforms.tMixTexture.value = textures[ i ];
 
 				};
 
@@ -361,8 +334,8 @@
 
 							if ( this.needChange ) {
 
-								transitionParams.texture = ( transitionParams.texture + 1 ) % this.textures.length;
-								this.quadmaterial.uniforms.tMixTexture.value = this.textures[ transitionParams.texture ];
+								transitionParams.texture = ( transitionParams.texture + 1 ) % textures.length;
+								material.uniforms.tMixTexture.value = textures[ transitionParams.texture ];
 								this.needChange = false;
 
 							}
@@ -372,26 +345,27 @@
 
 					}
 
-					this.quadmaterial.uniforms.mixRatio.value = transitionParams.transition;
+					material.uniforms.mixRatio.value = transitionParams.transition;
 
 					// Prevent render both scenes when it's not necessary
 					if ( transitionParams.transition == 0 ) {
 
-						this.sceneB.render( delta, false );
+						sceneB.render( delta, false );
 
 					} else if ( transitionParams.transition == 1 ) {
 
-						this.sceneA.render( delta, false );
+						sceneA.render( delta, false );
 
 					} else {
 
 						// When 0<transition<1 render transition between two scenes
 
-						this.sceneA.render( delta, true );
-						this.sceneB.render( delta, true );
+						sceneA.render( delta, true );
+						sceneB.render( delta, true );
+
 						renderer.setRenderTarget( null );
 						renderer.clear();
-						renderer.render( this.scene, this.cameraOrtho );
+						renderer.render( scene, camera );
 
 					}
 
@@ -400,7 +374,5 @@
 			}
 
 		</script>
-
 	</body>
-
 </html>