Fixed broken custom attributes demo.

Attributes were not in fact updated before.

examples/webgl_custom_attributes.html

@@ -22,7 +22,7 @@
 				padding: 5px;
 				z-index:100;
 			}
-			
+
 		</style>
 	</head>
 
@@ -44,10 +44,10 @@
 
 			varying vec3 vNormal;
 			varying vec2 vUv;
-			
+
 			void main() {
 
-				vNormal = normal;	
+				vNormal = normal;
 				vUv = ( 0.5 + amplitude ) * uv + vec2( amplitude );
 
 				vec3 newPosition = position + amplitude * normal * vec3( displacement );
@@ -56,12 +56,12 @@
 			}
 
 		</script>
-	
+
 		<script type="x-shader/x-fragment" id="fragmentshader">
-	
+
 			varying vec3 vNormal;
 			varying vec2 vUv;
-			
+
 			uniform vec3 color;
 			uniform sampler2D texture;
 
@@ -69,28 +69,30 @@
 
 				vec3 light = vec3( 0.5, 0.2, 1.0 );
 				light = normalize( light );
-			
+
 				float dProd = dot( vNormal, light ) * 0.5 + 0.5;
 
 				vec4 tcolor = texture2D( texture, vUv );
 				vec4 gray = vec4( vec3( tcolor.r * 0.3 + tcolor.g * 0.59 + tcolor.b * 0.11 ), 1.0 );
-				
+
 				gl_FragColor = gray * vec4( vec3( dProd ) * vec3( color ), 1.0 );
 
 			}
 
 		</script>
-		
-		
+
+
 		<script type="text/javascript">
-	
+
 		var renderer, scene, camera, stats;
 
 		var sphere, uniforms, attributes;
 
+		var noise = [];
+
 		var WIDTH = window.innerWidth,
-			HEIGHT = window.innerHeight;	
-		
+			HEIGHT = window.innerHeight;
+
 		init();
 		animate();
 
@@ -98,17 +100,17 @@
 
 			camera = new THREE.Camera( 30, WIDTH / HEIGHT, 1, 10000 );
 			camera.position.z = 300;
-			
-			scene = new THREE.Scene();	
-		
+
+			scene = new THREE.Scene();
+
 			attributes = {
 
 				displacement: {	type: 'f', value: [] }
 
 			};
-			
+
 			uniforms = {
-				
+
 				amplitude: { type: "f", value: 1.0 },
 				color:     { type: "c", value: new THREE.Color( 0xff2200 ) },
 				texture:   { type: "t", value: 0, texture: THREE.ImageUtils.loadTexture( "textures/water.jpg" ) },
@@ -118,47 +120,54 @@
 			uniforms.texture.texture.wrapS = uniforms.texture.texture.wrapT = THREE.RepeatWrapping;
 
 			var shaderMaterial = new THREE.MeshShaderMaterial( {
-			
+
 				uniforms: 		uniforms,
 				attributes:     attributes,
 				vertexShader:   document.getElementById( 'vertexshader' ).textContent,
-				fragmentShader: document.getElementById( 'fragmentshader' ).textContent			
+				fragmentShader: document.getElementById( 'fragmentshader' ).textContent
 
 			});
-		
-		
+
+
 			var radius = 50, segments = 128, rings = 64;
 			var geometry = new THREE.SphereGeometry( radius, segments, rings );
-			
+
 			sphere = new THREE.Mesh( geometry, shaderMaterial );
 			sphere.dynamic = true;
 
 			var vertices = sphere.geometry.vertices;
 			var values = attributes.displacement.value;
 
+
 			for( var v = 0; v < vertices.length; v++ ) {
 
-				values[ v ] = Math.random() * 5;
+				values[ v ] = 0;
+				noise[ v ] = Math.random() * 5;
 
 			}
-		
+
 			scene.addChild( sphere );
-		
+
 			renderer = new THREE.WebGLRenderer( { clearColor: 0x050505, clearAlpha: 1 } );
 			renderer.setSize( WIDTH, HEIGHT );
-			
+
 			var container = document.getElementById( 'container' );
 			container.appendChild( renderer.domElement );
-		
+
 			stats = new Stats();
 			stats.domElement.style.position = 'absolute';
 			stats.domElement.style.top = '0px';
 			container.appendChild( stats.domElement );
-			
+
+		}
+
+		function cap( x, a, b ) {
+
+			return ( x < a ) ? a : ( ( x > b ) ? b : x );
 		}
-	
+
 		var i, value;
-	
+
 		function animate() {
 
 			requestAnimationFrame( animate );
@@ -169,19 +178,22 @@
 		}
 
 		function render() {
-		
-			sphere.rotation.y += 0.01;
-			sphere.rotation.z += 0.01;
-			
+
+			var time = new Date().getTime() * 0.01;
+
+			sphere.rotation.y = 0.01 * time;
+			sphere.rotation.z = 0.01 * time;
+
 			uniforms.amplitude.value = 2.5 * Math.sin( sphere.rotation.y * 0.125 );
 			THREE.ColorUtils.adjustHSV( uniforms.color.value, 0.0005, 0, 0 );
-			
+
 			for( i = 0; i < attributes.displacement.value.length; i++ ) {
 
-				value = attributes.displacement.value[ i ];
-				value[ i ] += 0.5 * ( 0.5 - Math.random() );
-				if ( value[ i ] < -5 ) value[ i ] = -5;
-				if ( value[ i ] > 5 ) value[ i ] = 5;
+				attributes.displacement.value[ i ] = Math.sin( 0.1*i + time );
+
+				noise[ i ] += 0.5 * ( 0.5 - Math.random() );
+				noise[ i ] = cap( noise[ i ], -5, 5 );
+				attributes.displacement.value[ i ] += noise[ i ];
 
 			}
 			attributes.displacement.needsUpdate = true;