Webgl BufferGeometry Instance Billboard Example GPU Boost (#8965)

* First functional change

* Better HSL to RGB function

* Correct Padding

* HSL to RGB bad colors generation, fixed

examples/webgl_buffergeometry_instancing_billboards.html

@@ -55,31 +55,27 @@
 		precision highp float;
 		uniform mat4 modelViewMatrix;
 		uniform mat4 projectionMatrix;
+		uniform float time;
 
 		attribute vec3 position;
 		attribute vec2 uv;
-		attribute vec3 normal;
-
 		attribute vec3 translate;
-		attribute float scale;
-		attribute vec3 color;
 
 		varying vec2 vUv;
-		varying vec3 vColor;
+		varying float vScale;
 
 		void main() {
 
 			vec4 mvPosition = modelViewMatrix * vec4( translate, 1.0 );
-
+			vec3 trTime = vec3(translate.x + time,translate.y + time,translate.z + time);
+			float scale =  sin( trTime.x * 2.1 ) + sin( trTime.y * 3.2 ) + sin( trTime.z * 4.3 );
+			vScale = scale;
+			scale = scale * 10.0 + 10.0;
 			mvPosition.xyz += position * scale;
-
 			vUv = uv;
-			vColor = color;
-
 			gl_Position = projectionMatrix * mvPosition;
 
 		}
-
 	</script>
 	<script id="fshader" type="x-shader/x-fragment">
 		precision highp float;
@@ -87,20 +83,32 @@
 		uniform sampler2D map;
 
 		varying vec2 vUv;
-		varying vec3 vColor;
+		varying float vScale;
+
+		// HSL to RGB Convertion helpers
+		vec3 HUEtoRGB(float H){
+			H = mod(H,1.0);
+			float R = abs(H * 6.0 - 3.0) - 1.0;
+			float G = 2.0 - abs(H * 6.0 - 2.0);
+			float B = 2.0 - abs(H * 6.0 - 4.0);
+			return clamp(vec3(R,G,B),0.0,1.0);
+		}
 
-		void main() {
+		vec3 HSLtoRGB(vec3 HSL){
+			vec3 RGB = HUEtoRGB(HSL.x);
+			float C = (1.0 - abs(2.0 * HSL.z - 1.0)) * HSL.y;
+			return (RGB - 0.5) * C + HSL.z;
+		}
 
+		void main() {
 			vec4 diffuseColor = texture2D( map, vUv );
-			gl_FragColor = vec4( diffuseColor.xyz * vColor, diffuseColor.w );
+			gl_FragColor = vec4( diffuseColor.xyz * HSLtoRGB(vec3(vScale/5.0, 1.0, 0.5)), diffuseColor.w );
 
 			if ( diffuseColor.w < 0.5 ) discard;
-
 		}
 	</script>
 
 	<script>
-
 		var container, stats;
 
 		var camera, scene, renderer;
@@ -136,8 +144,6 @@
 			var particleCount = 75000;
 
 			var translateArray = new Float32Array( particleCount * 3 );
-			var scaleArray = new Float32Array( particleCount );
-			var colorsArray = new Float32Array( particleCount * 3 );
 
 			for ( var i = 0, i3 = 0, l = particleCount; i < l; i ++, i3 += 3 ) {
 
@@ -148,12 +154,11 @@
 			}
 
 			geometry.addAttribute( "translate", new THREE.InstancedBufferAttribute( translateArray, 3, 1 ) );
-			geometry.addAttribute( "scale", new THREE.InstancedBufferAttribute( scaleArray, 1, 1 ).setDynamic( true ) );
-			geometry.addAttribute( "color", new THREE.InstancedBufferAttribute( colorsArray, 3, 1 ).setDynamic( true ) );
 
 			material = new THREE.RawShaderMaterial( {
 				uniforms: {
-					map: { type: "t", value: new THREE.TextureLoader().load( "textures/sprites/circle.png" ) }
+					map: { type: "t", value: new THREE.TextureLoader().load( "textures/sprites/circle.png" ) },
+					time: { type: "f", value: 0.0 }
 				},
 				vertexShader: document.getElementById( 'vshader' ).textContent,
 				fragmentShader: document.getElementById( 'fshader' ).textContent,
@@ -169,8 +174,6 @@
 			renderer.setSize( window.innerWidth, window.innerHeight );
 			container.appendChild( renderer.domElement );
 
-			//
-
 			stats = new Stats();
 			container.appendChild( stats.dom );
 
@@ -189,8 +192,6 @@
 
 		}
 
-		//
-
 		function animate() {
 
 			requestAnimationFrame( animate );
@@ -204,40 +205,11 @@
 
 			var time = performance.now() * 0.0005;
 
+			material.uniforms.time.value = time;
+
 			mesh.rotation.x = time * 0.2;
 			mesh.rotation.y = time * 0.4;
 
-			var translates = geometry.getAttribute( 'translate' );
-			var translatesArray = translates.array;
-
-			var scales = geometry.getAttribute( 'scale' );
-			var scalesArray = scales.array;
-
-			var colors = geometry.getAttribute( 'color' );
-			var colorsArray = colors.array;
-
-			var color = new THREE.Color( 0xffffff );
-
-			for ( var i = 0, i3 = 0, l = scalesArray.length; i < l; i ++, i3 += 3 ) {
-
-				var x = translatesArray[ i3 + 0 ] + time;
-				var y = translatesArray[ i3 + 1 ] + time;
-				var z = translatesArray[ i3 + 2 ] + time;
-				var scale = Math.sin( x * 2.1 ) + Math.sin( y * 3.2 ) + Math.sin( z * 4.3 );
-
-				scalesArray[ i ] = scale * 10 + 10;
-
-				color.setHSL( scale / 5, 1, 0.5 );
-
-				colorsArray[ i3 + 0 ] = color.r;
-				colorsArray[ i3 + 1 ] = color.g;
-				colorsArray[ i3 + 2 ] = color.b;
-
-			}
-
-			scales.needsUpdate = true;
-			colors.needsUpdate = true;
-
 			renderer.render( scene, camera );
 
 		}