Update InterleavedBufferAttribute API to allow shared WebGL buffer across different parameters

examples/jsm/lines/LineSegments2.js

@@ -1,7 +1,7 @@
 import {
 	Box3,
-	InstancedInterleavedBuffer,
-	InterleavedBufferAttribute,
+	InterleavedBuffer,
+	InstancedInterleavedBufferAttribute,
 	Line3,
 	MathUtils,
 	Matrix4,
@@ -59,10 +59,10 @@ class LineSegments2 extends Mesh {
 
 		}
 
-		const instanceDistanceBuffer = new InstancedInterleavedBuffer( lineDistances, 2, 1 ); // d0, d1
+		const interleavedDistanceBuffer = new InterleavedBuffer( lineDistances.buffer ); // d0, d1
 
-		geometry.setAttribute( 'instanceDistanceStart', new InterleavedBufferAttribute( instanceDistanceBuffer, 1, 0 ) ); // d0
-		geometry.setAttribute( 'instanceDistanceEnd', new InterleavedBufferAttribute( instanceDistanceBuffer, 1, 1 ) ); // d1
+		geometry.setAttribute( 'instanceDistanceStart', new InstancedInterleavedBufferAttribute( interleavedDistanceBuffer, 1, Float32Array, false, 8, 0, lineDistances.length / 2, 1 ) ); // d0
+		geometry.setAttribute( 'instanceDistanceEnd', new InstancedInterleavedBufferAttribute( interleavedDistanceBuffer, 1, Float32Array, false, 8, 4, lineDistances.length / 2, 1 ) ); // d1
 
 		return this;
 

examples/jsm/lines/LineSegmentsGeometry.js

@@ -2,8 +2,8 @@ import {
 	Box3,
 	Float32BufferAttribute,
 	InstancedBufferGeometry,
-	InstancedInterleavedBuffer,
-	InterleavedBufferAttribute,
+	InstancedInterleavedBufferAttribute,
+	InterleavedBuffer,
 	Sphere,
 	Vector3,
 	WireframeGeometry
@@ -75,10 +75,10 @@ class LineSegmentsGeometry extends InstancedBufferGeometry {
 
 		}
 
-		const instanceBuffer = new InstancedInterleavedBuffer( lineSegments, 6, 1 ); // xyz, xyz
+		const interleavedBuffer = new InterleavedBuffer( lineSegments.buffer ); // xyz, xyz
 
-		this.setAttribute( 'instanceStart', new InterleavedBufferAttribute( instanceBuffer, 3, 0 ) ); // xyz
-		this.setAttribute( 'instanceEnd', new InterleavedBufferAttribute( instanceBuffer, 3, 3 ) ); // xyz
+		this.setAttribute( 'instanceStart', new InstancedInterleavedBufferAttribute( interleavedBuffer, 3, Float32Array, false, 24, 0, lineSegments.length / 6, 1 ) ); // xyz
+		this.setAttribute( 'instanceEnd', new InstancedInterleavedBufferAttribute( interleavedBuffer, 3, Float32Array, false, 24, 12, lineSegments.length / 6, 1 ) ); // xyz
 
 		//
 
@@ -103,10 +103,10 @@ class LineSegmentsGeometry extends InstancedBufferGeometry {
 
 		}
 
-		const instanceColorBuffer = new InstancedInterleavedBuffer( colors, 6, 1 ); // rgb, rgb
+		const interleavedColorBuffer = new InterleavedBuffer( colors.buffer ); // rgb, rgb
 
-		this.setAttribute( 'instanceColorStart', new InterleavedBufferAttribute( instanceColorBuffer, 3, 0 ) ); // rgb
-		this.setAttribute( 'instanceColorEnd', new InterleavedBufferAttribute( instanceColorBuffer, 3, 3 ) ); // rgb
+		this.setAttribute( 'instanceColorStart', new InstancedInterleavedBufferAttribute( interleavedColorBuffer, 3, Float32Array, false, 24, 0, colors.length / 6, 1 ) ); // rgb
+		this.setAttribute( 'instanceColorEnd', new InstancedInterleavedBufferAttribute( interleavedColorBuffer, 3, Float32Array, false, 24, 12, colors.length / 6, 1 ) ); // rgb
 
 		return this;
 

examples/jsm/lines/Wireframe.js

@@ -1,6 +1,6 @@
 import {
-	InstancedInterleavedBuffer,
-	InterleavedBufferAttribute,
+	InterleavedBuffer,
+	InstancedInterleavedBufferAttribute,
 	Mesh,
 	Vector3
 } from '../../../build/three.module.js';
@@ -40,10 +40,10 @@ class Wireframe extends Mesh {
 
 		}
 
-		const instanceDistanceBuffer = new InstancedInterleavedBuffer( lineDistances, 2, 1 ); // d0, d1
+		const interleavedDistanceBuffer = new InterleavedBuffer( lineDistances ); // d0, d1
 
-		geometry.setAttribute( 'instanceDistanceStart', new InterleavedBufferAttribute( instanceDistanceBuffer, 1, 0 ) ); // d0
-		geometry.setAttribute( 'instanceDistanceEnd', new InterleavedBufferAttribute( instanceDistanceBuffer, 1, 1 ) ); // d1
+		geometry.setAttribute( 'instanceDistanceStart', new InstancedInterleavedBufferAttribute( interleavedDistanceBuffer, 1, Float32Array, false, 8, 0, lineDistances.length / 2, 1 ) ); // d0
+		geometry.setAttribute( 'instanceDistanceEnd', new InstancedInterleavedBufferAttribute( interleavedDistanceBuffer, 1, Float32Array, false, 8, 4, lineDistances.length / 2, 1 ) ); // d1
 
 		return this;
 

examples/jsm/loaders/GLTFLoader.js

@@ -2432,14 +2432,13 @@ class GLTFParser {
 
 					array = new TypedArray( bufferView, ibSlice * byteStride, accessorDef.count * byteStride / elementBytes );
 
-					// Integer parameters to IB/IBA are in array elements, not bytes.
-					ib = new InterleavedBuffer( array, byteStride / elementBytes );
+					ib = new InterleavedBuffer( array.buffer );
 
 					parser.cache.add( ibCacheKey, ib );
 
 				}
 
-				bufferAttribute = new InterleavedBufferAttribute( ib, itemSize, ( byteOffset % byteStride ) / elementBytes, normalized );
+				bufferAttribute = new InterleavedBufferAttribute( ib, itemSize, TypedArray, normalized, byteStride, byteOffset, normalized );
 
 			} else {
 

examples/jsm/loaders/IFCLoader.js

@@ -154,15 +154,18 @@ class IFCLoader extends Loader {
 
 		function ifcGeometryToBuffer( vertexData, indexData ) {
 
+			const typedArray = vertexData.constructor;
+
 			const geometry = new BufferGeometry();
-			const buffer32 = new InterleavedBuffer( vertexData, 6 );
+			const buffer32 = new InterleavedBuffer( vertexData.buffer );
+
 			geometry.setAttribute(
 				'position',
-				new InterleavedBufferAttribute( buffer32, 3, 0 )
+				new InterleavedBufferAttribute( buffer32, 3, typedArray, false, 6 * typedArray.BYTES_PER_ELEMENT, 0, vertexData.length / 6 )
 			);
 			geometry.setAttribute(
 				'normal',
-				new InterleavedBufferAttribute( buffer32, 3, 3 )
+				new InterleavedBufferAttribute( buffer32, 3, typedArray, false, 6 * typedArray.BYTES_PER_ELEMENT, 3 * typedArray.BYTES_PER_ELEMENT, 0, vertexData.length / 6 )
 			);
 			geometry.setIndex( new BufferAttribute( indexData, 1 ) );
 			return geometry;

examples/jsm/objects/Lensflare.js

@@ -386,11 +386,11 @@ Lensflare.Geometry = ( function () {
 		- 1, 1, 0, 0, 1
 	] );
 
-	const interleavedBuffer = new InterleavedBuffer( float32Array, 5 );
+	const interleavedBuffer = new InterleavedBuffer( float32Array.buffer );
 
 	geometry.setIndex( [ 0, 1, 2,	0, 2, 3 ] );
-	geometry.setAttribute( 'position', new InterleavedBufferAttribute( interleavedBuffer, 3, 0, false ) );
-	geometry.setAttribute( 'uv', new InterleavedBufferAttribute( interleavedBuffer, 2, 3, false ) );
+	geometry.setAttribute( 'position', new InterleavedBufferAttribute( interleavedBuffer, 3, Float32Array, false, 20, 0, 4 ) );
+	geometry.setAttribute( 'uv', new InterleavedBufferAttribute( interleavedBuffer, 2, Float32Array, false, 20, 12, 4 ) );
 
 	return geometry;
 

examples/jsm/utils/BufferGeometryUtils.js

@@ -316,7 +316,7 @@ class BufferGeometryUtils {
 		}
 
 		// Create the set of buffer attributes
-		const interleavedBuffer = new InterleavedBuffer( new TypedArray( arrayLength ), stride );
+		const interleavedBuffer = new InterleavedBuffer( new TypedArray( arrayLength ) );
 		let offset = 0;
 		const res = [];
 		const getters = [ 'getX', 'getY', 'getZ', 'getW' ];
@@ -327,7 +327,7 @@ class BufferGeometryUtils {
 			const attribute = attributes[ j ];
 			const itemSize = attribute.itemSize;
 			const count = attribute.count;
-			const iba = new InterleavedBufferAttribute( interleavedBuffer, itemSize, offset, attribute.normalized );
+			const iba = new InterleavedBufferAttribute( interleavedBuffer, itemSize, TypedArray, attribute.normalized, stride * TypedArray.BYTES_PER_ELEMENT, offset * TypedArray.BYTES_PER_ELEMENT, attribute.normalized, count );
 			res.push( iba );
 
 			offset += itemSize;

examples/webgl_buffergeometry_instancing_interleaved.html

@@ -79,13 +79,13 @@
 				- 1, - 1, 1, 0, 0, 0, 0, 0,
 				1, - 1, - 1, 0, 1, 1, 0, 0,
 				- 1, - 1, - 1, 0, 0, 1, 0, 0
-			] ), 8 );
+			] ).buffer );
 
 			// Use vertexBuffer, starting at offset 0, 3 items in position attribute
-			const positions = new THREE.InterleavedBufferAttribute( vertexBuffer, 3, 0 );
+			const positions = new THREE.InterleavedBufferAttribute( vertexBuffer, 3, Float32Array, false, 32, 0, 24 );
 			geometry.setAttribute( 'position', positions );
 			// Use vertexBuffer, starting at offset 4, 2 items in uv attribute
-			const uvs = new THREE.InterleavedBufferAttribute( vertexBuffer, 2, 4 );
+			const uvs = new THREE.InterleavedBufferAttribute( vertexBuffer, 2, Float32Array, false, 32, 16, 24 );
 			geometry.setAttribute( 'uv', uvs );
 
 			const indices = new Uint16Array( [

examples/webgl_buffergeometry_points_interleaved.html

@@ -87,11 +87,27 @@
 
 				}
 
-				const interleavedBuffer32 = new THREE.InterleavedBuffer( interleavedFloat32Buffer, 4 );
-				const interleavedBuffer8 = new THREE.InterleavedBuffer( interleavedUint8Buffer, 16 );
-
-				geometry.setAttribute( 'position', new THREE.InterleavedBufferAttribute( interleavedBuffer32, 3, 0, false ) );
-				geometry.setAttribute( 'color', new THREE.InterleavedBufferAttribute( interleavedBuffer8, 3, 12, true ) );
+				const interleavedBuffer = new THREE.InterleavedBuffer( arrayBuffer );
+
+				geometry.setAttribute( 'position', new THREE.InterleavedBufferAttribute(
+					interleavedBuffer,
+					3, // item size
+					Float32Array, // type
+					false, // normalized
+					16, // stride bytes
+					0, // offset bytes
+					particles // count
+				) );
+
+				geometry.setAttribute( 'color', new THREE.InterleavedBufferAttribute(
+					interleavedBuffer,
+					3, // item size
+					Uint8Array, // type
+					true, // normalized
+					16, // stride bytes
+					12, // offset bytes
+					particles // count
+				) );
 
 				//
 

src/Three.js

@@ -90,7 +90,7 @@ export { Uniform } from './core/Uniform.js';
 export { InstancedBufferGeometry } from './core/InstancedBufferGeometry.js';
 export { BufferGeometry } from './core/BufferGeometry.js';
 export { InterleavedBufferAttribute } from './core/InterleavedBufferAttribute.js';
-export { InstancedInterleavedBuffer } from './core/InstancedInterleavedBuffer.js';
+export { InstancedInterleavedBufferAttribute } from './core/InstancedInterleavedBufferAttribute.js';
 export { InterleavedBuffer } from './core/InterleavedBuffer.js';
 export { InstancedBufferAttribute } from './core/InstancedBufferAttribute.js';
 export { GLBufferAttribute } from './core/GLBufferAttribute.js';

src/core/InstancedInterleavedBufferAttribute.js

@@ -0,0 +1,48 @@
+import { InterleavedBufferAttribute } from './InterleavedBufferAttribute.js';
+
+class InstancedInterleavedBufferAttribute extends InterleavedBufferAttribute {
+
+	constructor( buffer, itemSize, type, normalized, stride, offset, count, meshPerAttribute ) {
+
+		super( buffer, itemSize, type, normalized, stride, offset, count );
+
+		this.meshPerAttribute = meshPerAttribute || 1;
+
+	}
+
+	copy( source ) {
+
+		super.copy( source );
+
+		this.meshPerAttribute = source.meshPerAttribute;
+
+		return this;
+
+	}
+
+	clone( data ) {
+
+		const ib = super.clone( data );
+
+		ib.meshPerAttribute = this.meshPerAttribute;
+
+		return ib;
+
+	}
+
+	toJSON( data ) {
+
+		const json = super.toJSON( data );
+
+		json.isInstancedInterleavedBufferAttribute = true;
+		json.meshPerAttribute = this.meshPerAttribute;
+
+		return json;
+
+	}
+
+}
+
+InstancedInterleavedBufferAttribute.prototype.isInstancedInterleavedBufferAttribute = true;
+
+export { InstancedInterleavedBufferAttribute };