Преглед на файлове

Update GLBufferAttribute

Luis Blanco преди 5 години
родител
ревизия
c16eb64641

+ 37 - 33
docs/api/en/core/GLBufferAttribute.html

@@ -2,13 +2,12 @@
 <html lang="en">
 	<head>
 		<meta charset="utf-8" />
-		<base href="../../" />
+		<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">
@@ -16,34 +15,34 @@
 			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 GL context, the GL data type, the number of components per vertex,
+			the number of bytes per component, 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>
+		<h3>[name]( [param:WebGLBuffer buffer], [param:GLenum type], [param:Integer itemSize], [param:Integer elementSize], [param:Integer count] )</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].
+		*buffer* — Must be a <a href="https://developer.mozilla.org/en-US/docs/Web/API/WebGLBuffer" target="_blank">WebGLBuffer</a>.
 		<br />
-		type — One of [link:https://developer.mozilla.org/en-US/docs/Web/API/WebGL_API/Constants#Data_types].
+		*type* — One of <a href="https://developer.mozilla.org/en-US/docs/Web/API/WebGL_API/Constants#Data_types" target="_blank">WebGL Data Types</a>.
 		<br />
-		itemSize — The number of values of the array that should be associated with
+		*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.
+		*elementSize* — 1, 2 or 4. The corresponding size (in bytes) for the given "type" param.
+		<ul>
+			<li>gl.FLOAT: 4</li>
+			<li>gl.UNSIGNED_SHORT: 2</li>
+			<li>gl.SHORT: 2</li>
+			<li>gl.UNSIGNED_INT: 4</li>
+			<li>gl.INT: 4</li>
+			<li>gl.BYTE: 1</li>
+			<li>gl.UNSIGNED_BYTE: 1</li>
+		</ul>
+		*count* — The expected number of vertices in VBO.
 		</p>
 
 		<h2>Properties</h2>
@@ -58,12 +57,6 @@
 			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).
@@ -74,20 +67,22 @@
 			Stores the corresponding size in bytes for the current *type* property value.
 		</p>
 		<p>
-			<b>Don't touch</b>.
+			See above (constructor) for a list of known type sizes.
 		</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.
+			A <a href="https://developer.mozilla.org/en-US/docs/Web/API/WebGL_API/Constants#Data_types" target="_blank">WebGL Data Type</a>
+			describing the underlying VBO contents.
 		</p>
 		<p>
-			Setting this is only allowed with *setType*.
+			Set this property together with *elementSize*. The recommended way is
+			using the *setType* method.
 		</p>
 
 		<h3>[property:Boolean isGLBufferAttribute]</h3>
 		<p>
-			Should be *true*.
+			Read-only. Always *true*.
 		</p>
 
 		<h2>Methods</h2>
@@ -95,8 +90,8 @@
 		<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 setType]( type, elementSize ) </h3>
+		<p>Sets the both *type* and *elementSize* properties.</p>
 
 		<h3>[method:null setItemSize]( itemSize ) </h3>
 		<p>Sets the *itemSize* property.</p>
@@ -104,10 +99,19 @@
 		<h3>[method:null setCount]( count ) </h3>
 		<p>Sets the *count* property.</p>
 
+		<h3>[property:Integer version]</h3>
+		<p>
+		A version number, incremented every time the needsUpdate property is set to true.
+		</p>
 
+		<h3>[property:Boolean needsUpdate]</h3>
+		<p>
+		Default is *false*. Setting this to true increments [page:GLBufferAttribute.version version].
+		</p>
 
 		<h2>Source</h2>
-
-		[link:https://github.com/mrdoob/three.js/blob/master/src/[path].js src/[path].js]
+		<p>
+			[link:https://github.com/mrdoob/three.js/blob/master/src/[path].js src/[path].js]
+		</p>
 	</body>
 </html>

+ 37 - 33
docs/api/zh/core/GLBufferAttribute.html

@@ -2,13 +2,12 @@
 <html lang="en">
 	<head>
 		<meta charset="utf-8" />
-		<base href="../../" />
+		<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">
@@ -16,34 +15,34 @@
 			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 GL context, the GL data type, the number of components per vertex,
+			the number of bytes per component, 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>
+		<h3>[name]( [param:WebGLBuffer buffer], [param:GLenum type], [param:Integer itemSize], [param:Integer elementSize], [param:Integer count] )</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].
+		*buffer* — Must be a <a href="https://developer.mozilla.org/en-US/docs/Web/API/WebGLBuffer" target="_blank">WebGLBuffer</a>.
 		<br />
-		type — One of [link:https://developer.mozilla.org/en-US/docs/Web/API/WebGL_API/Constants#Data_types].
+		*type* — One of <a href="https://developer.mozilla.org/en-US/docs/Web/API/WebGL_API/Constants#Data_types" target="_blank">WebGL Data Types</a>.
 		<br />
-		itemSize — The number of values of the array that should be associated with
+		*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.
+		*elementSize* — 1, 2 or 4. The corresponding size (in bytes) for the given "type" param.
+		<ul>
+			<li>gl.FLOAT: 4</li>
+			<li>gl.UNSIGNED_SHORT: 2</li>
+			<li>gl.SHORT: 2</li>
+			<li>gl.UNSIGNED_INT: 4</li>
+			<li>gl.INT: 4</li>
+			<li>gl.BYTE: 1</li>
+			<li>gl.UNSIGNED_BYTE: 1</li>
+		</ul>
+		*count* — The expected number of vertices in VBO.
 		</p>
 
 		<h2>Properties</h2>
@@ -58,12 +57,6 @@
 			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).
@@ -74,20 +67,22 @@
 			Stores the corresponding size in bytes for the current *type* property value.
 		</p>
 		<p>
-			<b>Don't touch</b>.
+			See above (constructor) for a list of known type sizes.
 		</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.
+			A <a href="https://developer.mozilla.org/en-US/docs/Web/API/WebGL_API/Constants#Data_types" target="_blank">WebGL Data Type</a>
+			describing the underlying VBO contents.
 		</p>
 		<p>
-			Setting this is only allowed with *setType*.
+			Set this property together with *elementSize*. The recommended way is
+			using the *setType* method.
 		</p>
 
 		<h3>[property:Boolean isGLBufferAttribute]</h3>
 		<p>
-			Should be *true*.
+			Read-only. Always *true*.
 		</p>
 
 		<h2>Methods</h2>
@@ -95,8 +90,8 @@
 		<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 setType]( type, elementSize ) </h3>
+		<p>Sets the both *type* and *elementSize* properties.</p>
 
 		<h3>[method:null setItemSize]( itemSize ) </h3>
 		<p>Sets the *itemSize* property.</p>
@@ -104,10 +99,19 @@
 		<h3>[method:null setCount]( count ) </h3>
 		<p>Sets the *count* property.</p>
 
+		<h3>[property:Integer version]</h3>
+		<p>
+		A version number, incremented every time the needsUpdate property is set to true.
+		</p>
 
+		<h3>[property:Boolean needsUpdate]</h3>
+		<p>
+		Default is *false*. Setting this to true increments [page:GLBufferAttribute.version version].
+		</p>
 
 		<h2>Source</h2>
-
-		[link:https://github.com/mrdoob/three.js/blob/master/src/[path].js src/[path].js]
+		<p>
+			[link:https://github.com/mrdoob/three.js/blob/master/src/[path].js src/[path].js]
+		</p>
 	</body>
 </html>

BIN
examples/screenshots/webgl_buffergeometry_points_glbufferattribute.jpg


+ 11 - 15
examples/webgl_buffergeometry_points_glbufferattribute.html

@@ -23,6 +23,8 @@
 
 			var points;
 
+			var particles = 300000;
+
 			init();
 			animate();
 
@@ -49,8 +51,6 @@
 
 				//
 
-				var particles = 500000;
-
 				var geometry = new THREE.BufferGeometry();
 
 				var positions = [];
@@ -70,7 +70,7 @@
 					var z = Math.random() * n - n2;
 
 					positions.push( x, y, z );
-					positions2.push( z, x, y );
+					positions2.push( z * 0.3, x * 0.3, y * 0.3 );
 
 					// colors
 
@@ -98,7 +98,7 @@
 				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 );
+				var posAttr = new THREE.GLBufferAttribute( pos, gl.FLOAT, 3, 4, particles );
 				geometry.setAttribute( 'position', posAttr );
 
 				setInterval( function () {
@@ -108,15 +108,7 @@
 
 				}, 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 ) );
+				geometry.setAttribute( 'color', new THREE.GLBufferAttribute( rgb, gl.FLOAT, 3, 4, particles ) );
 
 				//
 
@@ -161,12 +153,16 @@
 
 			}
 
+			var drawCount = 10000;
 			function render() {
 
+				drawCount = ( Math.max( 5000, drawCount ) + Math.floor( 500 * Math.random() ) ) % particles;
+				points.geometry.setDrawRange( 0, drawCount );
+
 				var time = Date.now() * 0.001;
 
-				points.rotation.x = time * 0.25;
-				points.rotation.y = time * 0.5;
+				points.rotation.x = time * 0.1;
+				points.rotation.y = time * 0.2;
 
 				renderer.render( scene, camera );
 

+ 31 - 0
src/core/GLBufferAttribute.d.ts

@@ -0,0 +1,31 @@
+/**
+ * @see <a href="https://github.com/mrdoob/three.js/blob/master/src/core/GLBufferAttribute.js">src/core/GLBufferAttribute.js</a>
+ */
+
+export class GLBufferAttribute {
+
+	constructor(
+		buffer: WebGLBuffer,
+		type: number,
+		itemSize: number,
+		elementSize: 1 | 2 | 4,
+		count: number
+	);
+
+	buffer: WebGLBuffer;
+	type: number;
+	itemSize: number;
+	elementSize: 1 | 2 | 4;
+	count: number;
+	version: number;
+
+	readonly isGLBufferAttribute: true;
+
+	set needsUpdate( value: boolean );
+
+	setBuffer( buffer: WebGLBuffer ): this;
+	setType( type: number, elementSize: 1 | 2 | 4 ): this;
+	setItemSize( itemSize: number ): this;
+	setCount( count: number ): this;
+
+}

+ 14 - 33
src/core/GLBufferAttribute.js

@@ -2,36 +2,23 @@
  * @author raub / https://github.com/raub
  */
 
-
-function GLBufferAttribute( gl, buffer, type, itemSize, count, normalized ) {
-
-	this.sizes = [
-		[ gl.FLOAT, 4 ],
-		[ gl.UNSIGNED_SHORT, 2 ],
-		[ gl.SHORT, 2 ],
-		[ gl.UNSIGNED_INT, 4 ],
-		[ gl.INT, 4 ],
-		[ gl.BYTE, 1 ],
-		[ gl.UNSIGNED_BYTE, 1 ],
-	].reduce( function ( accum, current ) {
-
-		accum[ current[ 0 ] ] = current[ 1 ];
-		return accum;
-
-	}, {} );
-
-	if ( ! this.sizes[ type ] ) {
-
-		throw new TypeError( 'THREE.GLBufferAttribute: unsupported GL data type.' );
-
-	}
+/**
+ * Element size is one of:
+ * gl.FLOAT: 4
+ * gl.UNSIGNED_SHORT: 2
+ * gl.SHORT: 2
+ * gl.UNSIGNED_INT: 4
+ * gl.INT: 4
+ * gl.BYTE: 1
+ * gl.UNSIGNED_BYTE: 1
+ */
+function GLBufferAttribute( buffer, type, itemSize, elementSize, count ) {
 
 	this.buffer = buffer;
 	this.type = type;
 	this.itemSize = itemSize;
-	this.elementSize = this.sizes[ type ];
+	this.elementSize = elementSize;
 	this.count = count;
-	this.normalized = normalized === true;
 
 	this.version = 0;
 
@@ -59,16 +46,10 @@ Object.assign( GLBufferAttribute.prototype, {
 
 	},
 
-	setType: function ( type ) {
-
-		if ( ! this.sizes[ type ] ) {
-
-			throw new TypeError( 'THREE.GLBufferAttribute: unsupported GL data type.' );
-
-		}
+	setType: function ( type, elementSize ) {
 
 		this.type = type;
-		this.elementSize = this.sizes[ type ];
+		this.elementSize = elementSize;
 
 		return this;
 

+ 7 - 9
src/renderers/webgl/WebGLAttributes.js

@@ -126,19 +126,17 @@ function WebGLAttributes( gl, capabilities ) {
 
 			var cached = buffers.get( attribute );
 
-			if ( cached && cached.version >= attribute.version ) {
+			if ( ! cached || cached.version < attribute.version ) {
 
-				return;
+				buffers.set( attribute, {
+					buffer: attribute.buffer,
+					type: attribute.type,
+					bytesPerElement: attribute.elementSize,
+					version: attribute.version
+				} );
 
 			}
 
-			buffers.set( attribute, {
-				buffer: attribute.buffer,
-				type: attribute.type,
-				bytesPerElement: attribute.elementSize,
-				version: attribute.version
-			} );
-
 			return;
 
 		}

+ 2 - 0
src/renderers/webgl/WebGLBindingStates.js

@@ -175,6 +175,8 @@
 			const cachedAttribute = cachedAttributes[ key ];
 			const geometryAttribute = geometryAttributes[ key ];
 
+			if ( geometryAttribute.isGLBufferAttribute ) return true;
+
 			if ( cachedAttribute.attribute !== geometryAttribute ) return true;
 
 			if ( cachedAttribute.data !== geometryAttribute.data ) return true;