Experimenting with BufferAttribute.

This approach prettifies the API a bit, and the performance seems to be on par with raw access to the typedarray.

examples/canvas_geometry2_sandbox.html

@@ -19,6 +19,7 @@
 
 		<script src="../src/extras/geometries/BoxGeometry2.js"></script>
 		<script src="../src/extras/geometries/PlaneGeometry2.js"></script>
+		<script src="../src/extras/geometries/PlaneGeometry2b.js"></script>
 
 		<script src="js/libs/stats.min.js"></script>
 
@@ -46,8 +47,9 @@
 
 				//
 
-				addGeometries( 'PlaneGeometry', 'BoxGeometry', - 200 );
-				addGeometries( 'PlaneGeometry2', 'BoxGeometry2', 200 );
+				addGeometries( 'PlaneGeometry', 'BoxGeometry', - 300 );
+				addGeometries( 'PlaneGeometry2', 'BoxGeometry2', 0 );
+				addGeometries( 'PlaneGeometry2b', 'BoxGeometry2', 300 );
 
 				//
 
@@ -72,6 +74,7 @@
 
 					createGeometry( 'PlaneGeometry' );
 					createGeometry( 'PlaneGeometry2' );
+					createGeometry( 'PlaneGeometry2b' );
 
 				}, 1000 );
 

src/core/BufferAttribute.js

@@ -0,0 +1,137 @@
+/**
+ * @author mrdoob / http://mrdoob.com/
+ */
+
+THREE.BufferAttribute = function () {};
+
+THREE.BufferAttribute.prototype = {
+
+	constructor: THREE.BufferAttribute,
+
+	set: function ( value ) {
+
+		this.array.set( value );
+
+	},
+
+	setX: function ( index, x ) {
+
+		this.array[ index * this.itemSize ] = x;
+
+	},
+
+	setY: function ( index, y ) {
+
+		this.array[ index * this.itemSize + 1 ] = y;
+
+	},
+
+	setZ: function ( index, z ) {
+
+		this.array[ index * this.itemSize + 2 ] = z;
+
+	},
+
+	setXY: function ( index, x, y ) {
+
+		index *= this.itemSize;
+
+		this.array[ index     ] = x;
+		this.array[ index + 1 ] = y;
+
+	},
+
+	setXYZ: function ( index, x, y, z ) {
+
+		index *= this.itemSize;
+
+		this.array[ index     ] = x;
+		this.array[ index + 1 ] = y;
+		this.array[ index + 2 ] = z;
+
+	}
+
+};
+
+//
+
+THREE.Int8Attribute = function ( size, itemSize ) {
+
+	this.array = new Int8Array( size * itemSize );
+	this.itemSize = itemSize;
+
+};
+
+THREE.Int8Attribute.prototype = Object.create( THREE.BufferAttribute.prototype );
+
+THREE.Uint8Attribute = function ( size, itemSize ) {
+
+	this.array = new Uint8Array( size * itemSize );
+	this.itemSize = itemSize;
+
+};
+
+THREE.Uint8Attribute.prototype = Object.create( THREE.BufferAttribute.prototype );
+
+THREE.Uint8ClampedAttribute = function ( size, itemSize ) {
+
+	this.array = new Uint8ClampedArray( size * itemSize );
+	this.itemSize = itemSize;
+
+};
+
+THREE.Uint8ClampedAttribute.prototype = Object.create( THREE.BufferAttribute.prototype );
+
+THREE.Int16Attribute = function ( size, itemSize ) {
+
+	this.array = new Int16Array( size * itemSize );
+	this.itemSize = itemSize;
+
+};
+
+THREE.Int16Attribute.prototype = Object.create( THREE.BufferAttribute.prototype );
+
+THREE.Uint16Attribute = function ( size, itemSize ) {
+
+	this.array = new Uint16Array( size * itemSize );
+	this.itemSize = itemSize;
+
+};
+
+THREE.Uint16Attribute.prototype = Object.create( THREE.BufferAttribute.prototype );
+
+THREE.Int32Attribute = function ( size, itemSize ) {
+
+	this.array = new Int32Array( size * itemSize );
+	this.itemSize = itemSize;
+
+};
+
+THREE.Int32Attribute.prototype = Object.create( THREE.BufferAttribute.prototype );
+
+THREE.Uint32Attribute = function ( size, itemSize ) {
+
+	this.array = new Uint32Array( size * itemSize );
+	this.itemSize = itemSize;
+
+};
+
+THREE.Uint32Attribute.prototype = Object.create( THREE.BufferAttribute.prototype );
+
+THREE.Float32Attribute = function ( size, itemSize ) {
+
+	this.array = new Float32Array( size * itemSize );
+	this.itemSize = itemSize;
+
+};
+
+THREE.Float32Attribute.prototype = Object.create( THREE.BufferAttribute.prototype );
+
+THREE.Float64Attribute = function ( size, itemSize ) {
+
+	this.array = new Float64Array( size * itemSize );
+	this.itemSize = itemSize;
+
+};
+
+THREE.Float64Attribute.prototype = Object.create( THREE.BufferAttribute.prototype );

src/core/BufferGeometry.js

@@ -22,14 +22,9 @@ THREE.BufferGeometry.prototype = {
 
 	constructor: THREE.BufferGeometry,
 
-	addAttribute: function ( name, array, itemSize ) {
+	addAttribute: function ( name, attribute ) {
 
-		this.attributes[ name ] = {
-
-			array: array,
-			itemSize: itemSize
-
-		};
+		this.attributes[ name ] = attribute;
 
 	},
 

src/core/Geometry2.js

@@ -6,16 +6,13 @@ THREE.Geometry2 = function ( size ) {
 
 	THREE.BufferGeometry.call( this );
 
-	this.vertices = new Float32Array( size * 3 );
-	this.normals = new Float32Array( size * 3 );
-	this.uvs = new Float32Array( size * 2 );
+	this.vertices = new THREE.Float32Attribute( size, 3 );
+	this.normals = new THREE.Float32Attribute( size, 3 );
+	this.uvs = new THREE.Float32Attribute( size, 2 );
 
-	this.addAttribute( 'position', this.vertices, 3 );
-	this.addAttribute( 'normal', this.normals, 3 );
-	this.addAttribute( 'uv', this.uvs, 2 );
-
-	this.boundingBox = null;
-	this.boundingSphere = null;
+	this.addAttribute( 'position', this.vertices );
+	this.addAttribute( 'normal', this.normals );
+	this.addAttribute( 'uv', this.uvs );
 
 };
 

src/extras/geometries/PlaneGeometry2.js

@@ -7,9 +7,9 @@ THREE.PlaneGeometry2 = function ( width, height, widthSegments, heightSegments )
 
 	THREE.Geometry2.call( this, ( widthSegments * heightSegments ) * 2 * 3 );
 
-	var vertices = this.vertices;
-	var normals = this.normals;
-	var uvs = this.uvs;
+	var vertices = this.vertices.array;
+	var normals = this.normals.array;
+	var uvs = this.uvs.array;
 
 	this.width = width;
 	this.height = height;
@@ -40,35 +40,33 @@ THREE.PlaneGeometry2 = function ( width, height, widthSegments, heightSegments )
 			var x1 = ix * segmentWidth - widthHalf;
 			var x2 = ( ix + 1 ) * segmentWidth - widthHalf;
 
-			vertices[ offset ++ ] = x1;
-			vertices[ offset ++ ] = y1;
+			vertices[ offset + 0 ] = x1;
+			vertices[ offset + 1 ] = y1;
 
-			offset ++;
+			vertices[ offset + 3 ] = x2;
+			vertices[ offset + 4 ] = y1;
 
-			vertices[ offset ++ ] = x2;
-			vertices[ offset ++ ] = y1;
+			vertices[ offset + 6 ] = x1;
+			vertices[ offset + 7 ] = y2;
 
-			offset ++;
+			normals[ offset + 2 ] = 1;
+			normals[ offset + 5 ] = 1;
+			normals[ offset + 8 ] = 1;
 
-			vertices[ offset ++ ] = x1;
-			vertices[ offset ++ ] = y2;
+			vertices[ offset + 9 ] = x2;
+			vertices[ offset + 10 ] = y1;
 
-			offset ++;
+			vertices[ offset + 12 ] = x2;
+			vertices[ offset + 13 ] = y2;
 
-			vertices[ offset ++ ] = x2;
-			vertices[ offset ++ ] = y1;
+			vertices[ offset + 15 ] = x1;
+			vertices[ offset + 16 ] = y2;
 
-			offset ++;
+			normals[ offset + 11 ] = 1;
+			normals[ offset + 13 ] = 1;
+			normals[ offset + 17 ] = 1;
 
-			vertices[ offset ++ ] = x2;
-			vertices[ offset ++ ] = y2;
-
-			offset ++;
-
-			vertices[ offset ++ ] = x1;
-			vertices[ offset ++ ] = y2;
-
-			offset ++;
+			offset += 18;
 
 		}
 

src/extras/geometries/PlaneGeometry2b.js

@@ -0,0 +1,65 @@
+/**
+ * @author mrdoob / http://mrdoob.com/
+ * based on http://papervision3d.googlecode.com/svn/trunk/as3/trunk/src/org/papervision3d/objects/primitives/Plane.as
+ */
+
+THREE.PlaneGeometry2b = function ( width, height, widthSegments, heightSegments ) {
+
+	THREE.Geometry2.call( this, ( widthSegments * heightSegments ) * 2 * 3 );
+
+	var vertices = this.vertices;
+	var normals = this.normals;
+	var uvs = this.uvs;
+
+	this.width = width;
+	this.height = height;
+
+	this.widthSegments = widthSegments || 1;
+	this.heightSegments = heightSegments || 1;
+
+	var widthHalf = width / 2;
+	var heightHalf = height / 2;
+
+	var gridX = this.widthSegments;
+	var gridY = this.heightSegments;
+
+	var segmentWidth = this.width / gridX;
+	var segmentHeight = this.height / gridY;
+
+	var index = 0;
+
+	for ( var iy = 0; iy < gridY; iy ++ ) {
+
+		var y1 = iy * segmentHeight - heightHalf;
+		var y2 = ( iy + 1 ) * segmentHeight - heightHalf;
+
+		for ( var ix = 0; ix < gridX; ix ++ ) {
+
+			var x1 = ix * segmentWidth - widthHalf;
+			var x2 = ( ix + 1 ) * segmentWidth - widthHalf;
+
+			this.vertices.setXY( index + 0,  x1, y1 );
+			this.vertices.setXY( index + 1,  x2, y1 );
+			this.vertices.setXY( index + 2,  x1, y2 );
+
+			this.vertices.setXY( index + 3, x2, y1 );
+			this.vertices.setXY( index + 4, x2, y2 );
+			this.vertices.setXY( index + 5, x1, y2 );
+
+			this.normals.setZ( index + 0, 1 );
+			this.normals.setZ( index + 1, 1 );
+			this.normals.setZ( index + 2, 1 );
+
+			this.normals.setZ( index + 3, 1 );
+			this.normals.setZ( index + 4, 1 );
+			this.normals.setZ( index + 5, 1 );
+
+			index += 6;
+
+		}
+
+	}
+
+};
+
+THREE.PlaneGeometry2b.prototype = Object.create( THREE.Geometry2.prototype );

src/extras/helpers/EdgesHelper.js

@@ -48,7 +48,7 @@ THREE.EdgesHelper = function ( object, hex ) {
 
 	}
 
-	geometry.addAttribute( 'position', new Float32Array( numEdges * 2 * 3 ), 3 );
+	geometry.addAttribute( 'position', new THREE.Float32Attribute( numEdges * 2, 3 ) );
 
 	var coords = geometry.attributes.position.array;
 

src/extras/helpers/WireframeHelper.js

@@ -46,7 +46,7 @@ THREE.WireframeHelper = function ( object, hex ) {
 
 		}
 
-		geometry.addAttribute( 'position', new Float32Array( numEdges * 2 * 3 ), 3 );
+		geometry.addAttribute( 'position', new THREE.Float32Attribute( numEdges * 2, 3 ) );
 
 		var coords = geometry.attributes.position.array;
 
@@ -106,7 +106,7 @@ THREE.WireframeHelper = function ( object, hex ) {
 
 		}
 
-		geometry.addAttribute( 'position', new Float32Array( numEdges * 2 * 3 ), 3 );
+		geometry.addAttribute( 'position', new THREE.Float32Attribute( numEdges * 2, 3 ) );
 
 		var coords = geometry.attributes.position.array;
 
@@ -130,7 +130,7 @@ THREE.WireframeHelper = function ( object, hex ) {
 		var numEdges = vertices.length / 3;
 		var numTris = numEdges / 3;
 
-		geometry.addAttribute( 'position', new Float32Array( numEdges * 2 * 3 ), 3 );
+		geometry.addAttribute( 'position', new THREE.Float32Attribute( numEdges * 2, 3 ) );
 
 		var coords = geometry.attributes.position.array;
 

src/objects/Sprite.js

@@ -5,8 +5,11 @@
 
 THREE.Sprite = ( function () {
 
+	var vertices = new THREE.Float32Attribute( 3, 3 );
+	vertices.set( [ - 0.5, - 0.5, 0, 0.5, - 0.5, 0, 0.5, 0.5, 0 ] );
+
 	var geometry = new THREE.BufferGeometry();
-	geometry.addAttribute( 'position', new Float32Array( [ - 0.5, - 0.5, 0, 0.5, - 0.5, 0, 0.5, 0.5, 0 ] ), 3 );
+	geometry.addAttribute( 'position', vertices );
 
 	return function ( material ) {
 

utils/build/includes/common.json

@@ -27,6 +27,7 @@
 	"src/core/Projector.js",
 	"src/core/Face3.js",
 	"src/core/Face4.js",
+	"src/core/BufferAttribute.js",
 	"src/core/BufferGeometry.js",
 	"src/core/Geometry.js",
 	"src/core/Geometry2.js",

utils/build/includes/webgl.json

@@ -26,6 +26,7 @@
 	"src/core/Face3.js",
 	"src/core/Face4.js",
 	"src/core/Geometry.js",
+	"src/core/BufferAttribute.js",
 	"src/core/BufferGeometry.js",
 	"src/cameras/Camera.js",
 	"src/cameras/OrthographicCamera.js",