Big refactoring of BufferGeometry and CTMLoader: moved GL buffers...

Big refactoring of BufferGeometry and CTMLoader: moved GL buffers initialization from loader into renderer, no more GL context dependency in loader.

BufferGeometry lifecycle now starts to resemble more regular Geometry one. Also this new architecture should make it easier to add more attributes.

build/custom/ThreeExtras.js

@@ -46,14 +46,13 @@ c+d;l=a[b++]*c;m=a[b++]*c+d;o=a[b++]*c;e.quadraticCurveTo(m,o,i,l);if(g=f[f.leng
 THREE.FontUtils.generateShapes=function(b,a){var a=a||{},c=a.curveSegments!==void 0?a.curveSegments:4,d=a.font!==void 0?a.font:"helvetiker",e=a.weight!==void 0?a.weight:"normal",f=a.style!==void 0?a.style:"normal";THREE.FontUtils.size=a.size!==void 0?a.size:100;THREE.FontUtils.divisions=c;THREE.FontUtils.face=d;THREE.FontUtils.weight=e;THREE.FontUtils.style=f;c=THREE.FontUtils.drawText(b).paths;d=[];e=0;for(f=c.length;e<f;e++)Array.prototype.push.apply(d,c[e].toShapes());return d};
 (function(b){var a=function(a){for(var b=a.length,e=0,f=b-1,g=0;g<b;f=g++)e=e+(a[f].x*a[g].y-a[g].x*a[f].y);return e*0.5};b.Triangulate=function(b,d){var e=b.length;if(e<3)return null;var f=[],g=[],h=[],i,j,l;if(a(b)>0)for(j=0;j<e;j++)g[j]=j;else for(j=0;j<e;j++)g[j]=e-1-j;var n=2*e;for(j=e-1;e>2;){if(n--<=0){console.log("Warning, unable to triangulate polygon!");break}i=j;e<=i&&(i=0);j=i+1;e<=j&&(j=0);l=j+1;e<=l&&(l=0);var k;a:{k=b;var m=i,o=j,p=l,r=e,s=g,t=void 0,v=void 0,q=void 0,x=void 0,z=void 0,
 A=void 0,w=void 0,u=void 0,C=void 0,v=k[s[m]].x,q=k[s[m]].y,x=k[s[o]].x,z=k[s[o]].y,A=k[s[p]].x,w=k[s[p]].y;if(1.0E-10>(x-v)*(w-q)-(z-q)*(A-v))k=false;else{for(t=0;t<r;t++)if(!(t==m||t==o||t==p)){var u=k[s[t]].x,C=k[s[t]].y,B=void 0,E=void 0,G=void 0,L=void 0,H=void 0,D=void 0,K=void 0,F=void 0,N=void 0,I=void 0,M=void 0,J=void 0,B=G=H=void 0,B=A-x,E=w-z,G=v-A,L=q-w,H=x-v,D=z-q,K=u-v,F=C-q,N=u-x,I=C-z,M=u-A,J=C-w,B=B*I-E*N,H=H*F-D*K,G=G*J-L*M;if(B>=0&&G>=0&&H>=0){k=false;break a}}k=true}}if(k){f.push([b[g[i]],
-b[g[j]],b[g[l]]]);h.push([g[i],g[j],g[l]]);i=j;for(l=j+1;l<e;i++,l++)g[i]=g[l];e--;n=2*e}}return d?h:f};b.Triangulate.area=a;return b})(THREE.FontUtils);self._typeface_js={faces:THREE.FontUtils.faces,loadFace:THREE.FontUtils.loadFace};
-THREE.BufferGeometry=function(){this.id=THREE.GeometryCount++;this.vertexColorArray=this.vertexUvArray=this.vertexNormalArray=this.vertexPositionArray=this.vertexIndexArray=this.vertexColorBuffer=this.vertexUvBuffer=this.vertexNormalBuffer=this.vertexPositionBuffer=this.vertexIndexBuffer=null;this.dynamic=false;this.boundingSphere=this.boundingBox=null;this.morphTargets=[]};
-THREE.BufferGeometry.prototype={constructor:THREE.BufferGeometry,applyMatrix:function(b){if(this.vertexPositionArray!==void 0){b.multiplyVector3Array(this.vertexPositionArray);this.verticesNeedUpdate=true}if(this.vertexNormalArray!==void 0){var a=new THREE.Matrix4;a.extractRotation(b);a.multiplyVector3Array(this.vertexNormalArray);this.normalsNeedUpdate=true}},computeBoundingBox:function(){if(!this.boundingBox)this.boundingBox={min:new THREE.Vector3(Infinity,Infinity,Infinity),max:new THREE.Vector3(-Infinity,
--Infinity,-Infinity)};var b=this.vertexPositionArray;if(b)for(var a=this.boundingBox,c,d,e,f=0,g=b.length;f<g;f=f+3){c=b[f];d=b[f+1];e=b[f+2];if(c<a.min.x)a.min.x=c;else if(c>a.max.x)a.max.x=c;if(d<a.min.y)a.min.y=d;else if(d>a.max.y)a.max.y=d;if(e<a.min.z)a.min.z=e;else if(e>a.max.z)a.max.z=e}if(b===void 0||b.length===0){this.boundingBox.min.set(0,0,0);this.boundingBox.max.set(0,0,0)}},computeBoundingSphere:function(){if(!this.boundingSphere)this.boundingSphere={radius:0};var b=this.vertexPositionArray;
-if(b){for(var a,c=0,d,e,f=0,g=b.length;f<g;f=f+3){a=b[f];d=b[f+1];e=b[f+2];a=Math.sqrt(a*a+d*d+e*e);a>c&&(c=a)}this.boundingSphere.radius=c}},computeVertexNormals:function(){var b=this.vertexIndexArray,a=this.vertexPositionArray;if(a&&b){var c,d,e,f;c=a.length;if(this.vertexNormalArray===void 0)this.vertexNormalArray=new Float32Array(c);else{c=0;for(d=this.vertexNormalArray.length;c<d;c++)this.vertexNormalArray[c]=0}var g=this.offsets,h=this.vertexNormalArray,i,j,l,n,k,m,o=new THREE.Vector3,p=new THREE.Vector3,
-r=new THREE.Vector3,s=new THREE.Vector3,t=new THREE.Vector3;e=0;for(f=g.length;e<f;++e){d=g[e].start;i=g[e].count;var v=g[e].index;c=d;for(d=d+i;c<d;c=c+3){i=v+b[c];j=v+b[c+1];l=v+b[c+2];n=a[i*3];k=a[i*3+1];m=a[i*3+2];o.set(n,k,m);n=a[j*3];k=a[j*3+1];m=a[j*3+2];p.set(n,k,m);n=a[l*3];k=a[l*3+1];m=a[l*3+2];r.set(n,k,m);s.sub(r,p);t.sub(o,p);s.crossSelf(t);h[i*3]=h[i*3]+s.x;h[i*3+1]=h[i*3+1]+s.y;h[i*3+2]=h[i*3+2]+s.z;h[j*3]=h[j*3]+s.x;h[j*3+1]=h[j*3+1]+s.y;h[j*3+2]=h[j*3+2]+s.z;h[l*3]=h[l*3]+s.x;h[l*
-3+1]=h[l*3+1]+s.y;h[l*3+2]=h[l*3+2]+s.z}}c=0;for(d=h.length;c<d;c=c+3){n=h[c];k=h[c+1];m=h[c+2];b=1/Math.sqrt(n*n+k*k+m*m);h[c]=h[c]*b;h[c+1]=h[c+1]*b;h[c+2]=h[c+2]*b}this.normalsNeedUpdate=true}}};THREE.Curve=function(){};THREE.Curve.prototype.getPoint=function(){console.log("Warning, getPoint() not implemented!");return null};THREE.Curve.prototype.getPointAt=function(b){return this.getPoint(this.getUtoTmapping(b))};
-THREE.Curve.prototype.getPoints=function(b){b||(b=5);var a,c=[];for(a=0;a<=b;a++)c.push(this.getPoint(a/b));return c};THREE.Curve.prototype.getSpacedPoints=function(b){b||(b=5);var a,c=[];for(a=0;a<=b;a++)c.push(this.getPointAt(a/b));return c};THREE.Curve.prototype.getLength=function(){var b=this.getLengths();return b[b.length-1]};
+b[g[j]],b[g[l]]]);h.push([g[i],g[j],g[l]]);i=j;for(l=j+1;l<e;i++,l++)g[i]=g[l];e--;n=2*e}}return d?h:f};b.Triangulate.area=a;return b})(THREE.FontUtils);self._typeface_js={faces:THREE.FontUtils.faces,loadFace:THREE.FontUtils.loadFace};THREE.BufferGeometry=function(){this.id=THREE.GeometryCount++;this.attributes={};this.dynamic=false;this.boundingSphere=this.boundingBox=null;this.morphTargets=[]};
+THREE.BufferGeometry.prototype={constructor:THREE.BufferGeometry,applyMatrix:function(b){var a,c;if(this.attributes.position)a=this.attributes.position.array;if(this.attributes.normal)c=this.attributes.normal.array;if(a!==void 0){b.multiplyVector3Array(a);this.verticesNeedUpdate=true}if(c!==void 0){a=new THREE.Matrix4;a.extractRotation(b);a.multiplyVector3Array(c);this.normalsNeedUpdate=true}},computeBoundingBox:function(){if(!this.boundingBox)this.boundingBox={min:new THREE.Vector3(Infinity,Infinity,
+Infinity),max:new THREE.Vector3(-Infinity,-Infinity,-Infinity)};var b=this.attributes.position.array;if(b)for(var a=this.boundingBox,c,d,e,f=0,g=b.length;f<g;f=f+3){c=b[f];d=b[f+1];e=b[f+2];if(c<a.min.x)a.min.x=c;else if(c>a.max.x)a.max.x=c;if(d<a.min.y)a.min.y=d;else if(d>a.max.y)a.max.y=d;if(e<a.min.z)a.min.z=e;else if(e>a.max.z)a.max.z=e}if(b===void 0||b.length===0){this.boundingBox.min.set(0,0,0);this.boundingBox.max.set(0,0,0)}},computeBoundingSphere:function(){if(!this.boundingSphere)this.boundingSphere=
+{radius:0};var b=this.attributes.position.array;if(b){for(var a,c=0,d,e,f=0,g=b.length;f<g;f=f+3){a=b[f];d=b[f+1];e=b[f+2];a=Math.sqrt(a*a+d*d+e*e);a>c&&(c=a)}this.boundingSphere.radius=c}},computeVertexNormals:function(){if(this.attributes.position&&this.attributes.index){var b,a,c,d;b=this.attributes.position.array.length;if(this.attributes.normal===void 0)this.attributes.normal={itemSize:3,array:new Float32Array(b),numItems:b*3};else{b=0;for(a=this.attributes.normal.array.length;b<a;b++)this.attributes.normal.array[b]=
+0}var e=this.offsets,f=this.attributes.index.array,g=this.attributes.position.array,h=this.attributes.normal.array,i,j,l,n,k,m,o=new THREE.Vector3,p=new THREE.Vector3,r=new THREE.Vector3,s=new THREE.Vector3,t=new THREE.Vector3;c=0;for(d=e.length;c<d;++c){a=e[c].start;i=e[c].count;var v=e[c].index;b=a;for(a=a+i;b<a;b=b+3){i=v+f[b];j=v+f[b+1];l=v+f[b+2];n=g[i*3];k=g[i*3+1];m=g[i*3+2];o.set(n,k,m);n=g[j*3];k=g[j*3+1];m=g[j*3+2];p.set(n,k,m);n=g[l*3];k=g[l*3+1];m=g[l*3+2];r.set(n,k,m);s.sub(r,p);t.sub(o,
+p);s.crossSelf(t);h[i*3]=h[i*3]+s.x;h[i*3+1]=h[i*3+1]+s.y;h[i*3+2]=h[i*3+2]+s.z;h[j*3]=h[j*3]+s.x;h[j*3+1]=h[j*3+1]+s.y;h[j*3+2]=h[j*3+2]+s.z;h[l*3]=h[l*3]+s.x;h[l*3+1]=h[l*3+1]+s.y;h[l*3+2]=h[l*3+2]+s.z}}b=0;for(a=h.length;b<a;b=b+3){n=h[b];k=h[b+1];m=h[b+2];c=1/Math.sqrt(n*n+k*k+m*m);h[b]=h[b]*c;h[b+1]=h[b+1]*c;h[b+2]=h[b+2]*c}this.normalsNeedUpdate=true}}};THREE.Curve=function(){};THREE.Curve.prototype.getPoint=function(){console.log("Warning, getPoint() not implemented!");return null};
+THREE.Curve.prototype.getPointAt=function(b){return this.getPoint(this.getUtoTmapping(b))};THREE.Curve.prototype.getPoints=function(b){b||(b=5);var a,c=[];for(a=0;a<=b;a++)c.push(this.getPoint(a/b));return c};THREE.Curve.prototype.getSpacedPoints=function(b){b||(b=5);var a,c=[];for(a=0;a<=b;a++)c.push(this.getPointAt(a/b));return c};THREE.Curve.prototype.getLength=function(){var b=this.getLengths();return b[b.length-1]};
 THREE.Curve.prototype.getLengths=function(b){b||(b=this.__arcLengthDivisions?this.__arcLengthDivisions:200);if(this.cacheArcLengths&&this.cacheArcLengths.length==b+1&&!this.needsUpdate)return this.cacheArcLengths;this.needsUpdate=false;var a=[],c,d=this.getPoint(0),e,f=0;a.push(0);for(e=1;e<=b;e++){c=this.getPoint(e/b);f=f+c.distanceTo(d);a.push(f);d=c}return this.cacheArcLengths=a};THREE.Curve.prototype.updateArcLengths=function(){this.needsUpdate=true;this.getLengths()};
 THREE.Curve.prototype.getUtoTmapping=function(b,a){var c=this.getLengths(),d=0,e=c.length,f;f=a?a:b*c[e-1];for(var g=0,h=e-1,i;g<=h;){d=Math.floor(g+(h-g)/2);i=c[d]-f;if(i<0)g=d+1;else if(i>0)h=d-1;else{h=d;break}}d=h;if(c[d]==f)return d/(e-1);g=c[d];return c=(d+(f-g)/(c[d+1]-g))/(e-1)};THREE.Curve.prototype.getNormalVector=function(b){b=this.getTangent(b);return new THREE.Vector2(-b.y,b.x)};
 THREE.Curve.prototype.getTangent=function(b){var a=b-1.0E-4,b=b+1.0E-4;a<0&&(a=0);b>1&&(b=1);a=this.getPoint(a);return this.getPoint(b).clone().subSelf(a).normalize()};THREE.Curve.prototype.getTangentAt=function(b){return this.getTangent(this.getUtoTmapping(b))};THREE.LineCurve=function(b,a){this.v1=b;this.v2=a};THREE.LineCurve.prototype=Object.create(THREE.Curve.prototype);THREE.LineCurve.prototype.getPoint=function(b){var a=this.v2.clone().subSelf(this.v1);a.multiplyScalar(b).addSelf(this.v1);return a};

examples/js/loaders/ctm/CTMLoader.js

@@ -8,9 +8,7 @@
  * @author alteredq / http://alteredqualia.com/
  */
 
-THREE.CTMLoader = function ( context, showStatus ) {
-
-	this.context = context;
+THREE.CTMLoader = function ( showStatus ) {
 
 	THREE.Loader.call( this, showStatus );
 
@@ -200,14 +198,11 @@ THREE.CTMLoader.prototype.load = function( url, callback, useWorker, useBuffers,
 
 THREE.CTMLoader.prototype.createModelBuffers = function ( file, callback ) {
 
-	var gl = this.context;
-
 	var Model = function ( ) {
 
 		var scope = this;
 
-		var keepArrays = true,
-		reorderVertices = true;
+		var reorderVertices = true;
 
 		scope.materials = [];
 
@@ -376,74 +371,32 @@ THREE.CTMLoader.prototype.createModelBuffers = function ( file, callback ) {
 
 		scope.offsets.push( { start: start, count: i - start, index: minPrev } );
 
-		// indices
+		// recast CTM 32-bit indices as 16-bit WebGL indices
 
 		var vertexIndexArray16 = new Uint16Array( vertexIndexArray );
 
-		scope.vertexIndexBuffer = gl.createBuffer();
-		gl.bindBuffer( gl.ELEMENT_ARRAY_BUFFER, scope.vertexIndexBuffer );
-		gl.bufferData( gl.ELEMENT_ARRAY_BUFFER, vertexIndexArray16, gl.STATIC_DRAW );
-
-		scope.vertexIndexBuffer.itemSize = 1;
-		scope.vertexIndexBuffer.numItems = vertexIndexArray.length;
-
-		// vertices
-
-		scope.vertexPositionBuffer = gl.createBuffer();
-		gl.bindBuffer( gl.ARRAY_BUFFER, scope.vertexPositionBuffer );
-		gl.bufferData( gl.ARRAY_BUFFER, vertexPositionArray, gl.STATIC_DRAW );
+		// attributes
 
-		scope.vertexPositionBuffer.itemSize = 3;
-		scope.vertexPositionBuffer.numItems = vertexPositionArray.length;
+		var attributes = scope.attributes;
 
-		// normals
+		attributes[ "index" ]    = { itemSize: 1, array: vertexIndexArray16, numItems: vertexIndexArray16.length };
+		attributes[ "position" ] = { itemSize: 3, array: vertexPositionArray, numItems: vertexPositionArray.length };
 
 		if ( vertexNormalArray !== undefined ) {
 
-			scope.vertexNormalBuffer = gl.createBuffer();
-			gl.bindBuffer( gl.ARRAY_BUFFER, scope.vertexNormalBuffer );
-			gl.bufferData( gl.ARRAY_BUFFER, vertexNormalArray, gl.STATIC_DRAW );
-
-			scope.vertexNormalBuffer.itemSize = 3;
-			scope.vertexNormalBuffer.numItems = vertexNormalArray.length;
+			attributes[ "normal" ] = { itemSize: 3, array: vertexNormalArray, numItems: vertexNormalArray.length };
 
 		}
 
-		// uvs
-
 		if ( vertexUvArray !== undefined ) {
 
-			scope.vertexUvBuffer = gl.createBuffer();
-			gl.bindBuffer( gl.ARRAY_BUFFER, scope.vertexUvBuffer );
-			gl.bufferData( gl.ARRAY_BUFFER, vertexUvArray, gl.STATIC_DRAW );
-
-			scope.vertexUvBuffer.itemSize = 2;
-			scope.vertexUvBuffer.numItems = vertexUvArray.length;
+			attributes[ "uv" ] = { itemSize: 2, array: vertexUvArray, numItems: vertexUvArray.length };
 
 		}
 
-		// colors
-
 		if ( vertexColorArray !== undefined ) {
 
-			scope.vertexColorBuffer = gl.createBuffer();
-			gl.bindBuffer( gl.ARRAY_BUFFER, scope.vertexColorBuffer );
-			gl.bufferData( gl.ARRAY_BUFFER, vertexColorArray, gl.STATIC_DRAW );
-
-			scope.vertexColorBuffer.itemSize = 4;
-			scope.vertexColorBuffer.numItems = vertexColorArray.length;
-
-		}
-
-		// keep references to typed arrays
-
-		if ( keepArrays ) {
-
-			scope.vertexIndexArray = vertexIndexArray16;
-			scope.vertexPositionArray = vertexPositionArray;
-			scope.vertexNormalArray = vertexNormalArray;
-			scope.vertexUvArray = vertexUvArray;
-			scope.vertexColorArray = vertexColorArray;
+			attributes[ "color" ]  = { itemSize: 4, array: vertexColorArray, numItems: vertexColorArray.length };
 
 		}
 
@@ -455,17 +408,10 @@ THREE.CTMLoader.prototype.createModelBuffers = function ( file, callback ) {
 
 	// compute vertex normals if not present in the CTM model
 
-	if ( geometry.vertexNormalArray === undefined ) {
+	if ( geometry.attributes[ "normal" ] === undefined ) {
 
 		geometry.computeVertexNormals();
 
-		geometry.vertexNormalBuffer = gl.createBuffer();
-		gl.bindBuffer( gl.ARRAY_BUFFER, geometry.vertexNormalBuffer );
-		gl.bufferData( gl.ARRAY_BUFFER, geometry.vertexNormalArray, gl.STATIC_DRAW );
-
-		geometry.vertexNormalBuffer.itemSize = 3;
-		geometry.vertexNormalBuffer.numItems = geometry.vertexNormalArray.length;
-
 	}
 
 	callback( geometry );

examples/webgl_loader_ctm.html

@@ -162,7 +162,7 @@
 				var useWorker = true;
 				var useBuffers = true;
 
-				var loader = new THREE.CTMLoader( renderer.context );
+				var loader = new THREE.CTMLoader();
 
 				loader.load( "models/ctm/ben.ctm",   function( geometry ) {
 

examples/webgl_loader_ctm_materials.html

@@ -201,7 +201,7 @@
 				var useWorker = true,
 					useBuffers = true;
 
-				loaderCTM = new THREE.CTMLoader( renderer.context, true );
+				loaderCTM = new THREE.CTMLoader( true );
 				document.body.appendChild( loaderCTM.statusDomElement );
 
 				var position = new THREE.Vector3( -105, -78, -40 );

src/extras/core/BufferGeometry.js

@@ -6,21 +6,11 @@ THREE.BufferGeometry = function () {
 
 	this.id = THREE.GeometryCount ++;
 
-	// GL buffers
+	// attributes
 
-	this.vertexIndexBuffer = null;
-	this.vertexPositionBuffer = null;
-	this.vertexNormalBuffer = null;
-	this.vertexUvBuffer = null;
-	this.vertexColorBuffer = null;
+	this.attributes = {};
 
-	// typed arrays (kept only if dynamic flag is set)
-
-	this.vertexIndexArray = null;
-	this.vertexPositionArray = null;
-	this.vertexNormalArray = null;
-	this.vertexUvArray = null;
-	this.vertexColorArray = null;
+	// attributes typed arrays are kept only if dynamic flag is set
 
 	this.dynamic = false;
 
@@ -41,19 +31,25 @@ THREE.BufferGeometry.prototype = {
 
 	applyMatrix: function ( matrix ) {
 
-		if ( this.vertexPositionArray !== undefined ) {
+		var positionArray;
+		var normalArray;
+
+		if ( this.attributes[ "position" ] ) positionArray = this.attributes[ "position" ].array;
+		if ( this.attributes[ "normal" ] ) normalArray = this.attributes[ "normal" ].array;
+
+		if ( positionArray !== undefined ) {
 
-			matrix.multiplyVector3Array( this.vertexPositionArray );
+			matrix.multiplyVector3Array( positionArray );
 			this.verticesNeedUpdate = true;
 
 		}
 
-		if ( this.vertexNormalArray !== undefined ) {
+		if ( normalArray !== undefined ) {
 
 			var matrixRotation = new THREE.Matrix4();
 			matrixRotation.extractRotation( matrix );
 
-			matrixRotation.multiplyVector3Array( this.vertexNormalArray );
+			matrixRotation.multiplyVector3Array( normalArray );
 			this.normalsNeedUpdate = true;
 
 		}
@@ -64,22 +60,27 @@ THREE.BufferGeometry.prototype = {
 
 		if ( ! this.boundingBox ) {
 
-			this.boundingBox = { min: new THREE.Vector3( Infinity, Infinity, Infinity ), max: new THREE.Vector3( -Infinity, -Infinity, -Infinity ) };
+			this.boundingBox = {
+
+				min: new THREE.Vector3( Infinity, Infinity, Infinity ),
+				max: new THREE.Vector3( -Infinity, -Infinity, -Infinity )
+
+			};
 
 		}
 
-		var vertices = this.vertexPositionArray;
+		var positions = this.attributes[ "position" ].array;
 
-		if ( vertices ) {
+		if ( positions ) {
 
 			var bb = this.boundingBox;
 			var x, y, z;
 
-			for ( var i = 0, il = vertices.length; i < il; i += 3 ) {
+			for ( var i = 0, il = positions.length; i < il; i += 3 ) {
 
-				x = vertices[ i ];
-				y = vertices[ i + 1 ];
-				z = vertices[ i + 2 ];
+				x = positions[ i ];
+				y = positions[ i + 1 ];
+				z = positions[ i + 2 ];
 
 				// bounding box
 
@@ -117,7 +118,7 @@ THREE.BufferGeometry.prototype = {
 
 		}
 
-		if ( vertices === undefined || vertices.length === 0 ) {
+		if ( positions === undefined || positions.length === 0 ) {
 
 			this.boundingBox.min.set( 0, 0, 0 );
 			this.boundingBox.max.set( 0, 0, 0 );
@@ -130,18 +131,18 @@ THREE.BufferGeometry.prototype = {
 
 		if ( ! this.boundingSphere ) this.boundingSphere = { radius: 0 };
 
-		var vertices = this.vertexPositionArray;
+		var positions = this.attributes[ "position" ].array;
 
-		if ( vertices ) {
+		if ( positions ) {
 
 			var radius, maxRadius = 0;
 			var x, y, z;
 
-			for ( var i = 0, il = vertices.length; i < il; i += 3 ) {
+			for ( var i = 0, il = positions.length; i < il; i += 3 ) {
 
-				x = vertices[ i ];
-				y = vertices[ i + 1 ];
-				z = vertices[ i + 2 ];
+				x = positions[ i ];
+				y = positions[ i + 1 ];
+				z = positions[ i + 2 ];
 
 				radius = Math.sqrt( x * x + y * y + z * z );
 				if ( radius > maxRadius ) maxRadius = radius;
@@ -156,34 +157,40 @@ THREE.BufferGeometry.prototype = {
 
 	computeVertexNormals: function () {
 
-		var indices = this.vertexIndexArray;
-		var vertices = this.vertexPositionArray;
-
-		if ( vertices && indices ) {
+		if ( this.attributes[ "position" ] && this.attributes[ "index" ] ) {
 
 			var i, il;
 			var j, jl;
 
-			var nElements = vertices.length;
+			var nVertices = this.attributes[ "position" ].array.length;
+
+			if ( this.attributes[ "normal" ] === undefined ) {
 
-			if ( this.vertexNormalArray === undefined ) {
+				this.attributes[ "normal" ] = {
 
-				this.vertexNormalArray = new Float32Array( nElements );
+					itemSize: 3,
+					array: new Float32Array( nVertices ),
+					numItems: nVertices * 3
+
+				};
 
 			} else {
 
 				// reset existing normals to zero
 
-				for ( i = 0, il = this.vertexNormalArray.length; i < il; i ++ ) {
+				for ( i = 0, il = this.attributes[ "normal" ].array.length; i < il; i ++ ) {
 
-					this.vertexNormalArray[ i ] = 0;
+					this.attributes[ "normal" ].array[ i ] = 0;
 
 				}
 
 			}
 
 			var offsets = this.offsets;
-			var normals = this.vertexNormalArray;
+
+			var indices = this.attributes[ "index" ].array;
+			var positions = this.attributes[ "position" ].array;
+			var normals = this.attributes[ "normal" ].array;
 
 			var vA, vB, vC, x, y, z,
 
@@ -206,19 +213,19 @@ THREE.BufferGeometry.prototype = {
 					vB = index + indices[ i + 1 ];
 					vC = index + indices[ i + 2 ];
 
-					x = vertices[ vA * 3 ];
-					y = vertices[ vA * 3 + 1 ];
-					z = vertices[ vA * 3 + 2 ];
+					x = positions[ vA * 3 ];
+					y = positions[ vA * 3 + 1 ];
+					z = positions[ vA * 3 + 2 ];
 					pA.set( x, y, z );
 
-					x = vertices[ vB * 3 ];
-					y = vertices[ vB * 3 + 1 ];
-					z = vertices[ vB * 3 + 2 ];
+					x = positions[ vB * 3 ];
+					y = positions[ vB * 3 + 1 ];
+					z = positions[ vB * 3 + 2 ];
 					pB.set( x, y, z );
 
-					x = vertices[ vC * 3 ];
-					y = vertices[ vC * 3 + 1 ];
-					z = vertices[ vC * 3 + 2 ];
+					x = positions[ vC * 3 ];
+					y = positions[ vC * 3 + 1 ];
+					z = positions[ vC * 3 + 2 ];
 					pC.set( x, y, z );
 
 					cb.sub( pC, pB );

src/renderers/WebGLRenderer.js

@@ -923,6 +923,35 @@ THREE.WebGLRenderer = function ( parameters ) {
 
 	};
 
+	//
+
+	function initDirectBuffers( geometry ) {
+
+		var a, attribute, type;
+
+		for ( a in geometry.attributes ) {
+
+			if ( a === "index" ) {
+
+				type = _gl.ELEMENT_ARRAY_BUFFER;
+
+			} else {
+
+				type = _gl.ARRAY_BUFFER;
+
+			}
+
+			attribute = geometry.attributes[ a ];
+
+			attribute.buffer = _gl.createBuffer();
+
+			_gl.bindBuffer( type, attribute.buffer );
+			_gl.bufferData( type, attribute.array, _gl.STATIC_DRAW );
+
+		}
+
+	};
+
 	// Buffer setting
 
 	function setParticleBuffers ( geometry, hint, object ) {
@@ -2880,49 +2909,57 @@ THREE.WebGLRenderer = function ( parameters ) {
 
 	function setDirectBuffers ( geometry, hint, dispose ) {
 
-		if ( geometry.elementsNeedUpdate && geometry.vertexIndexArray !== undefined ) {
+		var attributes = geometry.attributes;
 
-			_gl.bindBuffer( _gl.ELEMENT_ARRAY_BUFFER, geometry.vertexIndexBuffer );
-			_gl.bufferData( _gl.ELEMENT_ARRAY_BUFFER, geometry.vertexIndexArray, hint );
+		var index = attributes[ "index" ];
+		var position = attributes[ "position" ];
+		var normal = attributes[ "normal" ];
+		var uv = attributes[ "uv" ];
+		var color = attributes[ "color" ];
+
+		if ( geometry.elementsNeedUpdate && index !== undefined ) {
+
+			_gl.bindBuffer( _gl.ELEMENT_ARRAY_BUFFER, index.buffer );
+			_gl.bufferData( _gl.ELEMENT_ARRAY_BUFFER, index.array, hint );
 
 		}
 
-		if ( geometry.verticesNeedUpdate && geometry.vertexPositionArray !== undefined ) {
+		if ( geometry.verticesNeedUpdate && position !== undefined ) {
 
-			_gl.bindBuffer( _gl.ARRAY_BUFFER, geometry.vertexPositionBuffer );
-			_gl.bufferData( _gl.ARRAY_BUFFER, geometry.vertexPositionArray, hint );
+			_gl.bindBuffer( _gl.ARRAY_BUFFER, position.buffer );
+			_gl.bufferData( _gl.ARRAY_BUFFER, position.array, hint );
 
 		}
 
-		if ( geometry.normalsNeedUpdate && geometry.vertexNormalArray !== undefined ) {
+		if ( geometry.normalsNeedUpdate && normal !== undefined ) {
 
-			_gl.bindBuffer( _gl.ARRAY_BUFFER, geometry.vertexNormalBuffer );
-			_gl.bufferData( _gl.ARRAY_BUFFER, geometry.vertexNormalArray, hint );
+			_gl.bindBuffer( _gl.ARRAY_BUFFER, normal.buffer );
+			_gl.bufferData( _gl.ARRAY_BUFFER, normal.array, hint );
 
 		}
 
-		if ( geometry.uvsNeedUpdate && geometry.vertexUvArray !== undefined ) {
+		if ( geometry.uvsNeedUpdate && uv !== undefined ) {
 
-			_gl.bindBuffer( _gl.ARRAY_BUFFER, geometry.vertexUvBuffer );
-			_gl.bufferData( _gl.ARRAY_BUFFER, geometry.vertexUvArray, hint );
+			_gl.bindBuffer( _gl.ARRAY_BUFFER, uv.buffer );
+			_gl.bufferData( _gl.ARRAY_BUFFER, uv.array, hint );
 
 		}
 
-		if ( geometry.colorsNeedUpdate && geometry.vertexColorArray !== undefined ) {
+		if ( geometry.colorsNeedUpdate && color !== undefined ) {
 
-			_gl.bindBuffer( _gl.ARRAY_BUFFER, geometry.vertexColorBuffer );
-			_gl.bufferData( _gl.ARRAY_BUFFER, geometry.vertexColorArray, hint );
+			_gl.bindBuffer( _gl.ARRAY_BUFFER, color.buffer );
+			_gl.bufferData( _gl.ARRAY_BUFFER, color.array, hint );
 
 		}
 
 
 		if ( dispose ) {
 
-			delete geometry.vertexIndexArray;
-			delete geometry.vertexPositionArray;
-			delete geometry.vertexNormalArray;
-			delete geometry.vertexUvArray;
-			delete geometry.vertexColorArray;
+			for ( var i in geometry.attributes ) {
+
+				delete geometry.attributes[ i ].array;
+
+			}
 
 		}
 
@@ -3023,7 +3060,7 @@ THREE.WebGLRenderer = function ( parameters ) {
 
 	};
 
-	this.renderBufferDirect = function ( camera, lights, fog, material, geometryGroup, object ) {
+	this.renderBufferDirect = function ( camera, lights, fog, material, geometry, object ) {
 
 		if ( material.visible === false ) return;
 
@@ -3035,11 +3072,11 @@ THREE.WebGLRenderer = function ( parameters ) {
 
 		var updateBuffers = false,
 			wireframeBit = material.wireframe ? 1 : 0,
-			geometryGroupHash = ( geometryGroup.id * 0xffffff ) + ( program.id * 2 ) + wireframeBit;
+			geometryHash = ( geometry.id * 0xffffff ) + ( program.id * 2 ) + wireframeBit;
 
-		if ( geometryGroupHash !== _currentGeometryGroupHash ) {
+		if ( geometryHash !== _currentGeometryGroupHash ) {
 
-			_currentGeometryGroupHash = geometryGroupHash;
+			_currentGeometryGroupHash = geometryHash;
 			updateBuffers = true;
 
 		}
@@ -3048,46 +3085,53 @@ THREE.WebGLRenderer = function ( parameters ) {
 
 		if ( object instanceof THREE.Mesh ) {
 
-			var offsets = geometryGroup.offsets;
+			var offsets = geometry.offsets;
 
 			// if there is more than 1 chunk
-			// must set vertexAttribPointer to use new offsets for each chunk
+			// must set attribute pointers to use new offsets for each chunk
 			// even if geometry and materials didn't change
 
 			if ( offsets.length > 1 ) updateBuffers = true;
 
 			for ( var i = 0, il = offsets.length; i < il; ++ i ) {
 
+				var startIndex = offsets[ i ].index;
+
 				if ( updateBuffers ) {
 
 					// vertices
 
-					var positionSize = geometryGroup.vertexPositionBuffer.itemSize;
+					var position = geometry.attributes[ "position" ];
+					var positionSize = position.itemSize;
 
-					_gl.bindBuffer( _gl.ARRAY_BUFFER, geometryGroup.vertexPositionBuffer );
-					_gl.vertexAttribPointer( attributes.position, positionSize, _gl.FLOAT, false, 0, offsets[ i ].index * positionSize * 4 ); // 4 bytes per Float32
+					_gl.bindBuffer( _gl.ARRAY_BUFFER, position.buffer );
+					_gl.vertexAttribPointer( attributes.position, positionSize, _gl.FLOAT, false, 0, startIndex * positionSize * 4 ); // 4 bytes per Float32
 
 					// normals
 
-					if ( attributes.normal >= 0 && geometryGroup.vertexNormalBuffer ) {
+					var normal = geometry.attributes[ "normal" ];
+
+					if ( attributes.normal >= 0 && normal ) {
 
-						var normalSize = geometryGroup.vertexNormalBuffer.itemSize;
+						var normalSize = normal.itemSize;
 
-						_gl.bindBuffer( _gl.ARRAY_BUFFER, geometryGroup.vertexNormalBuffer );
-						_gl.vertexAttribPointer( attributes.normal, normalSize, _gl.FLOAT, false, 0, offsets[ i ].index * normalSize * 4 );
+						_gl.bindBuffer( _gl.ARRAY_BUFFER, normal.buffer );
+						_gl.vertexAttribPointer( attributes.normal, normalSize, _gl.FLOAT, false, 0, startIndex * normalSize * 4 );
 
 					}
 
 					// uvs
 
-					if ( attributes.uv >= 0 && geometryGroup.vertexUvBuffer ) {
+					var uv = geometry.attributes[ "uv" ];
 
-						if ( geometryGroup.vertexUvBuffer ) {
+					if ( attributes.uv >= 0 && uv ) {
 
-							var uvSize = geometryGroup.vertexUvBuffer.itemSize;
+						if ( uv.buffer ) {
 
-							_gl.bindBuffer( _gl.ARRAY_BUFFER, geometryGroup.vertexUvBuffer );
-							_gl.vertexAttribPointer(  attributes.uv, uvSize, _gl.FLOAT, false, 0, offsets[ i ].index * uvSize * 4 );
+							var uvSize = uv.itemSize;
+
+							_gl.bindBuffer( _gl.ARRAY_BUFFER, uv.buffer );
+							_gl.vertexAttribPointer( attributes.uv, uvSize, _gl.FLOAT, false, 0, startIndex * uvSize * 4 );
 
 							_gl.enableVertexAttribArray( attributes.uv );
 
@@ -3101,17 +3145,23 @@ THREE.WebGLRenderer = function ( parameters ) {
 
 					// colors
 
-					if ( attributes.color >= 0 && geometryGroup.vertexColorBuffer ) {
+					var color = geometry.attributes[ "color" ];
+
+					if ( attributes.color >= 0 && color ) {
 
-						var colorSize = geometryGroup.vertexColorBuffer.itemSize;
+						var colorSize = color.itemSize;
 
-						_gl.bindBuffer( _gl.ARRAY_BUFFER, geometryGroup.vertexColorBuffer );
-						_gl.vertexAttribPointer( attributes.color, colorSize, _gl.FLOAT, false, 0, offsets[ i ].index * colorSize * 4 );
+						_gl.bindBuffer( _gl.ARRAY_BUFFER, color.buffer );
+						_gl.vertexAttribPointer( attributes.color, colorSize, _gl.FLOAT, false, 0, startIndex * colorSize * 4 );
 
 
 					}
 
-					_gl.bindBuffer( _gl.ELEMENT_ARRAY_BUFFER, geometryGroup.vertexIndexBuffer );
+					// indices
+
+					var index = geometry.attributes[ "index" ];
+
+					_gl.bindBuffer( _gl.ELEMENT_ARRAY_BUFFER, index.buffer );
 
 				}
 
@@ -4034,12 +4084,6 @@ THREE.WebGLRenderer = function ( parameters ) {
 			object._modelViewMatrix = new THREE.Matrix4();
 			object._normalMatrix = new THREE.Matrix3();
 
-			//object._normalMatrixArray = new Float32Array( 9 );
-			//object._modelViewMatrixArray = new Float32Array( 16 );
-			//object._objectMatrixArray = new Float32Array( 16 );
-
-			//object.matrixWorld.flattenToArray( object._objectMatrixArray );
-
 			if ( object instanceof THREE.Mesh ) {
 
 				geometry = object.geometry;
@@ -4077,6 +4121,10 @@ THREE.WebGLRenderer = function ( parameters ) {
 
 					}
 
+				} else if ( geometry instanceof THREE.BufferGeometry ) {
+
+					initDirectBuffers( geometry );
+
 				}
 
 			} else if ( object instanceof THREE.Ribbon ) {