Fixed all custom attributes examples.

examples/js/GPUParticleSystem.js

@@ -225,16 +225,6 @@ THREE.GPUParticleSystem = function(options) {
         value: self.particleSpriteTex
       }
     },
-    attributes: {
-      "particlePositionsStartTime": {
-        type: "v4",
-        value: []
-      },
-      "particleVelColSizeLife": {
-        type: "v4",
-        value: []
-      }
-    },
     blending: THREE.AdditiveBlending,
     vertexShader: GPUParticleShader.vertexShader,
     fragmentShader: GPUParticleShader.fragmentShader

examples/js/Ocean.js

@@ -3,19 +3,19 @@
 	// flag used to trigger parameter changes
 	this.changed = true;
 	this.initial = true;
-	
+
 	// Assign required parameters as object properties
 	this.oceanCamera = new THREE.OrthographicCamera(); //camera.clone();
 	this.oceanCamera.position.z = 1;
 	this.renderer = renderer;
 	this.renderer.clearColor( 0xffffff );
-	
+
 	this.scene = new THREE.Scene();
-	
+
 	// Enable necessary extensions
 	this.renderer.context.getExtension( 'OES_texture_float' );
 	this.renderer.context.getExtension( 'OES_texture_float_linear' );
-	
+
 	// Assign optional parameters as variables and object properties
 	function optionalParameter( value, defaultValue ) {
 
@@ -39,10 +39,10 @@
 	this.windY = optionalParameter( options.INITIAL_WIND[ 1 ], 10.0 ),
 	this.size = optionalParameter( options.INITIAL_SIZE, 250.0 ),
 	this.choppiness = optionalParameter( options.INITIAL_CHOPPINESS, 1.5 );
-	
-	// 
+
+	//
 	this.matrixNeedsUpdate = false;
-	
+
 	// Setup framebuffer pipeline
 	var renderTargetType = optionalParameter( options.USE_HALF_FLOAT, false ) ? THREE.HalfFloatType : THREE.FloatType;
 	var LinearClampParams = {
@@ -86,13 +86,13 @@
 	this.pongTransformFramebuffer = new THREE.WebGLRenderTarget( this.resolution, this.resolution, NearestClampParams );
 	this.displacementMapFramebuffer = new THREE.WebGLRenderTarget( this.resolution, this.resolution, LinearClampParams );
 	this.normalMapFramebuffer = new THREE.WebGLRenderTarget( this.resolution, this.resolution, LinearClampParams );
-	
+
 	// Define shaders and constant uniforms
 	////////////////////////////////////////
-	
+
 	// 0 - The vertex shader used in all of the simulation steps
 	var fullscreeenVertexShader = THREE.ShaderLib[ "ocean_sim_vertex" ];
-		
+
 	// 1 - Horizontal wave vertices used for FFT
 	var oceanHorizontalShader = THREE.ShaderLib[ "ocean_subtransform" ];
 	var oceanHorizontalUniforms = THREE.UniformsUtils.clone( oceanHorizontalShader.uniforms );
@@ -105,7 +105,7 @@
 	this.materialOceanHorizontal.uniforms.u_subtransformSize = { type: "f", value: null };
 	this.materialOceanHorizontal.uniforms.u_input = { type: "t", value: null };
 	this.materialOceanHorizontal.depthTest = false;
-	
+
 	// 2 - Vertical wave vertices used for FFT
 	var oceanVerticalShader = THREE.ShaderLib[ "ocean_subtransform" ];
 	var oceanVerticalUniforms = THREE.UniformsUtils.clone( oceanVerticalShader.uniforms );
@@ -118,7 +118,7 @@
 	this.materialOceanVertical.uniforms.u_subtransformSize = { type: "f", value: null };
 	this.materialOceanVertical.uniforms.u_input = { type: "t", value: null };
 	this.materialOceanVertical.depthTest = false;
-	
+
 	// 3 - Initial spectrum used to generate height map
 	var initialSpectrumShader = THREE.ShaderLib[ "ocean_initial_spectrum" ];
 	var initialSpectrumUniforms = THREE.UniformsUtils.clone( initialSpectrumShader.uniforms );
@@ -130,7 +130,7 @@
 	this.materialInitialSpectrum.uniforms.u_wind = { type: "v2", value: new THREE.Vector2() };
 	this.materialInitialSpectrum.uniforms.u_resolution = { type: "f", value: this.resolution };
 	this.materialInitialSpectrum.depthTest = false;
-	
+
 	// 4 - Phases used to animate heightmap
 	var phaseShader = THREE.ShaderLib[ "ocean_phase" ];
 	var phaseUniforms = THREE.UniformsUtils.clone( phaseShader.uniforms );
@@ -141,7 +141,7 @@
 	} );
 	this.materialPhase.uniforms.u_resolution = { type: "f", value: this.resolution };
 	this.materialPhase.depthTest = false;
-	
+
 	// 5 - Shader used to update spectrum
 	var spectrumShader = THREE.ShaderLib[ "ocean_spectrum" ];
 	var spectrumUniforms = THREE.UniformsUtils.clone( spectrumShader.uniforms );
@@ -169,9 +169,7 @@
 	// 7 - Shader used to update normals
 	var oceanShader = THREE.ShaderLib[ "ocean_main" ];
 	var oceanUniforms = THREE.UniformsUtils.clone( oceanShader.uniforms );
-	var oceanAttributes = THREE.UniformsUtils.clone( oceanShader.attributes );
 	this.materialOcean = new THREE.ShaderMaterial( {
-		attributes: oceanAttributes,
 		uniforms: oceanUniforms,
 		vertexShader: oceanShader.vertexShader,
 		fragmentShader: oceanShader.fragmentShader
@@ -179,8 +177,8 @@
 	// this.materialOcean.wireframe = true;
 	this.materialOcean.uniforms.u_geometrySize = { type: "f", value: this.resolution };
 	this.materialOcean.uniforms.u_displacementMap = { type: "t", value: this.displacementMapFramebuffer };
-	this.materialOcean.uniforms.u_normalMap = { type: "t", value: this.normalMapFramebuffer }; 
-	this.materialOcean.uniforms.u_oceanColor = { type: "v3", value: this.oceanColor }; 
+	this.materialOcean.uniforms.u_normalMap = { type: "t", value: this.normalMapFramebuffer };
+	this.materialOcean.uniforms.u_oceanColor = { type: "v3", value: this.oceanColor };
 	this.materialOcean.uniforms.u_skyColor = { type: "v3", value: this.skyColor };
 	this.materialOcean.uniforms.u_sunDirection = { type: "v3", value: new THREE.Vector3( this.sunDirectionX, this.sunDirectionY, this.sunDirectionZ ) };
 	this.materialOcean.uniforms.u_exposure = { type: "f", value: this.exposure };
@@ -219,10 +217,10 @@ THREE.Ocean.prototype.generateMesh = function () {
 THREE.Ocean.prototype.render = function () {
 
 	this.scene.overrideMaterial = null;
-	
+
 	if ( this.changed )
 		this.renderInitialSpectrum();
-	
+
 	this.renderWavePhase();
 	this.renderSpectrum();
 	this.renderSpectrumFFT();
@@ -248,7 +246,7 @@ THREE.Ocean.prototype.generateSeedPhaseTexture = function() {
 		}
 
 	}
-	
+
 	this.pingPhaseTexture = new THREE.DataTexture( phaseArray, this.resolution, this.resolution, THREE.RGBAFormat );
 	this.pingPhaseTexture.minFilter = THREE.NearestFilter;
 	this.pingPhaseTexture.magFilter = THREE.NearestFilter;
@@ -304,7 +302,7 @@ THREE.Ocean.prototype.renderSpectrumFFT = function() {
 
 	// GPU FFT using Stockham formulation
 	var iterations = Math.log( this.resolution ) / Math.log( 2 ); // log2
-	
+
 	this.scene.overrideMaterial = this.materialOceanHorizontal;
 
 	for ( var i = 0; i < iterations; i ++ ) {

examples/js/shaders/OceanShaders.js

@@ -55,7 +55,7 @@ THREE.ShaderLib[ 'ocean_subtransform' ] = {
 		'uniform float u_subtransformSize;',
 
 		'varying vec2 vUV;',
-		
+
 		'vec2 multiplyComplex (vec2 a, vec2 b) {',
 			'return vec2(a[0] * b[0] - a[1] * b[1], a[1] * b[0] + a[0] * b[1]);',
 		'}',
@@ -105,7 +105,7 @@ THREE.ShaderLib[ 'ocean_initial_spectrum' ] = {
 		'uniform vec2 u_wind;',
 		'uniform float u_resolution;',
 		'uniform float u_size;',
-		
+
 		'float square (float x) {',
 			'return x * x;',
 		'}',
@@ -120,13 +120,13 @@ THREE.ShaderLib[ 'ocean_initial_spectrum' ] = {
 
 		'void main (void) {',
 			'vec2 coordinates = gl_FragCoord.xy - 0.5;',
-			
+
 			'float n = (coordinates.x < u_resolution * 0.5) ? coordinates.x : coordinates.x - u_resolution;',
 			'float m = (coordinates.y < u_resolution * 0.5) ? coordinates.y : coordinates.y - u_resolution;',
-			
+
 			'vec2 K = (2.0 * PI * vec2(n, m)) / u_size;',
 			'float k = length(K);',
-			
+
 			'float l_wind = length(u_wind);',
 
 			'float Omega = 0.84;',
@@ -206,7 +206,7 @@ THREE.ShaderLib[ 'ocean_phase' ] = {
 			'float phase = texture2D(u_phases, vUV).r;',
 			'float deltaPhase = omega(length(waveVector)) * u_deltaTime;',
 			'phase = mod(phase + deltaPhase, 2.0 * PI);',
-		
+
 			'gl_FragColor = vec4(phase, 0.0, 0.0, 0.0);',
 		'}'
 	].join( '\n' )
@@ -273,7 +273,7 @@ THREE.ShaderLib[ 'ocean_spectrum' ] = {
 				'hX = vec2(0.0);',
 				'hZ = vec2(0.0);',
 			'}',
-		
+
 			'gl_FragColor = vec4(hX + multiplyByI(h), hZ);',
 		'}'
 	].join( '\n' )
@@ -291,7 +291,7 @@ THREE.ShaderLib[ 'ocean_normals' ] = {
 		'precision highp float;',
 
 		'varying vec2 vUV;',
-		
+
 		'uniform sampler2D u_displacementMap;',
 		'uniform float u_resolution;',
 		'uniform float u_size;',
@@ -310,7 +310,7 @@ THREE.ShaderLib[ 'ocean_normals' ] = {
 			'vec3 topLeft = cross(top, left);',
 			'vec3 bottomLeft = cross(left, bottom);',
 			'vec3 bottomRight = cross(bottom, right);',
-		
+
 			'gl_FragColor = vec4(normalize(topRight + topLeft + bottomLeft + bottomRight), 1.0);',
 		'}'
 	].join( '\n' )
@@ -335,7 +335,7 @@ THREE.ShaderLib[ 'ocean_main' ] = {
 	},
 	vertexShader: [
 		'precision highp float;',
-		
+
 		'varying vec3 vPos;',
 		'varying vec2 vUV;',
 

examples/webgl_buffergeometry_custom_attributes_particles.html

@@ -98,13 +98,6 @@
 
 			scene = new THREE.Scene();
 
-			var attributes = {
-
-				size:        { type: 'f', value: null },
-				customColor: { type: 'c', value: null }
-
-			};
-
 			uniforms = {
 
 				color:     { type: "c", value: new THREE.Color( 0xffffff ) },
@@ -115,7 +108,6 @@
 			var shaderMaterial = new THREE.ShaderMaterial( {
 
 				uniforms:       uniforms,
-				attributes:     attributes,
 				vertexShader:   document.getElementById( 'vertexshader' ).textContent,
 				fragmentShader: document.getElementById( 'fragmentshader' ).textContent,
 

examples/webgl_buffergeometry_instancing.html

@@ -57,8 +57,8 @@
 
         uniform float sineTime;
 
-        uniform mat4 modelViewMatrix; 
-        uniform mat4 projectionMatrix; 
+        uniform mat4 modelViewMatrix;
+        uniform mat4 projectionMatrix;
 
         attribute vec3 position;
         attribute vec3 offset;
@@ -202,8 +202,7 @@
                 vertexShader: document.getElementById( 'vertexShader' ).textContent,
                 fragmentShader: document.getElementById( 'fragmentShader' ).textContent,
                 side: THREE.DoubleSide,
-                transparent: true,
-                attributes: { 'position': 0, 'offset': 1, 'color': 2, 'orientationStart': 3, 'orientationEnd': 4 }
+                transparent: true
 
             } );
 
@@ -273,4 +272,4 @@
 
 </body>
 
-</html>
+</html>

examples/webgl_buffergeometry_instancing_billboards.html

@@ -95,7 +95,7 @@
 			vec4 diffuseColor = texture2D( map, vUv );
 			gl_FragColor = vec4( diffuseColor.xyz * vColor, diffuseColor.w );
 
-			if ( diffuseColor.w < 0.5 ) discard; 
+			if ( diffuseColor.w < 0.5 ) discard;
 
 		}
 	</script>
@@ -170,8 +170,7 @@
 				vertexShader: document.getElementById( 'vshader' ).textContent,
 				fragmentShader: document.getElementById( 'fshader' ).textContent,
 				depthTest: true,
-				depthWrite: true,
-				attributes: { 'translateScale': 1, 'color': 2 }
+				depthWrite: true
 
 			} );
 

examples/webgl_buffergeometry_instancing_dynamic.html

@@ -251,8 +251,7 @@
                 vertexShader: document.getElementById( 'vertexShader' ).textContent,
                 fragmentShader: document.getElementById( 'fragmentShader' ).textContent,
                 side: THREE.DoubleSide,
-                transparent: false,
-                attributes: { 'position': 0, 'offset': 1, 'orientation': 2, 'uv': 3 }
+                transparent: false
 
             } );
 

examples/webgl_buffergeometry_instancing_interleaved_dynamic.html

@@ -222,8 +222,7 @@
             vertexShader: document.getElementById( 'vertexShader' ).textContent,
             fragmentShader: document.getElementById( 'fragmentShader' ).textContent,
             side: THREE.DoubleSide,
-            transparent: false,
-            attributes: { 'position': 0, 'offset': 1, 'orientation': 2, 'uv': 3 }
+            transparent: false
 
         } );
 

examples/webgl_buffergeometry_rawshader.html

@@ -140,7 +140,6 @@
 					uniforms: {
 						time: { type: "f", value: 1.0 }
 					},
-					attributes: [ 'position', 'color' ],
 					vertexShader: document.getElementById( 'vertexShader' ).textContent,
 					fragmentShader: document.getElementById( 'fragmentShader' ).textContent,
 					side: THREE.DoubleSide,

examples/webgl_custom_attributes.html

@@ -115,7 +115,6 @@
 			var shaderMaterial = new THREE.ShaderMaterial( {
 
 				uniforms: uniforms,
-				attributes: [ 'displacement' ],
 				vertexShader:document.getElementById( 'vertexshader' ).textContent,
 				fragmentShader: document.getElementById( 'fragmentshader' ).textContent
 

examples/webgl_custom_attributes_lines.html

@@ -104,7 +104,6 @@
 			var shaderMaterial = new THREE.ShaderMaterial( {
 
 				uniforms:       uniforms,
-				attributes:     [ 'displacement', 'customColor' ],
 				vertexShader:   document.getElementById( 'vertexshader' ).textContent,
 				fragmentShader: document.getElementById( 'fragmentshader' ).textContent,
 				blending:       THREE.AdditiveBlending,

examples/webgl_custom_attributes_particles.html

@@ -82,7 +82,7 @@
 
 		var renderer, scene, camera, stats;
 
-		var sphere, uniforms, attributes;
+		var sphere;
 
 		var noise = [];
 
@@ -99,70 +99,69 @@
 
 			scene = new THREE.Scene();
 
-			attributes = {
-
-				size: {	type: 'f', value: [] },
-				customColor: { type: 'c', value: [] }
-
-			};
-
-			uniforms = {
+			var amount = 100000;
+			var radius = 200;
 
-				amplitude: { type: "f", value: 1.0 },
-				color:     { type: "c", value: new THREE.Color( 0xffffff ) },
-				texture:   { type: "t", value: THREE.ImageUtils.loadTexture( "textures/sprites/spark1.png" ) },
+			var positions = new Float32Array( amount * 3 );
+			var colors = new Float32Array( amount * 3 );
+			var sizes = new Float32Array( amount );
 
-			};
+			var vertex = new THREE.Vector3();
+			var color = new THREE.Color( 0xffffff );
 
-			var shaderMaterial = new THREE.ShaderMaterial( {
+			for ( var i = 0; i < amount; i ++ ) {
 
-				uniforms:       uniforms,
-				attributes:     attributes,
-				vertexShader:   document.getElementById( 'vertexshader' ).textContent,
-				fragmentShader: document.getElementById( 'fragmentshader' ).textContent,
+				vertex.x = ( Math.random() * 2 - 1 ) * radius;
+				vertex.y = ( Math.random() * 2 - 1 ) * radius;
+				vertex.z = ( Math.random() * 2 - 1 ) * radius;
+				vertex.toArray( positions, i * 3 );
 
-				blending:       THREE.AdditiveBlending,
-				depthTest:      false,
-				transparent:    true
+				if ( vertex.x < 0 ) {
 
-			});
+					color.setHSL( 0.5 + 0.1 * ( i / amount ), 0.7, 0.5 );
 
+				} else {
 
-			var radius = 200;
-			var geometry = new THREE.Geometry();
+					color.setHSL( 0.0 + 0.1 * ( i / amount ), 0.9, 0.5 );
 
-			for ( var i = 0; i < 100000; i ++ ) {
+				}
 
-				var vertex = new THREE.Vector3();
-				vertex.x = Math.random() * 2 - 1;
-				vertex.y = Math.random() * 2 - 1;
-				vertex.z = Math.random() * 2 - 1;
-				vertex.multiplyScalar( radius );
+				color.toArray( colors, i * 3 );
 
-				geometry.vertices.push( vertex );
+				sizes[ i ] = 10;
 
 			}
 
-			sphere = new THREE.PointCloud( geometry, shaderMaterial );
+			var geometry = new THREE.BufferGeometry();
+			geometry.addAttribute( 'position', new THREE.BufferAttribute( positions, 3 ) );
+			geometry.addAttribute( 'customColor', new THREE.BufferAttribute( colors, 3 ) );
+			geometry.addAttribute( 'size', new THREE.BufferAttribute( sizes, 1 ) );
+
+			//
 
-			var vertices = sphere.geometry.vertices;
-			var values_size = attributes.size.value;
-			var values_color = attributes.customColor.value;
+			var material = new THREE.ShaderMaterial( {
 
-			for ( var v = 0; v < vertices.length; v++ ) {
+				uniforms: {
+					amplitude: { type: "f", value: 1.0 },
+					color:     { type: "c", value: new THREE.Color( 0xffffff ) },
+					texture:   { type: "t", value: THREE.ImageUtils.loadTexture( "textures/sprites/spark1.png" ) }
+				},
+				vertexShader:   document.getElementById( 'vertexshader' ).textContent,
+				fragmentShader: document.getElementById( 'fragmentshader' ).textContent,
 
-				values_size[ v ] = 10;
-				values_color[ v ] = new THREE.Color( 0xffaa00 );
+				blending:       THREE.AdditiveBlending,
+				depthTest:      false,
+				transparent:    true
 
-				if ( vertices[ v ].x < 0 )
-					values_color[ v ].setHSL( 0.5 + 0.1 * ( v / vertices.length ), 0.7, 0.5 );
-				else
-					values_color[ v ].setHSL( 0.0 + 0.1 * ( v / vertices.length ), 0.9, 0.5 );
+			});
 
-			}
+			//
 
+			sphere = new THREE.PointCloud( geometry, material );
 			scene.add( sphere );
 
+			//
+
 			renderer = new THREE.WebGLRenderer();
 			renderer.setPixelRatio( window.devicePixelRatio );
 			renderer.setSize( WIDTH, HEIGHT );
@@ -205,10 +204,12 @@
 
 			sphere.rotation.z = 0.01 * time;
 
-			for( var i = 0; i < attributes.size.value.length; i++ ) {
+			var geometry = sphere.geometry;
+			var attributes = geometry.attributes;
 
-				attributes.size.value[ i ] = 14 + 13 * Math.sin( 0.1 * i + time );
+			for ( var i = 0; i < attributes.size.array.length; i++ ) {
 
+				attributes.size.array[ i ] = 14 + 13 * Math.sin( 0.1 * i + time );
 
 			}
 
@@ -218,7 +219,6 @@
 
 		}
 
-
 	</script>
 
 </body>

examples/webgl_custom_attributes_particles2.html

@@ -77,16 +77,12 @@
 
 		</script>
 
-
 		<script>
 
 		if ( ! Detector.webgl ) Detector.addGetWebGLMessage();
 
 		var renderer, scene, camera, stats;
-
-		var sphere, uniforms, attributes;
-
-		var vc1;
+		var sphere, vertices1;
 
 		var WIDTH = window.innerWidth;
 		var HEIGHT = window.innerHeight;
@@ -101,68 +97,74 @@
 
 			scene = new THREE.Scene();
 
-			attributes = {
+			var radius = 100, segments = 68, rings = 38;
 
-				size: {	type: 'f', value: [] },
-				ca:   {	type: 'c', value: [] }
+			var geometry1 = new THREE.SphereGeometry( radius, segments, rings );
+			var geometry2 = new THREE.BoxGeometry( 0.8 * radius, 0.8 * radius, 0.8 * radius, 10, 10, 10 );
 
-			};
+			vertices1 = geometry1.vertices.length;
 
-			uniforms = {
+			var vertices = geometry1.vertices.concat( geometry2.vertices );
 
-				amplitude: { type: "f", value: 1.0 },
-				color:     { type: "c", value: new THREE.Color( 0xffffff ) },
-				texture:   { type: "t", value: THREE.ImageUtils.loadTexture( "textures/sprites/disc.png" ) },
+			var positions = new Float32Array( vertices.length * 3 );
+			var colors = new Float32Array( vertices.length * 3 );
+			var sizes = new Float32Array( vertices.length );
 
-			};
+			var vertex;
+			var color = new THREE.Color();
 
-			uniforms.texture.value.wrapS = uniforms.texture.value.wrapT = THREE.RepeatWrapping;
+			for ( var i = 0, l = vertices.length; i < l; i ++ ) {
 
-			var shaderMaterial = new THREE.ShaderMaterial( {
+				vertex = vertices[ i ];
+				vertex.toArray( positions, i * 3 );
 
-				uniforms:       uniforms,
-				attributes:     attributes,
-				vertexShader:   document.getElementById( 'vertexshader' ).textContent,
-				fragmentShader: document.getElementById( 'fragmentshader' ).textContent,
-				transparent:    true
-
-			});
+				if ( i < vertices1 ) {
 
+					color.setHSL( 0.01 + 0.1 * ( i / vertices1 ), 0.99, ( vertex.y + radius ) / ( 4 * radius ) );
 
-			var radius = 100, segments = 68, rings = 38;
-			var geometry = new THREE.SphereGeometry( radius, segments, rings );
+				} else {
 
-			vc1 = geometry.vertices.length;
+					color.setHSL( 0.6, 0.75, 0.25 + vertex.y / ( 2 * radius ) );
 
-			var geometry2 = new THREE.BoxGeometry( 0.8 * radius, 0.8 * radius, 0.8 * radius, 10, 10, 10 );
-			geometry.merge( geometry2 );
+				}
 
-			sphere = new THREE.PointCloud( geometry, shaderMaterial );
+				color.toArray( colors, i * 3 );
 
-			var vertices = sphere.geometry.vertices;
-			var values_size = attributes.size.value;
-			var values_color = attributes.ca.value;
+				sizes[ i ] = i < vertices1 ? 10 : 40;
 
-			for ( var v = 0; v < vertices.length; v ++ ) {
+			}
 
-				values_size[ v ] = 10;
-				values_color[ v ] = new THREE.Color( 0xffffff );
+			var geometry = new THREE.BufferGeometry();
+			geometry.addAttribute( 'position', new THREE.BufferAttribute( positions, 3 ) );
+			geometry.addAttribute( 'size', new THREE.BufferAttribute( sizes, 1 ) );
+			geometry.addAttribute( 'ca', new THREE.BufferAttribute( colors, 3 ) );
 
-				if ( v < vc1 ) {
+			//
 
-					values_color[ v ].setHSL( 0.01 + 0.1 * ( v / vc1 ), 0.99, ( vertices[ v ].y + radius ) / ( 4 * radius ) );
+			var texture = THREE.ImageUtils.loadTexture( "textures/sprites/disc.png" );
+			texture.wrapS = THREE.RepeatWrapping;
+			texture.wrapT = THREE.RepeatWrapping;
 
-				} else {
+			var material = new THREE.ShaderMaterial( {
 
-					values_size[ v ] = 40;
-					values_color[ v ].setHSL( 0.6, 0.75, 0.25 + vertices[ v ].y / ( 2 * radius ) );
+				uniforms: {
+					amplitude: { type: "f", value: 1.0 },
+					color:     { type: "c", value: new THREE.Color( 0xffffff ) },
+					texture:   { type: "t", value: texture }
+				},
+				vertexShader:   document.getElementById( 'vertexshader' ).textContent,
+				fragmentShader: document.getElementById( 'fragmentshader' ).textContent,
+				transparent:    true
 
-				}
+			});
 
-			}
+			//
 
+			sphere = new THREE.PointCloud( geometry, material );
 			scene.add( sphere );
 
+			//
+
 			renderer = new THREE.WebGLRenderer();
 			renderer.setPixelRatio( window.devicePixelRatio );
 			renderer.setSize( WIDTH, HEIGHT );
@@ -206,11 +208,16 @@
 			sphere.rotation.y = 0.02 * time;
 			sphere.rotation.z = 0.02 * time;
 
-			for( var i = 0; i < attributes.size.value.length; i ++ ) {
+			var geometry = sphere.geometry;
+			var attributes = geometry.attributes;
+
+			for ( var i = 0; i < attributes.size.array.length; i ++ ) {
 
-				if ( i < vc1 )
-					attributes.size.value[ i ] = 16 + 12 * Math.sin( 0.1 * i + time );
+				if ( i < vertices1 ) {
 
+					attributes.size.array[ i ] = 16 + 12 * Math.sin( 0.1 * i + time );
+
+				}
 
 			}
 
@@ -220,7 +227,6 @@
 
 		}
 
-
 	</script>
 
 </body>

examples/webgl_custom_attributes_particles3.html

@@ -28,7 +28,7 @@
 	</head>
 
 	<body>
-		<div id="info"><a href="http://threejs.org" target="_blank">three.js</a> - custom attributes example - particles - billboards - alphatest</div>
+		<div id="info"><a href="http://threejs.org" target="_blank">three.js</a> - custom attributes example - billboards - alphatest</div>
 		<div id="container"></div>
 
 		<script src="../build/three.min.js"></script>
@@ -91,7 +91,7 @@
 
 		var object, uniforms, attributes;
 
-		var vc1;
+		var vertices1;
 
 		var WIDTH = window.innerWidth;
 		var HEIGHT = window.innerHeight;
@@ -106,35 +106,8 @@
 
 			scene = new THREE.Scene();
 
-			attributes = {
-
-				size: {	type: 'f', value: [] },
-				ca:   {	type: 'c', value: [] }
-
-			};
-
-			uniforms = {
-
-				amplitude: { type: "f", value: 1.0 },
-				color:     { type: "c", value: new THREE.Color( 0xffffff ) },
-				texture:   { type: "t", value: THREE.ImageUtils.loadTexture( "textures/sprites/ball.png" ) },
-
-			};
-
-			uniforms.texture.value.wrapS = uniforms.texture.value.wrapT = THREE.RepeatWrapping;
-
-			var shaderMaterial = new THREE.ShaderMaterial( {
-
-				uniforms:       uniforms,
-				attributes:     attributes,
-				vertexShader:   document.getElementById( 'vertexshader' ).textContent,
-				fragmentShader: document.getElementById( 'fragmentshader' ).textContent
-
-			});
-
-
 			var radius = 100, inner = 0.6 * radius;
-			var geometry = new THREE.Geometry();
+			var vertices = [];
 
 			for ( var i = 0; i < 100000; i ++ ) {
 
@@ -148,23 +121,34 @@
 				     ( vertex.y > inner || vertex.y < -inner ) ||
 				     ( vertex.z > inner || vertex.z < -inner )  )
 
-				geometry.vertices.push( vertex );
+				vertices.push( vertex );
 
 			}
 
-			vc1 = geometry.vertices.length;
+			vertices1 = vertices.length;
 
 			radius = 200;
 			var geometry2 = new THREE.BoxGeometry( radius, 0.1 * radius, 0.1 * radius, 50, 5, 5 );
 
+			var matrix = new THREE.Matrix4();
+			var position = new THREE.Vector3();
+			var rotation = new THREE.Euler();
+			var quaternion = new THREE.Quaternion();
+			var scale = new THREE.Vector3( 1, 1, 1 );
+
 			function addGeo( geo, x, y, z, ry ) {
 
-				var mesh = new THREE.Mesh( geo );
-				mesh.position.set( x, y, z );
-				mesh.rotation.y = ry;
-				mesh.updateMatrix();
+				position.set( x, y, z );
+				rotation.set( 0, ry, 0 );
+
+				matrix.compose( position, quaternion.setFromEuler( rotation ), scale );
 
-				geometry.merge( mesh.geometry, mesh.matrix );
+				for ( var i = 0, l = geo.vertices.length; i < l; i ++ ) {
+
+					var vertex = geo.vertices[ i ];
+					vertices.push( vertex.clone().applyMatrix4( matrix ) );
+
+				}
 
 			}
 
@@ -191,39 +175,64 @@
 			addGeo( geometry3, -110, 0,  110, 0 );
 			addGeo( geometry3, -110, 0, -110, 0 );
 
-			// particle system
-
-			object = new THREE.PointCloud( geometry, shaderMaterial );
-
-			// custom attributes
+			var positions = new Float32Array( vertices.length * 3 );
+			var colors = new Float32Array( vertices.length * 3 );
+			var sizes = new Float32Array( vertices.length );
 
-			var vertices = object.geometry.vertices;
+			var vertex;
+			var color = new THREE.Color();
 
-			var values_size = attributes.size.value;
-			var values_color = attributes.ca.value;
+			for ( var i = 0; i < vertices.length; i ++ ) {
 
-			for ( var v = 0; v < vertices.length; v ++ ) {
+				vertex = vertices[ i ];
+				vertex.toArray( positions, i * 3 );
 
-				values_size[ v ] = 10;
-				values_color[ v ] = new THREE.Color( 0xffffff );
+				if ( i < vertices1 ) {
 
-				if ( v < vc1 ) {
-
-					values_color[ v ].setHSL( 0.5 + 0.2 * ( v / vc1 ), 1, 0.5 );
+					color.setHSL( 0.5 + 0.2 * ( i / vertices1 ), 1, 0.5 );
 
 				} else {
 
-					values_size[ v ] = 55;
-					values_color[ v ].setHSL( 0.1, 1, 0.5 );
+					color.setHSL( 0.1, 1, 0.5 );
 
 				}
 
+				color.toArray( colors, i * 3 );
+
+				sizes[ i ] = i < vertices1 ? 10 : 40;
+
 			}
 
-			//console.log( vertices.length );
+			var geometry = new THREE.BufferGeometry();
+			geometry.addAttribute( 'position', new THREE.BufferAttribute( positions, 3 ) );
+			geometry.addAttribute( 'ca', new THREE.BufferAttribute( colors, 3 ) );
+			geometry.addAttribute( 'size', new THREE.BufferAttribute( sizes, 1 ) );
+
+			//
+
+			var texture = THREE.ImageUtils.loadTexture( "textures/sprites/ball.png" );
+			texture.wrapS = THREE.RepeatWrapping;
+			texture.wrapT = THREE.RepeatWrapping;
+
+			var material = new THREE.ShaderMaterial( {
+
+				uniforms: {
+					amplitude: { type: "f", value: 1.0 },
+					color:     { type: "c", value: new THREE.Color( 0xffffff ) },
+					texture:   { type: "t", value: texture },
+				},
+				vertexShader:   document.getElementById( 'vertexshader' ).textContent,
+				fragmentShader: document.getElementById( 'fragmentshader' ).textContent
+
+			});
 
+			//
+
+			object = new THREE.PointCloud( geometry, material );
 			scene.add( object );
 
+			//
+
 			renderer = new THREE.WebGLRenderer();
 			renderer.setPixelRatio( window.devicePixelRatio );
 			renderer.setSize( WIDTH, HEIGHT );
@@ -266,11 +275,16 @@
 
 			object.rotation.y = object.rotation.z = 0.02 * time;
 
-			for( var i = 0; i < attributes.size.value.length; i ++ ) {
+			var geometry = object.geometry;
+			var attributes = geometry.attributes;
+
+			for ( var i = 0; i < attributes.size.array.length; i ++ ) {
 
-				if ( i < vc1 )
-					attributes.size.value[ i ] = Math.max(0, 26 + 32 * Math.sin( 0.1 * i + 0.6 * time ));
+				if ( i < vertices1 ) {
 
+					attributes.size.array[ i ] = Math.max(0, 26 + 32 * Math.sin( 0.1 * i + 0.6 * time ));
+
+				}
 
 			}
 
@@ -280,7 +294,6 @@
 
 		}
 
-
 	</script>
 
 </body>

examples/webgl_gpgpu_birds.html

@@ -563,39 +563,25 @@
 
 				var geometry = new THREE.BirdGeometry();
 
-				// For Vertex Shaders
-				birdAttributes = {
-					// index: { type: 'i', value: [] },
-					birdColor: { type: 'c', value: null },
-					reference: { type: 'v2', value: null },
-					birdVertex: { type: 'f', value: null }
-				};
-
 				// For Vertex and Fragment
 				birdUniforms = {
-
 					color: { type: "c", value: new THREE.Color( 0xff2200 ) },
 					texturePosition: { type: "t", value: null },
 					textureVelocity: { type: "t", value: null },
 					time: { type: "f", value: 1.0 },
-					delta: { type: "f", value: 0.0 },
-
+					delta: { type: "f", value: 0.0 }
 				};
 
 				// ShaderMaterial
-				var shaderMaterial = new THREE.ShaderMaterial( {
-
-					uniforms: 		birdUniforms,
-					attributes:     birdAttributes,
+				var material = new THREE.ShaderMaterial( {
+					uniforms:       birdUniforms,
 					vertexShader:   document.getElementById( 'birdVS' ).textContent,
 					fragmentShader: document.getElementById( 'birdFS' ).textContent,
 					side: THREE.DoubleSide
 
 				});
 
-
-				// var
-				birdMesh = new THREE.Mesh( geometry, shaderMaterial );
+				birdMesh = new THREE.Mesh( geometry, material );
 				birdMesh.rotation.y = Math.PI / 2;
 				birdMesh.matrixAutoUpdate = false;
 				birdMesh.updateMatrix();

examples/webgl_interactive_particles.html

@@ -83,7 +83,7 @@
 
 			var renderer, scene, camera, stats;
 
-			var particles, uniforms, attributes;
+			var particles, uniforms;
 
 			var PARTICLE_SIZE = 20;
 
@@ -104,48 +104,51 @@
 
 				//
 
-				attributes = {
+				var geometry1 = new THREE.BoxGeometry( 200, 200, 200, 16, 16, 16 );
+				var vertices = geometry1.vertices;
 
-					size:        { type: 'f', value: [] },
-					customColor: { type: 'c', value: [] }
+				var positions = new Float32Array( vertices.length * 3 );
+				var colors = new Float32Array( vertices.length * 3 );
+				var sizes = new Float32Array( vertices.length );
 
-				};
+				var vertex;
+				var color = new THREE.Color();
 
-				uniforms = {
+				for ( var i = 0, l = vertices.length; i < l; i ++ ) {
 
-					color:   { type: "c", value: new THREE.Color( 0xffffff ) },
-					texture: { type: "t", value: THREE.ImageUtils.loadTexture( "textures/sprites/disc.png" ) }
+					vertex = vertices[ i ];
+					vertex.toArray( positions, i * 3 );
 
-				};
+					color.setHSL( 0.01 + 0.1 * ( i / l ), 1.0, 0.5 )
+					color.toArray( colors, i * 3 );
 
-				var shaderMaterial = new THREE.ShaderMaterial( {
+					sizes[ i ] = PARTICLE_SIZE * 0.5;
 
-					uniforms: uniforms,
-					attributes: attributes,
-					vertexShader: document.getElementById( 'vertexshader' ).textContent,
-					fragmentShader: document.getElementById( 'fragmentshader' ).textContent,
-
-					alphaTest: 0.9,
-
-				} );
-
-				var geometry = new THREE.BoxGeometry( 200, 200, 200, 16, 16, 16 );
+				}
 
-				particles = new THREE.PointCloud( geometry, shaderMaterial );
+				var geometry = new THREE.BufferGeometry();
+				geometry.addAttribute( 'position', new THREE.BufferAttribute( positions, 3 ) );
+				geometry.addAttribute( 'customColor', new THREE.BufferAttribute( colors, 3 ) );
+				geometry.addAttribute( 'size', new THREE.BufferAttribute( sizes, 1 ) );
 
-				var values_size = attributes.size.value;
-				var values_color = attributes.customColor.value;
+				//
 
-				var vertices = particles.geometry.vertices;
+				var material = new THREE.ShaderMaterial( {
 
-				for( var v = 0,  vl = vertices.length; v < vl; v++ ) {
+					uniforms: {
+						color:   { type: "c", value: new THREE.Color( 0xffffff ) },
+						texture: { type: "t", value: THREE.ImageUtils.loadTexture( "textures/sprites/disc.png" ) }
+					},
+					vertexShader: document.getElementById( 'vertexshader' ).textContent,
+					fragmentShader: document.getElementById( 'fragmentshader' ).textContent,
 
-					values_size[ v ] = PARTICLE_SIZE * 0.5;
+					alphaTest: 0.9,
 
-					values_color[ v ] = new THREE.Color().setHSL( 0.01 + 0.1 * ( v / vl ), 1.0, 0.5 );
+				} );
 
-				}
+				//
 
+				particles = new THREE.PointCloud( geometry, material );
 				scene.add( particles );
 
 				//
@@ -206,6 +209,9 @@
 				particles.rotation.x += 0.0005;
 				particles.rotation.y += 0.001;
 
+				var geometry = particles.geometry;
+				var attributes = geometry.attributes;
+
 				raycaster.setFromCamera( mouse, camera );
 
 				intersects = raycaster.intersectObject( particles );
@@ -214,18 +220,18 @@
 
 					if ( INTERSECTED != intersects[ 0 ].index ) {
 
-						attributes.size.value[ INTERSECTED ] = PARTICLE_SIZE;
+						attributes.size.array[ INTERSECTED ] = PARTICLE_SIZE;
 
 						INTERSECTED = intersects[ 0 ].index;
 
-						attributes.size.value[ INTERSECTED ] = PARTICLE_SIZE * 1.25;
+						attributes.size.array[ INTERSECTED ] = PARTICLE_SIZE * 1.25;
 						attributes.size.needsUpdate = true;
 
 					}
 
 				} else if ( INTERSECTED !== null ) {
 
-					attributes.size.value[ INTERSECTED ] = PARTICLE_SIZE;
+					attributes.size.array[ INTERSECTED ] = PARTICLE_SIZE;
 					attributes.size.needsUpdate = true;
 					INTERSECTED = null;
 

examples/webgl_nearestneighbour.html

@@ -25,24 +25,24 @@
 		</style>
 	</head>
 	<body>
-		
+
 		<div id="info"><a href="http://threejs.org" target="_blank">three.js</a> webgl - typed arrays - nearest neighbour for 500,000 sprites</div>
-		
+
 		<script src="../build/three.min.js"></script>
 		<script src="js/TypedArrayUtils.js"></script>
 		<script src="js/controls/FirstPersonControls.js"></script>
 		<script type="x-shader/x-vertex" id="vertexshader">
-			
+
 			//uniform float zoom;
-		
+
 			attribute float alpha;
 
 			varying float vAlpha;
 
 			void main() {
-			
+
 				vAlpha = 1.0 - alpha;
-				
+
 				vec4 mvPosition = modelViewMatrix * vec4( position, 1.0 );
 
 				gl_PointSize = 4.0 * ( 300.0 / length( mvPosition.xyz ) );
@@ -67,8 +67,8 @@
 			}
 
 		</script>
-		<script>		
-		
+		<script>
+
 			var camera, scene, renderer;
 			var geometry, mesh;
 			var controls;
@@ -82,11 +82,11 @@
 
 			var blocker = document.getElementById( 'blocker' );
 			var instructions = document.getElementById( 'instructions' );
-			
-			
+
+
 			function init() {
 
-			    camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 1, 1000000);
+				camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 1, 1000000);
 
 				scene = new THREE.Scene();
 
@@ -108,7 +108,7 @@
 				mesh = new THREE.Mesh( new THREE.BoxGeometry( 10000, 10000, 10000, 7, 7, 7 ), new THREE.MeshFaceMaterial( materials ) );
 				mesh.scale.x = - 1;
 				scene.add(mesh);
-				
+
 				//
 
 				renderer = new THREE.WebGLRenderer(); // Detector.webgl? new THREE.WebGLRenderer(): new THREE.CanvasRenderer()
@@ -120,21 +120,18 @@
 				var imagePreviewTexture = THREE.ImageUtils.loadTexture( 'textures/crate.gif');
 				imagePreviewTexture.minFilter = THREE.LinearMipMapLinearFilter;
 				imagePreviewTexture.magFilter = THREE.LinearFilter;
-				
+
 				pointShaderMaterial = new THREE.ShaderMaterial( {
 					uniforms: {
 						tex1: { type: "t", value: imagePreviewTexture },
 						zoom: { type: 'f', value: 9.0 },
 					},
-					attributes: {
-						alpha: { type: 'f', value: null },
-					},
 					vertexShader:   document.getElementById( 'vertexshader' ).textContent,
 					fragmentShader: document.getElementById( 'fragmentshader' ).textContent,
 					transparent: true
 				});
-				
-				
+
+
 				//create particles with buffer geometry
 				var distanceFunction = function(a, b){
 					return Math.pow(a[0] - b[0], 2) +  Math.pow(a[1] - b[1], 2) +  Math.pow(a[2] - b[2], 2);
@@ -142,28 +139,28 @@
 
 				positions = new Float32Array( amountOfParticles * 3 );
 				alphas = new Float32Array( amountOfParticles );
-				
+
 				_particleGeom = new THREE.BufferGeometry();
 				_particleGeom.addAttribute( 'position', new THREE.BufferAttribute( positions, 3 ) );
 				_particleGeom.addAttribute( 'alpha', new THREE.BufferAttribute( alphas, 1 ) );
-				
+
 				particles = new THREE.PointCloud( _particleGeom, pointShaderMaterial );
-				
+
 				for (var x = 0; x < amountOfParticles; x++) {
 					positions[ x * 3 + 0 ] = Math.random() * 1000;
 					positions[ x * 3 + 1 ] = Math.random() * 1000;
 					positions[ x * 3 + 2 ] = Math.random() * 1000;
 					alphas[x] = 1.0;
 				}
-				
-				
+
+
 				var measureStart = new Date().getTime();
-				
+
 				// creating the kdtree takes a lot of time to execute, in turn the nearest neighbour search will be much faster
 				kdtree = new THREE.TypedArrayUtils.Kdtree( positions, distanceFunction, 3 );
-				
+
 				console.log('TIME building kdtree', new Date().getTime() - measureStart);
-				
+
 				// display particles after the kd-tree was generated and the sorting of the positions-array is done
 				scene.add(particles);
 
@@ -193,12 +190,12 @@
 				renderer.render( scene, camera );
 
 			}
-			
+
 			function displayNearest(position) {
-				
+
 				// take the nearest 200 around him. distance^2 'cause we use the manhattan distance and no square is applied in the distance function
 				var imagePositionsInRange = kdtree.nearest([position.x, position.y, position.z], 100, maxDistance);
-								
+
 				// We combine the nearest neighbour with a view frustum. Doesn't make sense if we change the sprites not in our view... well maybe it does. Whatever you want.
 				var _frustum = new THREE.Frustum();
 				var _projScreenMatrix = new THREE.Matrix4();
@@ -206,15 +203,15 @@
 
 				_projScreenMatrix.multiplyMatrices( camera.projectionMatrix, camera.matrixWorldInverse );
 				_frustum.setFromMatrix( _projScreenMatrix );
-				
+
 				for ( i = 0, il = imagePositionsInRange.length; i < il; i ++ ) {
 					var object = imagePositionsInRange[i];
 					var objectPoint = new THREE.Vector3().fromArray( object[ 0 ].obj );
-					
+
 					if (_frustum.containsPoint(objectPoint)){
-					
+
 						var objectIndex = object[0].pos;
-						
+
 						// set the alpha according to distance
 						alphas[ objectIndex ] = 1.0 / maxDistance * object[1];
 						// update the attribute
@@ -222,8 +219,8 @@
 					}
 				}
 			}
-			
-			
+
+
 			init();
 			animate();
 		</script>