Adding custom BufferGeometry attributes support to WebGLRenderer2.

src/renderers/WebGLRenderer.js

@@ -268,19 +268,19 @@ THREE.WebGLRenderer = function ( parameters ) {
 		return _glExtensionTextureFloat;
 
 	};
-	
+
 	this.supportsStandardDerivatives = function () {
 
 		return _glExtensionStandardDerivatives;
 
 	};
-	
+
 	this.supportsCompressedTextureS3TC = function () {
 
 		return _glExtensionCompressedTextureS3TC;
 
 	};
-	
+
 	this.getMaxAnisotropy  = function () {
 
 		return _maxAnisotropy;
@@ -3487,8 +3487,6 @@ THREE.WebGLRenderer = function ( parameters ) {
 
 				if ( updateBuffers ) {
 
-					var attributeItem, attributeName, attributePointer;
-
 					for ( attributeName in geometryAttributes ) {
 
 						if ( attributeName === 'index') continue;
@@ -3529,8 +3527,6 @@ THREE.WebGLRenderer = function ( parameters ) {
 
 				for ( attributeName in geometryAttributes ) {
 
-					if ( attributeName === 'index') continue;
-
 					attributePointer = programAttributes[ attributeName ];
 					attributeItem = geometryAttributes[ attributeName ];
 					attributeSize = attributeItem.itemSize;
@@ -3562,8 +3558,6 @@ THREE.WebGLRenderer = function ( parameters ) {
 
 				for ( attributeName in geometryAttributes ) {
 
-					if ( attributeName === 'index') continue;
-
 					attributePointer = programAttributes[ attributeName ];
 					attributeItem = geometryAttributes[ attributeName ];
 					attributeSize = attributeItem.itemSize;
@@ -3591,7 +3585,7 @@ THREE.WebGLRenderer = function ( parameters ) {
 
 			}
 
-    }
+    	}
 
 	};
 
@@ -7380,17 +7374,17 @@ THREE.WebGLRenderer = function ( parameters ) {
 			console.log( 'THREE.WebGLRenderer: S3TC compressed textures not supported.' );
 
 		}
-		
+
 		if ( _gl.getShaderPrecisionFormat === undefined ) {
-			
-			_gl.getShaderPrecisionFormat = function() { 
-				
+
+			_gl.getShaderPrecisionFormat = function() {
+
 				return {
 					"rangeMin"  : 1,
 					"rangeMax"  : 1,
 					"precision" : 1
 				};
-				
+
 			}
 		}
 

src/renderers/WebGLRenderer2.js

@@ -105,7 +105,7 @@ THREE.WebGLRenderer = function ( parameters ) {
 
 	_usedTextureUnits = 0,
 
-	// GL state 
+	// GL state
 
 	_viewportX = 0,
 	_viewportY = 0,
@@ -601,7 +601,7 @@ THREE.WebGLRenderer = function ( parameters ) {
 				}
 
 			}
-			
+
 			renderer.setDynamicArrayBuffer( object.__webglNormalBuffer, object.normalArray);
 			renderer.setFloatAttribute(program.attributes.normal, object.__webglNormalBuffer, 3, 0);
 
@@ -630,11 +630,13 @@ THREE.WebGLRenderer = function ( parameters ) {
 
 		if ( material.visible === false ) return;
 
-		var program, attributes, linewidth, primitives, a, attribute;
+		var program, programAttributes, linewidth, primitives, a, attribute, geometryAttributes;
+		var attributeItem, attributeName, attributePointer;
 
 		program = setProgram( camera, lights, fog, material, object );
 
-		attributes = program.attributes;
+		programAttributes = program.attributes;
+		geometryAttributes = geometry.attributes;
 
 		var updateBuffers = false,
 			wireframeBit = material.wireframe ? 1 : 0,
@@ -657,7 +659,7 @@ THREE.WebGLRenderer = function ( parameters ) {
 
 		if ( object instanceof THREE.Mesh ) {
 
-			var index = geometry.attributes[ "index" ];
+			var index = geometryAttributes[ "index" ];
 
 			// indexed triangles
 
@@ -677,60 +679,25 @@ THREE.WebGLRenderer = function ( parameters ) {
 
 					if ( updateBuffers ) {
 
-						// vertices
-
-						var position = geometry.attributes[ "position" ];
-						var positionSize = position.itemSize;
-						renderer.setFloatAttribute(attributes.position , position.buffer, positionSize, startIndex * positionSize * 4);
-
-						// normals
-
-						var normal = geometry.attributes[ "normal" ];
-
-						if ( attributes.normal >= 0 && normal ) {
-
-							var normalSize = normal.itemSize;
-							renderer.setFloatAttribute(attributes.normal , normal.buffer, normalSize, startIndex * normalSize * 4);
+						for ( attributeName in geometryAttributes ) {
 
-						}
-
-						// uvs
-
-						var uv = geometry.attributes[ "uv" ];
-
-						if ( attributes.uv >= 0 && uv ) {
-
-							var uvSize = uv.itemSize;
-							renderer.setFloatAttribute(attributes.uv , uv.buffer, uvSize, startIndex * uvSize * 4);
-
-						}
+							if ( attributeName === 'index' ) continue;
 
-						// colors
+							attributePointer = programAttributes[ attributeName ];
+							attributeItem = geometryAttributes[ attributeName ];
+							attributeSize = attributeItem.itemSize;
 
-						var color = geometry.attributes[ "color" ];
+							if ( attributePointer >= 0 ) {
 
-						if ( attributes.color >= 0 && color ) {
+								renderer.setFloatAttribute( attributePointer , attributeItem.buffer, attributeSize, startIndex * attributeSize * 4 );
 
-							var colorSize = color.itemSize;
-							renderer.setFloatAttribute(attributes.color , color.buffer, colorSize, startIndex * colorSize * 4);
+							}
 
 						}
-
-						// tangents
-
-						var tangent = geometry.attributes[ "tangent" ];
-
-						if ( attributes.tangent >= 0 && tangent ) {
-
-							var tangentSize = tangent.itemSize;
-							renderer.setFloatAttribute(attributes.tangent , tangent.buffer, tangentSize, startIndex * tangentSize * 4);
-
-						}
-
 					}
 
 					// render indexed triangles
-					
+
 					renderer.drawTriangleElements(index.buffer, offsets[ i ].count, offsets[ i ].start * 2);
 
 					_this.info.render.calls ++;
@@ -745,59 +712,26 @@ THREE.WebGLRenderer = function ( parameters ) {
 
 				if ( updateBuffers ) {
 
-					// vertices
-
-					var position = geometry.attributes[ "position" ];
-					var positionSize = position.itemSize;
-					renderer.setFloatAttribute(attributes.position , position.buffer, positionSize, 0);
-
-					// normals
-
-					var normal = geometry.attributes[ "normal" ];
-
-					if ( attributes.normal >= 0 && normal ) {
-
-						var normalSize = normal.itemSize;
-						renderer.setFloatAttribute(attributes.normal , normal.buffer, normalSize, 0);
+					for ( attributeName in geometryAttributes ) {
 
-					}
-
-					// uvs
-
-					var uv = geometry.attributes[ "uv" ];
-
-					if ( attributes.uv >= 0 && uv ) {
-
-						var uvSize = uv.itemSize;
-						renderer.setFloatAttribute(attributes.uv , uv.buffer, uvSize, 0);
-
-					}
-
-					// colors
-
-					var color = geometry.attributes[ "color" ];
-
-					if ( attributes.color >= 0 && color ) {
-
-						var colorSize = color.itemSize;
-						renderer.setFloatAttribute(attributes.color , color.buffer, colorSize, 0);
-
-					}
-
-					// tangents
+						attributePointer = programAttributes[ attributeName ];
+						attributeItem = geometryAttributes[ attributeName ];
+						attributeSize = attributeItem.itemSize;
 
-					var tangent = geometry.attributes[ "tangent" ];
+						if ( attributePointer >= 0 ) {
 
-					if ( attributes.tangent >= 0 && tangent ) {
+							renderer.setFloatAttribute( attributePointer , attributeItem.buffer, attributeSize, 0 );
 
-						var tangentSize = tangent.itemSize;
-						renderer.setFloatAttribute(attributes.tangent , tangent.buffer, tangentSize, 0);
+						}
 
 					}
 
 				}
 
+				var position = geometry.attributes[ "position" ];
+
 				// render non-indexed triangles
+
 				renderer.drawTriangles( position.numItems / 3)
 
 				_this.info.render.calls ++;
@@ -812,23 +746,22 @@ THREE.WebGLRenderer = function ( parameters ) {
 
 			if ( updateBuffers ) {
 
-				// vertices
+				for ( attributeName in geometryAttributes ) {
 
-				var position = geometry.attributes[ "position" ];
-				var positionSize = position.itemSize;
-				renderer.setFloatAttribute(attributes.position , position.buffer, positionSize, 0);
-
-				// colors
+					attributePointer = programAttributes[ attributeName ];
+					attributeItem = geometryAttributes[ attributeName ];
+					attributeSize = attributeItem.itemSize;
 
-				var color = geometry.attributes[ "color" ];
+					if ( attributePointer >= 0 ) {
 
-				if ( attributes.color >= 0 && color ) {
+						renderer.setFloatAttribute( attributePointer , attributeItem.buffer, attributeSize, 0 );
 
-					var colorSize = color.itemSize;
-					renderer.setFloatAttribute(attributes.color , color.buffer, colorSize, 0);
+					}
 
 				}
 
+				var position = geometryAttributes[ "position" ];
+
 				// render particles
 				renderer.drawPoints(position.numItems / 3);
 
@@ -841,23 +774,22 @@ THREE.WebGLRenderer = function ( parameters ) {
 
 			if ( updateBuffers ) {
 
-				// vertices
-
-				var position = geometry.attributes[ "position" ];
-				var positionSize = position.itemSize;
-				renderer.setFloatAttribute(attributes.position , position.buffer, positionSize, 0);
+				for ( attributeName in geometryAttributes ) {
 
-				// colors
+					attributePointer = programAttributes[ attributeName ];
+					attributeItem = geometryAttributes[ attributeName ];
+					attributeSize = attributeItem.itemSize;
 
-				var color = geometry.attributes[ "color" ];
+					if ( attributePointer >= 0 ) {
 
-				if ( attributes.color >= 0 && color ) {
+						renderer.setFloatAttribute( attributePointer , attributeItem.buffer, attributeSize, 0 );
 
-					var colorSize = color.itemSize;
-					renderer.setFloatAttribute(attributes.color , color.buffer, colorSize, 0);
+					}
 
 				}
 
+				var position = geometryAttributes[ "position" ];
+
 				// render lines
 				renderer.setLineWidth( material.linewidth );
 				renderer.drawLineStrip(position.numItems / 3);
@@ -3109,7 +3041,7 @@ THREE.WebGLRenderer = function ( parameters ) {
 				if ( ! light.visible ) continue;
 
 				_direction.getPositionFromMatrix( light.matrixWorld );
-				_vector3.getPositionFromMatrix( light.target.matrixWorld );					
+				_vector3.getPositionFromMatrix( light.target.matrixWorld );
 				_direction.sub( _vector3 );
 				_direction.normalize();