Fixed materials wireframe example.

examples/webgl_materials_wireframe.html

@@ -31,8 +31,6 @@
 
 		<script type="x-shader/x-fragment" id="fragmentShader">
 
-			#extension GL_OES_standard_derivatives : enable
-
 			varying vec3 vCenter;
 
 			float edgeFactorTri() {
@@ -54,7 +52,6 @@
 		<script>
 
 			var camera, scene, renderer;
-			var meshTris, meshLines, meshMixed;
 
 			init();
 			animate();
@@ -68,50 +65,48 @@
 
 				var size = 150;
 
-				var geometryLines = new THREE.BoxGeometry( size, size, size );
-				var geometryTris = new THREE.BoxGeometry( size, size, size );
-
-				// wireframe using gl.LINES
-
-				var materialLines = new THREE.MeshBasicMaterial( { wireframe: true } );
-
-				meshLines = new THREE.Mesh( geometryLines, materialLines );
-				meshLines.position.x = -150;
-				scene.add( meshLines );
-
 				//
 
-				var vertexShader = document.getElementById( 'vertexShader' ).textContent;
-				var fragmentShader = document.getElementById( 'fragmentShader' ).textContent;
-
-				// wireframe using gl.TRIANGLES (interpreted as triangles)
+				var geometry = new THREE.BoxGeometry( size, size, size );
+				var material = new THREE.MeshBasicMaterial( { wireframe: true } );
 
-				var attributesTris = { center: { type: 'v3', boundTo: 'faceVertices', value: [] } };
-				var valuesTris = attributesTris.center.value;
+				var mesh = new THREE.Mesh( geometry, material );
+				mesh.position.x = -150;
+				scene.add( mesh );
 
-				setupAttributes( geometryTris, valuesTris );
+				//
 
-				var materialTris = new THREE.ShaderMaterial( { uniforms: {}, attributes: attributesTris, vertexShader: vertexShader, fragmentShader: fragmentShader } );
+				var geometry = new THREE.BufferGeometry().fromGeometry( new THREE.BoxGeometry( size, size, size ) );
 
-				meshTris = new THREE.Mesh( geometryTris, materialTris );
-				meshTris.position.x = 150;
-				scene.add( meshTris );
+				setupAttributes( geometry );
 
-				// wireframe using gl.TRIANGLES (mixed triangles and quads)
+				var material = new THREE.ShaderMaterial( {
+					uniforms: {},
+					vertexShader: document.getElementById( 'vertexShader' ).textContent,
+					fragmentShader: document.getElementById( 'fragmentShader' ).textContent,
+					derivatives: true
+				} );
 
-				var mixedGeometry = new THREE.SphereGeometry( size / 2, 32, 16 );
+				var mesh = new THREE.Mesh( geometry, material );
+				mesh.position.x = 150;
+				scene.add( mesh );
 
-				var attributesMixed = { center: { type: 'v3', boundTo: 'faceVertices', value: [] } };
-				var valuesMixed = attributesMixed.center.value;
+				//
 
-				setupAttributes( mixedGeometry, valuesMixed );
+				var geometry = new THREE.BufferGeometry().fromGeometry( new THREE.SphereGeometry( size / 2, 32, 16 ) );
 
-				var materialMixed = new THREE.ShaderMaterial( { uniforms: {}, attributes: attributesMixed, vertexShader: vertexShader, fragmentShader: fragmentShader } );
+				setupAttributes( geometry );
 
-				meshMixed = new THREE.Mesh( mixedGeometry, materialMixed );
-				meshMixed.position.x = -150;
-				scene.add( meshMixed );
+				var material = new THREE.ShaderMaterial( {
+					uniforms: {},
+					vertexShader: document.getElementById( 'vertexShader' ).textContent,
+					fragmentShader: document.getElementById( 'fragmentShader' ).textContent,
+					derivatives: true
+				} );
 
+				var mesh = new THREE.Mesh( geometry, material );
+				mesh.position.x = -150;
+				scene.add( mesh );
 
 				// renderer
 
@@ -126,14 +121,27 @@
 
 			}
 
-			function setupAttributes( geometry, values ) {
+			function setupAttributes( geometry ) {
+
+				// TODO: Bring back quads
+
+				var vectors = [
+					new THREE.Vector3( 1, 0, 0 ),
+					new THREE.Vector3( 0, 1, 0 ),
+					new THREE.Vector3( 0, 0, 1 )
+				];
+
+				var position = geometry.attributes.position;
+				var centers = new Float32Array( position.count * 3 );
 
-				for( var f = 0; f < geometry.faces.length; f ++ ) {
+				for ( var i = 0, l = position.count; i < l; i ++ ) {
 
-					values[ f ] = [ new THREE.Vector3( 1, 0, 0 ), new THREE.Vector3( 0, 1, 0 ), new THREE.Vector3( 0, 0, 1 ) ];
+					vectors[ i % 3 ].toArray( centers, i * 3 );
 
 				}
 
+				geometry.addAttribute( 'center', new THREE.BufferAttribute( centers, 3 ) );
+
 			}
 
 			function onWindowResize() {
@@ -149,16 +157,11 @@
 
 				requestAnimationFrame( animate );
 
-				meshLines.rotation.x += 0.005;
-				meshLines.rotation.y += 0.01;
-
-				meshTris.rotation.x += 0.005;
-				meshTris.rotation.y += 0.01;
-
-				if ( meshMixed ) {
+				for ( var i = 0; i < scene.children.length; i ++ ) {
 
-					meshMixed.rotation.x += 0.005;
-					meshMixed.rotation.y += 0.01;
+					var object = scene.children[ i ];
+					object.rotation.x += 0.005;
+					object.rotation.y += 0.01;
 
 				}