Crossfade: Moved to BufferGeometry

examples/js/crossfade/scenes.js

@@ -1,76 +1,75 @@
 function generateGeometry( objectType, numObjects ) {
 
-	var geometry = new THREE.Geometry();
+	function applyVertexColors( geometry, color ) {
 
-	function applyVertexColors( g, c ) {
+		var position = geometry.attributes.position;
+		var colors = [];
 
-		g.faces.forEach( function( f ) {
+		for ( var i = 0; i < position.count; i ++ ) {
 
-			var n = ( f instanceof THREE.Face3 ) ? 3 : 4;
+			colors.push( color.r, color.g, color.b );
 
-			for ( var j = 0; j < n; j ++ ) {
+		}
 
-				f.vertexColors[ j ] = c;
+		geometry.addAttribute( 'color', new THREE.Float32BufferAttribute( colors, 3 ) );
 
-			}
+	}
 
-		} );
+	var geometries = [];
 
-	}
+	var matrix = new THREE.Matrix4();
+	var position = new THREE.Vector3();
+	var rotation = new THREE.Euler();
+	var quaternion = new THREE.Quaternion();
+	var scale = new THREE.Vector3();
+	var color = new THREE.Color();
 
 	for ( var i = 0; i < numObjects; i ++ ) {
 
-		var position = new THREE.Vector3();
-
 		position.x = Math.random() * 10000 - 5000;
 		position.y = Math.random() * 6000 - 3000;
 		position.z = Math.random() * 8000 - 4000;
 
-		var rotation = new THREE.Euler();
-
 		rotation.x = Math.random() * 2 * Math.PI;
 		rotation.y = Math.random() * 2 * Math.PI;
 		rotation.z = Math.random() * 2 * Math.PI;
-
-		var scale = new THREE.Vector3();
-
-		var geom, color = new THREE.Color();
+		quaternion.setFromEuler( rotation, false );
 
 		scale.x = Math.random() * 200 + 100;
 
-		if ( objectType == "cube" ) {
+		var geometry;
+
+		if ( objectType === 'cube' ) {
 
-			geom = new THREE.BoxGeometry( 1, 1, 1 );
+			geometry = new THREE.BoxBufferGeometry( 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, Math.random() + 0.1 );
+			color.setRGB( 0, 0, 0.1 + 0.9 * Math.random() );
 
-		} else if ( objectType == "sphere" ) {
+		} else if ( objectType === 'sphere' ) {
 
-			geom = new THREE.IcosahedronGeometry( 1, 1 );
+			geometry = new THREE.IcosahedronBufferGeometry( 1, 1 );
 			scale.y = scale.z = scale.x;
-			color.setRGB( Math.random() + 0.1, 0, 0 );
+			color.setRGB( 0.1 + 0.9 * Math.random(), 0, 0 );
 
 		}
 
 		// give the geom's vertices a random color, to be displayed
-		applyVertexColors( geom, color );
+		applyVertexColors( geometry, color );
 
-		var mesh = new THREE.Mesh( geom );
-		mesh.position.copy( position );
-		mesh.rotation.copy( rotation );
-		mesh.scale.copy( scale );
-		mesh.updateMatrix();
+		matrix.compose( position, quaternion, scale );
+		geometry.applyMatrix( matrix );
 
-		geometry.merge( mesh.geometry, mesh.matrix );
+		geometries.push( geometry );
 
 	}
 
-	return geometry;
+	return THREE.BufferGeometryUtils.mergeBufferGeometries( geometries );
 
 }
 
-function Scene ( type, numObjects, cameraZ, fov, rotationSpeed, clearColor ) {
+function Scene( type, numObjects, cameraZ, fov, rotationSpeed, clearColor ) {
 
 	this.clearColor = clearColor;
 
@@ -94,7 +93,7 @@ function Scene ( type, numObjects, cameraZ, fov, rotationSpeed, clearColor ) {
 	var renderTargetParameters = { minFilter: THREE.LinearFilter, magFilter: THREE.LinearFilter, format: THREE.RGBFormat, stencilBuffer: false };
 	this.fbo = new THREE.WebGLRenderTarget( window.innerWidth, window.innerHeight, renderTargetParameters );
 
-	this.render = function( delta, rtt ) {
+	this.render = function ( delta, rtt ) {
 
 		this.mesh.rotation.x += delta * this.rotationSpeed.x;
 		this.mesh.rotation.y += delta * this.rotationSpeed.y;

examples/webgl_postprocessing_crossfade.html

@@ -41,6 +41,7 @@
 		<script src="js/crossfade/scenes.js"></script>
 		<script src="js/crossfade/gui.js"></script>
 		<script src="js/crossfade/transition.js"></script>
+		<script src="js/BufferGeometryUtils.js"></script>
 
 		<script>