提交 950cf43e 编写于 作者: C Casey Grun

Improved documentation of BufferAttribute and BufferGeometry

上级 b9fbbaf2
......@@ -9,36 +9,99 @@
<body>
<h1>[name]</h1>
<div class="desc">todo</div>
<div class="desc">
This class stores data for an attribute associated with a [page:BufferGeometry]. See that page for details. This class is used to store builtin attributes such as vertex position, normals, color, etc., but can also be used in your code to store custom attributes in a [page:BufferGeometry].
</div>
<h2>Example</h2>
<code>todo</code>
<h2>Constructor</h2>
<h3>[name]([page:Array array], [page:Integer itemSize])</h3>
<div>
Instantiates this attibute with data from the associated buffer. The array can either be a regular Array or a Typed Array.
itemSize gives the number of values of the array that should be associated with a particular vertex.
</div>
<h2>Properties</h2>
<h3>todo</h3>
<div></div>
<h3>.[page:Array array]</h3>
<div>
Stores the data associated with this attribute; can be an Array or a Typed Array. This element should have <code>itemSize * numVertices</code> elements, where numVertices is the number of vertices in the associated [page:BufferGeometry geometry].
</div>
<h3>.[page:Integer itemSize]</h3>
<div>
Records how many items of the array are 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.
</div>
<h2>Properties</h2>
<h3>.[page:Integer length]</h3>
<div>
Gives the total number of elements in the array.
</div>
<h3>todo</h3>
<h3>.[page:Boolean needsUpdate]</h3>
<div>
todo
</div>
Flag to indicate that this attribute has changed and should be re-send to the GPU. Set this to true when you modify the value of the array.
</div>
<h2>Methods</h2>
<h3>.copyAt ( [page:Integer index1], attribute, [page:Integer index2] ) </h3>
<div>
Copies itemSize values in the array from the vertex at index2 to the vertex at index1.
</div>
<h3>todo</h3>
<div>todo</div>
<h3>.set ( [page:Array value] ) </h3>
<div>
todo
Sets the associated array with values from the passed array.
</div>
<h3>.setX ( index, x ) </h3>
<div>
Sets the value of the array at <code>index * itemSize</code> to x
</div>
<h3>.setY ( index, y ) </h3>
<div>
Sets the value of the array at <code>index * itemSize + 1</code> to y
</div>
<h3>.setZ ( index, z ) </h3>
<div>
Sets the value of the array at <code>index * itemSize + 2</code> to z
</div>
<h3>.setXY ( index, x, y ) </h3>
<div>
Sets the value of the array at <code>index * itemSize</code> to x and
sets the value of the array at <code>index * itemSize + 1</code> to y
</div>
<h3>.setXYZ ( index, x, y, z ) </h3>
<div>
Sets the value of the array at <code>index * itemSize</code> to x,
the value of the array at <code>index * itemSize + 1</code> to y, and
the value of the array at <code>index * itemSize + 2</code> to z.
</div>
<h3>.setXYZW ( index, x, y, z, w ) </h3>
<div>
Sets the value of the array at <code>index * itemSize</code> to x,
the value of the array at <code>index * itemSize + 1</code> to y,
the value of the array at <code>index * itemSize + 2</code> to z, and
the value of the array at <code>index * itemSize + 3</code> to w.
</div>
<h3>.clone () </h3>
<div>
Copies this attribute.
</div>
<h2>Source</h2>
[link:https://github.com/mrdoob/three.js/blob/master/src/[path].js src/[path].js]
......
......@@ -10,11 +10,90 @@
<h1>[name]</h1>
<div class="desc">
This is a super efficient class for geometries because it saves all data in buffers. <br />
It reduces memory costs and cpu cycles. But it is not as easy to work with because of all the necessary buffer calculations.<br />
It is mainly interesting when working with static objects.
<p>
This class is an efficient alternative to [page:Geometry], because it stores all data, including
vertex positions, face indices, normals, colors, UVs, and custom attributes within buffers; this
reduces the cost of passing all this data to the GPU.
This also makes BufferGeometry harder to work with than [page:Geometry]; rather than accessing
position data as [page:Vector3] objects, color data as [page:Color] objects, and so on, you have to
access the raw data from the appropriate [page:BufferAttribute attribute] buffer. This makes
BufferGeometry best-suited for static objects where you don't need to manipulate the geometry much
after instantiating it.
</p>
<h3>Example</h3>
<code>
var geometry = new THREE.BufferGeometry();
// create a simple square shape. We duplicate the top left and bottom right
// vertices because each vertex needs to appear once per triangle.
var vertexCount = 6;
var vertices = new Float32Array( vertexCount * 3 ); // three components per vertex
var vertexPositions = [ [-1, 1, 0], [1, 1, 0], [1, -1, 0],
[-1, 1, 0], [1,-1, 0], [-1,-1, 0] ];
// components of the position vector for each vertex are stored
// contiguously in the buffer.
for ( var i = 0; i < vertexPosition.length; i++ )
{
vertices[ i + 0 ] = vertexPositions[i][0];
vertices[ i + 1 ] = vertexPositions[i][1];
vertices[ i + 2 ] = vertexPositions[i][2];
}
// itemSize = 3 because there are 3 values (components) per vertex
geometry.addAttribute( 'position', new THREE.BufferAttribute( vertices, 3 ) );
var material = new THREE.MeshBasicMaterial( { color: 0xff0000 } );
var mesh = new THREE.Mesh( geometry, material );
</code>
View the source of the fromGeometry method for
<h3>Accessing attributes</h3>
<p>
WebGL stores data associated with individual vertices of a geometry in <emph>attributes</emph>.
Examples include the position of the vertex, the normal vector for the vertex, the vertex color,
and so on. When using [page:Geometry], the [page:WebGLRenderer renderer] takes care of wrapping
up this information into typed array buffers and sending this data to the shader. With
BufferGeometry, all of this data is stored in buffers associated with an individual attributes.
This means that to get the position data associated with a vertex (for instance), you must call
getAttribute to access the 'position' [page:BufferAttribute attribute], then access the individual
x, y, and z coordinates of the position.
</p>
<p>
The following attributes are set by various members of this class:
</p>
<h4>[page:BufferAttribute position] (itemSize: 3)</h4>
<div>
Stores the x, y, and z coordinates of each vertex in this geometry. Set by fromGeometry().
</div>
<h4>[page:BufferAttribute normal] (itemSize: 3)</h4>
<div>
Stores the x, y, and z components of the face or vertex normal vector of each vertex in this geometry.
Set by fromGeometry().
</div>
<h4>[page:BufferAttribute color] (itemSize: 3)</h4>
<div>
Stores the red, green, and blue channels of vertex color of each vertex in this geometry.
Set by fromGeometry().
</div>
<h4>[page:BufferAttribute tangent] (itemSize: 3)</h4>
<div>
Stores the x, y, and z components of the tangent vector of each vertex in this geometry. Set by computeTangents().
</div>
<h4>[page:BufferAttribute index] (itemSize: 3)</h4>
Allows for vertices to be re-used across multiple triangles; this is called using "indexed triangles," and works much the same as it does in [page:Geometry]: each triangle is associated with the index of three vertices. This attribute therefore stores the index of each vertex for each triangular face.
If this attribute is not set, the [page:WebGLRenderer renderer] assumes that each three contiguous positions represent a single triangle.
</div>
<p>
In addition to the the built-in attributes, you can set your own custom attributes using the addAttribute method. With [page:Geometry], these attributes are set and stored on the [page:Material]. In BufferGeometry, the attributes are stored with the geometry itself. Note that you still need to set the attributes information on the material as well, but the value of each attribute is stored in the BufferGeometry.
</p>
<h2>Constructor</h2>
......@@ -34,26 +113,33 @@
<h3>.[page:Hashmap attributes]</h3>
<div>
This hashmap has as id the name of the attribute to be set and as value the buffer to set it to.
This hashmap has as id the name of the attribute to be set and as value the [page:BufferAttribute buffer] to set it to.
Rather than accessing this property directly, use addAttribute and getAttribute to access attributes of this geometry.
</div>
<h3>.[page:Boolean dynamic]</h3>
<!--
<h3>.[page:Boolean dynamic]</h3>
<div>
When set, it holds certain buffers in memory to have faster updates for this object. When unset, it deletes those buffers and saves memory.
</div>
When set, it holds certain buffers in memory to have faster updates for this object. When unset, it deletes those buffers and saves memory.
</div> -->
<h3>.[page:Array offsets]</h3>
<h3>.[page:Array drawCalls] (previously .[page:Array offsets])</h3>
<div>
This Array should contain every offset at which the buffers should be rendered. This is important for indexed buffers.
For geometries that use indexed triangles, this Array can be used to split the object into multiple WebGL draw calls. Each draw call will draw some subset of the vertices in this geometry using the configured [page:Material shader]. This may be necessary if, for instance, you have more than 65535 vertices in your object.
Each element is an object of the form:
<code>{ start: Integer, count: Integer, index: Integer }</code>
where start specifies the index of the first vertex in this draw call, count specifies how many vertices are included, and index specifies an optional offset.
Use addDrawCall to add draw calls, rather than modifying this array directly.
</div>
<h3>.[page:Object boundingBox]</h3>
<h3>.[page:Box3 boundingBox]</h3>
<div>
Bounding box.
<code>{ min: new THREE.Vector3(), max: new THREE.Vector3() }</code>
</div>
<h3>.[page:Object boundingSphere]</h3>
<h3>.[page:Sphere boundingSphere]</h3>
<div>
Bounding sphere.
<code>{ radius: float }</code>
......@@ -75,6 +161,19 @@
<h3>[page:EventDispatcher EventDispatcher] methods are available on this class.</h3>
<h3>addAttribute( [page:String name], [page:BufferAttribute: attribute] )</h3>
<div>
Adds an attribute to this geometry. Use this rather than the attributes property,
because an internal array of attributes is maintained to speed up iterating over
attributes.
</div>
<h3>addDrawCall( [page:Integer start], [page:Integer count], [page:Integer indexOffset] )</h3>
<div>
Adds a draw call to this geometry; see the drawcalls property for details.
</div>
<h3>.applyMatrix( [page:Matrix4 matrix] )</h3>
<div>
Bakes matrix transform directly into vertex coordinates.
......@@ -110,6 +209,11 @@
You need to call this when you want the bufferGeometry removed while the application is running.
</div>
<h3>getAttribute( [page:String name] )</h3>
<div>
Returns the [page:BufferAttribute attribute] with the specified name.
</div>
<h3>.normalizeNormals()</h3>
<div>
Every normal vector in a geometry will have a magnitude of 1.
......
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册