Updated example to new attributes approach.

examples/webgl_custom_attributes_lines.html

@@ -81,45 +81,18 @@
 
 		var renderer, scene, camera, stats;
 
-		var object, uniforms, attributes;
-
-		var text = "three.js",
-
-			height = 15,
-			size = 50,
-
-			curveSegments = 10,
-			steps = 40,
-
-			bevelThickness = 5,
-			bevelSize = 1.5,
-			bevelSegments = 10,
-			bevelEnabled = true,
-
-			font = "helvetiker", 		// helvetiker, optimer, gentilis, droid sans, droid serif
-			weight = "bold",		// normal bold
-			style = "normal";		// normal italic
-
-		var WIDTH = window.innerWidth,
-			HEIGHT = window.innerHeight;
+		var object, uniforms;
 
 		init();
 		animate();
 
 		function init() {
 
-			camera = new THREE.PerspectiveCamera( 30, WIDTH / HEIGHT, 1, 10000 );
+			camera = new THREE.PerspectiveCamera( 30, window.innerWidth / window.innerHeight, 1, 10000 );
 			camera.position.z = 400;
 
 			scene = new THREE.Scene();
 
-			attributes = {
-
-				displacement: {	type: 'v3', value: [] },
-				customColor: {	type: 'c', value: [] }
-
-			};
-
 			uniforms = {
 
 				amplitude: { type: "f", value: 5.0 },
@@ -131,7 +104,7 @@
 			var shaderMaterial = new THREE.ShaderMaterial( {
 
 				uniforms:       uniforms,
-				attributes:     attributes,
+				attributes:     [ 'displacement', 'customColor' ],
 				vertexShader:   document.getElementById( 'vertexshader' ).textContent,
 				fragmentShader: document.getElementById( 'fragmentshader' ).textContent,
 				blending:       THREE.AdditiveBlending,
@@ -140,55 +113,57 @@
 
 			});
 
-			shaderMaterial.linewidth = 1;
-
-			geometry = new THREE.TextGeometry( text, {
+			var geometry = new THREE.TextGeometry( 'three.js', {
 
-				size: size,
-				height: height,
-				curveSegments: curveSegments,
+				size: 50,
+				height: 15,
+				curveSegments: 10,
 
-				font: font,
-				weight: weight,
-				style: style,
+				font: 'helvetiker',
+				weight: 'bold',
+				style: 'normal',
 
-				bevelThickness: bevelThickness,
-				bevelSize: bevelSize,
-				bevelEnabled: bevelEnabled,
-				bevelSegments: bevelSegments,
+				bevelThickness: 5,
+				bevelSize: 1.5,
+				bevelEnabled: true,
+				bevelSegments: 10,
 
-				steps: steps
+				steps: 40
 
 			});
 
-			geometry.dynamic = true;
-
 			geometry.center();
 
-			object = new THREE.Line( geometry, shaderMaterial );
+			var vertices = geometry.vertices;
+
+			var buffergeometry = new THREE.BufferGeometry();
+
+			var position = new THREE.Float32Attribute( vertices.length * 3, 3 ).copyVector3sArray( vertices );
+			buffergeometry.addAttribute( 'position', position )
 
-			var vertices = object.geometry.vertices;
+			var displacement = new THREE.Float32Attribute( vertices.length * 3, 3 );
+			buffergeometry.addAttribute( 'displacement', displacement );
 
-			var displacement = attributes.displacement.value;
-			var color = attributes.customColor.value;
+			var customColor = new THREE.Float32Attribute( vertices.length * 3, 3 );
+			buffergeometry.addAttribute( 'customColor', customColor );
 
-			for( var v = 0; v < vertices.length; v ++ ) {
+			var color = new THREE.Color( 0xffffff );
 
-				displacement[ v ] = new THREE.Vector3();
+			for( var i = 0, l = customColor.count; i < l; i ++ ) {
 
-				color[ v ] = new THREE.Color( 0xffffff );
-				color[ v ].setHSL( v / vertices.length, 0.5, 0.5 );
+				color.setHSL( i / l, 0.5, 0.5 );
+				color.toArray( customColor.array, i * customColor.itemSize );
 
 			}
 
+			object = new THREE.Line( buffergeometry, shaderMaterial );
 			object.rotation.x = 0.2;
-
 			scene.add( object );
 
 			renderer = new THREE.WebGLRenderer( { antialias: true } );
 			renderer.setClearColor( 0x050505 );
 			renderer.setPixelRatio( window.devicePixelRatio );
-			renderer.setSize( WIDTH, HEIGHT );
+			renderer.setSize( window.innerWidth, window.innerHeight );
 
 			var container = document.getElementById( 'container' );
 			container.appendChild( renderer.domElement );
@@ -228,22 +203,17 @@
 
 			object.rotation.y = 0.25 * time;
 
-			uniforms.amplitude.value = 0.5 * Math.sin( 0.5 * time );
+			uniforms.amplitude.value = Math.sin( 0.5 * time );
 			uniforms.color.value.offsetHSL( 0.0005, 0, 0 );
 
-			var nx, ny, nz, value;
-
-			for( var i = 0, il = attributes.displacement.value.length; i < il; i ++ ) {
-
-				nx = 0.3 * ( 0.5 - Math.random() );
-				ny = 0.3 * ( 0.5 - Math.random() );
-				nz = 0.3 * ( 0.5 - Math.random() );
+			var attributes = object.geometry.attributes;
+			var array = attributes.displacement.array;
 
-				value = attributes.displacement.value[ i ];
+			for ( var i = 0, l = array.length; i < l; i += 3 ) {
 
-				value.x += nx;
-				value.y += ny;
-				value.z += nz;
+				array[ i     ] += 0.3 * ( 0.5 - Math.random() );
+				array[ i + 1 ] += 0.3 * ( 0.5 - Math.random() );
+				array[ i + 2 ] += 0.3 * ( 0.5 - Math.random() );
 
 			}