Updated tessellation example

examples/webgl_modifier_tessellation.html

@@ -64,7 +64,7 @@
 				vNormal = normal;
 				vColor = customColor;
 
-				vec3 newPosition = position + amplitude * displacement;
+				vec3 newPosition = position + normal * amplitude * displacement;
 				gl_Position = projectionMatrix * modelViewMatrix * vec4( newPosition, 1.0 );
 
 			}
@@ -78,7 +78,7 @@
 
 			void main() {
 
-				const float ambient = 0.005;
+				const float ambient = 0.4;
 
 				vec3 light = vec3( 1.0 );
 				light = normalize( light );
@@ -86,7 +86,6 @@
 				float directional = max( dot( vNormal, light ), 0.0 );
 
 				gl_FragColor = vec4( ( directional + ambient ) * vColor, 1.0 );
-				gl_FragColor.xyz = sqrt( gl_FragColor.xyz );
 
 			}
 
@@ -109,8 +108,8 @@
 
 		function init() {
 
-			camera = new THREE.PerspectiveCamera( 25, WIDTH / HEIGHT, 1, 10000 );
-			camera.position.z = 350;
+			camera = new THREE.PerspectiveCamera( 40, WIDTH / HEIGHT, 1, 10000 );
+			camera.position.set( -100, 100, 200 );
 
 			controls = new THREE.TrackballControls( camera );
 
@@ -118,31 +117,6 @@
 
 			//
 
-			attributes = {
-
-				displacement: {	type: 'v3', value: [] },
-				customColor:  {	type: 'c', value: [] }
-
-			};
-
-			uniforms = {
-
-				amplitude: { type: "f", value: 0.0 }
-
-			};
-
-			var shaderMaterial = new THREE.ShaderMaterial( {
-
-				uniforms: 		uniforms,
-				attributes:     attributes,
-				vertexShader:   document.getElementById( 'vertexshader' ).textContent,
-				fragmentShader: document.getElementById( 'fragmentshader' ).textContent,
-				shading: 		THREE.FlatShading,
-				side: 			THREE.DoubleSide
-
-			});
-
-
 			var geometry = new THREE.TextGeometry( "THREE.JS", {
 
 				size: 40,
@@ -159,8 +133,6 @@
 
 			});
 
-			geometry.dynamic = true;
-
 			geometry.center();
 
 			var tessellateModifier = new THREE.TessellateModifier( 8 );
@@ -174,57 +146,68 @@
 			var explodeModifier = new THREE.ExplodeModifier();
 			explodeModifier.modify( geometry );
 
-			var vertices = geometry.vertices;
+			var numFaces = geometry.faces.length;
+
+			//
+
+			geometry = new THREE.BufferGeometry().fromGeometry( geometry );
 
-			var colors = attributes.customColor.value;
-			var displacement = attributes.displacement.value;
+			var colors = new Float32Array( numFaces * 3 * 3 );
+			var displacement = new Float32Array( numFaces * 3 * 3 );
 
-			var nv, v = 0;
+			var color = new THREE.Color();
 
-			for ( var f = 0; f < geometry.faces.length; f ++ ) {
+			for ( var f = 0; f < numFaces; f ++ ) {
 
-				var face = geometry.faces[ f ];
+				var index = 9 * f;
 
-				if ( face instanceof THREE.Face3 ) {
+				var h = 0.2 * Math.random();
+				var s = 0.5 + 0.5 * Math.random();
+				var l = 0.5 + 0.5 * Math.random();
+
+				color.setHSL( h, s, l );
 
-					nv = 3;
+				var d = 10 * ( 0.5 - Math.random() );
+
+				for ( var i = 0; i < 3; i ++ ) {
 
-				} else {
+					colors[ index + ( 3 * i )     ] = color.r;
+					colors[ index + ( 3 * i ) + 1 ] = color.g;
+					colors[ index + ( 3 * i ) + 2 ] = color.b;
 
-					nv = 4;
+					displacement[ index + ( 3 * i )     ] = d;
+					displacement[ index + ( 3 * i ) + 1 ] = d;
+					displacement[ index + ( 3 * i ) + 2 ] = d;
 
 				}
 
-				var h = 0.15 * Math.random();
-				var s = 0.5 + 0.5 * Math.random();
-				var l = 0.5 + 0.5 * Math.random();
+			}
 
-				var d = 10 * ( 0.5 - Math.random() );
+			geometry.addAttribute( 'customColor', new THREE.BufferAttribute( colors, 3 ) );
+			geometry.addAttribute( 'displacement', new THREE.BufferAttribute( displacement, 3 ) );
 
-				var x = 2 * ( 0.5 - Math.random() );
-				var y = 2 * ( 0.5 - Math.random() );
-				var z = 2 * ( 0.5 - Math.random() );
+			//
 
-				for ( var i = 0; i < nv; i ++ ) {
+			attributes = [ `displacement`, `customColor` ];
 
-					colors[ v ] = new THREE.Color();
-					displacement[ v ] = new THREE.Vector3();
+			uniforms = {
 
-					colors[ v ].setHSL( h, s, l );
-					colors[ v ].convertGammaToLinear();
+				amplitude: { type: "f", value: 0.0 }
 
-					displacement[ v ].set( x, y, z );
+			};
 
-					v += 1;
+			var shaderMaterial = new THREE.ShaderMaterial( {
 
-				}
+				uniforms: 		uniforms,
+				attributes:     attributes,
+				vertexShader:   document.getElementById( 'vertexshader' ).textContent,
+				fragmentShader: document.getElementById( 'fragmentshader' ).textContent
 
-			}
+			});
 
-			console.log( "faces", geometry.faces.length );
+			//
 
 			mesh = new THREE.Mesh( geometry, shaderMaterial );
-			mesh.rotation.set( 0.5, 0.5, 0 );
 
 			scene.add( mesh );
 
@@ -259,6 +242,7 @@
 			requestAnimationFrame( animate );
 
 			render();
+
 			stats.update();
 
 		}
@@ -267,9 +251,10 @@
 
 			var time = Date.now() * 0.001;
 
-			uniforms.amplitude.value = Math.sin( time * 0.5 );
+			uniforms.amplitude.value = 1.0 + Math.sin( time * 0.5 );
 
 			controls.update();
+
 			renderer.render( scene, camera );
 
 		}