mrdoob · mrdoob · Aug 16, 2020 · Jan 29, 2018 · Feb 10, 2018 · Feb 10, 2018
diff --git a/docs/api/en/core/GLBufferAttribute.html b/docs/api/en/core/GLBufferAttribute.html
@@ -0,0 +1,113 @@
+<!DOCTYPE html>
+<html lang="en">
+	<head>
+		<meta charset="utf-8" />
+		<base href="../../" />
+		<script src="list.js"></script>
+		<script src="page.js"></script>
+		<link type="text/css" rel="stylesheet" href="page.css" />
+	</head>
+	<body>
+
+		<h1>[name]</h1>
+
+		<p class="desc">
+			This buffer attribute class does not construct a VBO. Instead, it uses
+			whatever VBO is passed in constructor and can later be altered via the
+			*buffer* property.<br /><br />
+			It is required to pass additional params alongside the VBO. Those are:
+			the GL context, the GL data type, the number of components per vertex
+			and the number of vertices.<br /><br />
+			The most common use case for this class is when some kind of GPGPU
+			calculation interferes or even produces the VBOs in question.
+		</p>
+
+		<h2>Constructor</h2>
+		<h3>[name]( [param:WebGLRenderingContext gl], [param:WebGLBuffer buffer], [param:GLenum type], [param:Integer itemSize], [param:Integer count], [param:Boolean normalized] )</h3>
+		<p>
+		gl — Must be a [link:https://developer.mozilla.org/en-US/docs/Web/API/WebGLRenderingContext].
+		<br />
+		buffer — Must be a [link:https://developer.mozilla.org/en-US/docs/Web/API/WebGLBuffer].
+		<br />
+		type — One of [link:https://developer.mozilla.org/en-US/docs/Web/API/WebGL_API/Constants#Data_types].
+		<br />
+		itemSize — The number of values of the array that should be associated with
+		a particular vertex. For instance, if this
+		attribute is storing a 3-component vector (such as a position, normal, or color), then itemSize should be 3.
+		<br />
+		count — The expected number of vertices in VBO.
+		<br /><br />
+
+		normalized — (optional) Applies to integer data only. Indicates how the underlying data
+		in the buffer maps to the values in the GLSL code. For instance, if [page:TypedArray array] is an instance
+		of UInt16Array, and [page:Boolean normalized] is true, the values 0 - +65535 in the array
+		 data will be mapped to 0.0f - +1.0f in the GLSL attribute. An Int16Array (signed) would map
+		 from -32767 - +32767  to -1.0f - +1.0f. If [page:Boolean normalized] is false, the values
+		 will be converted to floats unmodified, i.e. 32767 becomes 32767.0f.
+		</p>
+
+		<h2>Properties</h2>
+
+		<h3>[property:WebGLBuffer buffer]</h3>
+		<p>
+			The current <a href="https://developer.mozilla.org/en-US/docs/Web/API/WebGLBuffer" target="_blank">WebGLBuffer</a> instance.
+		</p>
+
+		<h3>[property:Integer count]</h3>
+		<p>
+			The expected number of vertices in VBO.
+		</p>
+
+		<h3>[property:Boolean normalized]</h3>
+		<p>
+		Indicates how the underlying data in the buffer maps to the values in the GLSL shader code.
+		See the constructor above for details.
+		</p>
+
+		<h3>[property:Integer itemSize]</h3>
+		<p>
+			How many values make up each item (vertex).
+		</p>
+
+		<h3>[property:Integer elementSize]</h3>
+		<p>
+			Stores the corresponding size in bytes for the current *type* property value.
+		</p>
+		<p>
+			<b>Don't touch</b>.
+		</p>
+
+		<h3>[property:GLenum type]</h3>
+		<p>
+			A <a href="https://developer.mozilla.org/en-US/docs/Web/API/WebGL_API/Constants#Standard_WebGL_1_constants" target="_blank">WebGL Data Type</a> describing the underlying VBO contents.
+		</p>
+		<p>
+			Setting this is only allowed with *setType*.
+		</p>
+
+		<h3>[property:Boolean isGLBufferAttribute]</h3>
+		<p>
+			Should be *true*.
+		</p>
+
+		<h2>Methods</h2>
+
+		<h3>[method:null setBuffer]( buffer ) </h3>
+		<p>Sets the *buffer* property.</p>
+
+		<h3>[method:null setType]( type ) </h3>
+		<p>Sets the *type* property.</p>
+
+		<h3>[method:null setItemSize]( itemSize ) </h3>
+		<p>Sets the *itemSize* property.</p>
+
+		<h3>[method:null setCount]( count ) </h3>
+		<p>Sets the *count* property.</p>
+
+
+
+		<h2>Source</h2>
+
+		[link:https://github.com/mrdoob/three.js/blob/master/src/[path].js src/[path].js]
+	</body>
+</html>
diff --git a/docs/list.js b/docs/list.js
@@ -90,6 +90,7 @@ var list = {
 				"EventDispatcher": "api/en/core/EventDispatcher",
 				"Face3": "api/en/core/Face3",
 				"Geometry": "api/en/core/Geometry",
+				"GLBufferAttribute": "api/en/core/GLBufferAttribute",
 				"InstancedBufferAttribute": "api/en/core/InstancedBufferAttribute",
 				"InstancedBufferGeometry": "api/en/core/InstancedBufferGeometry",
 				"InstancedInterleavedBuffer": "api/en/core/InstancedInterleavedBuffer",

diff --git a/examples/files.js b/examples/files.js
@@ -287,6 +287,7 @@ var files = {
 		"webgl_buffergeometry_lines_indexed",
 		"webgl_buffergeometry_morphtargets",
 		"webgl_buffergeometry_points",
+		"webgl_buffergeometry_points_glbufferattribute",
 		"webgl_buffergeometry_points_interleaved",
 		"webgl_buffergeometry_rawshader",
 		"webgl_buffergeometry_selective_draw",

diff --git a/examples/screenshots/webgl_buffergeometry_points_glbufferattribute.png b/examples/screenshots/webgl_buffergeometry_points_glbufferattribute.png
diff --git a/examples/webgl_buffergeometry_points_glbufferattribute.html b/examples/webgl_buffergeometry_points_glbufferattribute.html
@@ -0,0 +1,178 @@
+<!DOCTYPE html>
+<html lang="en">
+	<head>
+		<title>three.js webgl - buffergeometry - custom VBOs</title>
+		<meta charset="utf-8">
+		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
+		<link type="text/css" rel="stylesheet" href="main.css">
+	</head>
+	<body>
+
+		<div id="container"></div>
+		<div id="info"><a href="https://threejs.org" target="_blank" rel="noopener">three.js</a> webgl - buffergeometry - custom VBOs</div>
+
+		<script type="module">
+
+			import * as THREE from '../build/three.module.js';
+
+			import Stats from './jsm/libs/stats.module.js';
+
+			var container, stats;
+
+			var camera, scene, renderer;
+
+			var points;
+
+			init();
+			animate();
+
+			function init() {
+
+				container = document.getElementById( 'container' );
+
+				//
+
+				renderer = new THREE.WebGLRenderer( { antialias: false } );
+				renderer.setPixelRatio( window.devicePixelRatio );
+				renderer.setSize( window.innerWidth, window.innerHeight );
+
+				container.appendChild( renderer.domElement );
+
+				//
+
+				camera = new THREE.PerspectiveCamera( 27, window.innerWidth / window.innerHeight, 5, 3500 );
+				camera.position.z = 2750;
+
+				scene = new THREE.Scene();
+				scene.background = new THREE.Color( 0x050505 );
+				scene.fog = new THREE.Fog( 0x050505, 2000, 3500 );
+
+				//
+
+				var particles = 500000;
+
+				var geometry = new THREE.BufferGeometry();
+
+				var positions = [];
+				var positions2 = [];
+				var colors = [];
+
+				var color = new THREE.Color();
+
+				var n = 1000, n2 = n / 2; // particles spread in the cube
+
+				for ( var i = 0; i < particles; i ++ ) {
+
+					// positions
+
+					var x = Math.random() * n - n2;
+					var y = Math.random() * n - n2;
+					var z = Math.random() * n - n2;
+
+					positions.push( x, y, z );
+					positions2.push( z, x, y );
+
+					// colors
+
+					var vx = ( x / n ) + 0.5;
+					var vy = ( y / n ) + 0.5;
+					var vz = ( z / n ) + 0.5;
+
+					color.setRGB( vx, vy, vz );
+
+					colors.push( color.r, color.g, color.b );
+
+				}
+
+				var gl = renderer.getContext();
+
+				var pos = gl.createBuffer();
+				gl.bindBuffer( gl.ARRAY_BUFFER, pos );
+				gl.bufferData( gl.ARRAY_BUFFER, new Float32Array( positions ), gl.STATIC_DRAW );
+
+				var pos2 = gl.createBuffer();
+				gl.bindBuffer( gl.ARRAY_BUFFER, pos2 );
+				gl.bufferData( gl.ARRAY_BUFFER, new Float32Array( positions2 ), gl.STATIC_DRAW );
+
+				var rgb = gl.createBuffer();
+				gl.bindBuffer( gl.ARRAY_BUFFER, rgb );
+				gl.bufferData( gl.ARRAY_BUFFER, new Float32Array( colors ), gl.STATIC_DRAW );
+
+				var posAttr = new THREE.GLBufferAttribute( gl, pos, gl.FLOAT, 3, particles );
+				geometry.setAttribute( 'position', posAttr );
+
+				setInterval( function () {
+
+					posAttr.buffer = ( posAttr.buffer === pos ) ? pos2 : pos;
+					posAttr.needsUpdate = true;
+
+				}, 2000 );
+
+				var drawCount = 0;
+				setInterval( function () {
+
+					drawCount = 1 + ( drawCount + Math.floor( 1000 * Math.random() ) ) % particles;
+					geometry.setDrawRange( 0, drawCount );
+
+				}, 20 );
+
+				geometry.setAttribute( 'color', new THREE.GLBufferAttribute( gl, rgb, gl.FLOAT, 3, particles ) );
+
+				//
+
+				var material = new THREE.PointsMaterial( { size: 15, vertexColors: THREE.VertexColors } );
+
+				points = new THREE.Points( geometry, material );
+
+				// Choose one:
+				// geometry.boundingSphere = ( new THREE.Sphere() ).set( new THREE.Vector3(), Infinity );
+				points.frustumCulled = false;
+
+				scene.add( points );
+
+				//
+
+				stats = new Stats();
+				container.appendChild( stats.dom );
+
+				//
+
+				window.addEventListener( 'resize', onWindowResize, false );
+
+			}
+
+			function onWindowResize() {
+
+				camera.aspect = window.innerWidth / window.innerHeight;
+				camera.updateProjectionMatrix();
+
+				renderer.setSize( window.innerWidth, window.innerHeight );
+
+			}
+
+			//
+
+			function animate() {
+
+				requestAnimationFrame( animate );
+
+				render();
+				stats.update();
+
+			}
+
+			function render() {
+
+				var time = Date.now() * 0.001;
+
+				points.rotation.x = time * 0.25;
+				points.rotation.y = time * 0.5;
+
+				renderer.render( scene, camera );
+
+			}
+
+		</script>
+
+	</body>
+</html>
diff --git a/src/Three.js b/src/Three.js
@@ -97,6 +97,7 @@ export { InterleavedBufferAttribute } from './core/InterleavedBufferAttribute.js
 export { InstancedInterleavedBuffer } from './core/InstancedInterleavedBuffer.js';
 export { InterleavedBuffer } from './core/InterleavedBuffer.js';
 export { InstancedBufferAttribute } from './core/InstancedBufferAttribute.js';
+export { GLBufferAttribute } from './core/GLBufferAttribute.js';
 export * from './core/BufferAttribute.js';
 export { Face3 } from './core/Face3.js';
 export { Object3D } from './core/Object3D.js';

diff --git a/src/core/BufferGeometry.js b/src/core/BufferGeometry.js
@@ -561,6 +561,19 @@ BufferGeometry.prototype = Object.assign( Object.create( EventDispatcher.prototy
 		var position = this.attributes.position;
 		var morphAttributesPosition = this.morphAttributes.position;
 
+		if ( position && position.isGLBufferAttribute ) {
+
+			console.error( 'THREE.BufferGeometry.computeBoundingBox(): GLBufferAttribute requires a manual bounding box. Alternatively set "mesh.frustumCulled" to "false".', this );
+
+			this.boundingBox.set(
+				new Vector3( - Infinity, - Infinity, - Infinity ),
+				new Vector3( + Infinity, + Infinity, + Infinity )
+			);
+
+			return;
+
+		}
+
 		if ( position !== undefined ) {
 
 			this.boundingBox.setFromBufferAttribute( position );
@@ -601,7 +614,7 @@ BufferGeometry.prototype = Object.assign( Object.create( EventDispatcher.prototy
 
 		if ( isNaN( this.boundingBox.min.x ) || isNaN( this.boundingBox.min.y ) || isNaN( this.boundingBox.min.z ) ) {
 
-			console.error( 'THREE.BufferGeometry.computeBoundingBox: Computed min/max have NaN values. The "position" attribute is likely to have NaN values.', this );
+			console.error( 'THREE.BufferGeometry.computeBoundingBox(): Computed min/max have NaN values. The "position" attribute is likely to have NaN values.', this );
 
 		}
 
@@ -618,6 +631,16 @@ BufferGeometry.prototype = Object.assign( Object.create( EventDispatcher.prototy
 		var position = this.attributes.position;
 		var morphAttributesPosition = this.morphAttributes.position;
 
+		if ( position && position.isGLBufferAttribute ) {
+
+			console.error( 'THREE.BufferGeometry.computeBoundingSphere(): GLBufferAttribute requires a manual bounding sphere. Alternatively set "mesh.frustumCulled" to "false".', this );
+
+			this.boundingSphere.set( new Vector3(), Infinity );
+
+			return;
+
+		}
+
 		if ( position ) {
 
 			// first, find the center of the bounding sphere