|
@@ -32,33 +32,31 @@ object.matrixAutoUpdate = false;
|
|
object.updateMatrix();
|
|
object.updateMatrix();
|
|
</code>
|
|
</code>
|
|
|
|
|
|
- <h2>Geometries</h2>
|
|
|
|
|
|
+ <h2>BufferGeometry</h2>
|
|
<div>
|
|
<div>
|
|
- <h3>[page:BufferGeometry]</h3>
|
|
|
|
- <div>
|
|
|
|
- <p>
|
|
|
|
- BufferGeometries store information (such as vertex positions, face indices, normals, colors,
|
|
|
|
- UVs, and any custom attributes) in [page:BufferAttribute buffers] - that is,
|
|
|
|
- [link:https://developer.mozilla.org/en-US/docs/Web/JavaScript/Typed_arrays typed arrays].
|
|
|
|
- This makes them generally faster than standard Geometries, at the cost of being somewhat harder to
|
|
|
|
- work with.
|
|
|
|
- </p>
|
|
|
|
- <p>
|
|
|
|
- With regards to updating BufferGeometries, the most important thing to understand is that
|
|
|
|
- you cannot resize buffers (this is very costly, basically the equivalent to creating a new geometry).
|
|
|
|
- You can however update the content of buffers.
|
|
|
|
- </p>
|
|
|
|
- <p>
|
|
|
|
- This means that if you know an attribute of your BufferGeometry will grow, say the number of vertices,
|
|
|
|
- you must pre-allocate a buffer large enough to hold any new vertices that may be created. Of
|
|
|
|
- course, this also means that there will be a maximum size for your BufferGeometry - there is
|
|
|
|
- no way to create a BufferGeometry that can efficiently be extended indefinitely.
|
|
|
|
- </p>
|
|
|
|
- <p>
|
|
|
|
- We'll use the example of a line that gets extended at render time. We'll allocate space
|
|
|
|
- in the buffer for 500 vertices but draw only two at first, using [page:BufferGeometry.drawRange].
|
|
|
|
- </p>
|
|
|
|
- <code>
|
|
|
|
|
|
+ <p>
|
|
|
|
+ BufferGeometries store information (such as vertex positions, face indices, normals, colors,
|
|
|
|
+ UVs, and any custom attributes) in [page:BufferAttribute buffers] - that is,
|
|
|
|
+ [link:https://developer.mozilla.org/en-US/docs/Web/JavaScript/Typed_arrays typed arrays].
|
|
|
|
+ This makes them generally faster than standard Geometries, at the cost of being somewhat harder to
|
|
|
|
+ work with.
|
|
|
|
+ </p>
|
|
|
|
+ <p>
|
|
|
|
+ With regards to updating BufferGeometries, the most important thing to understand is that
|
|
|
|
+ you cannot resize buffers (this is very costly, basically the equivalent to creating a new geometry).
|
|
|
|
+ You can however update the content of buffers.
|
|
|
|
+ </p>
|
|
|
|
+ <p>
|
|
|
|
+ This means that if you know an attribute of your BufferGeometry will grow, say the number of vertices,
|
|
|
|
+ you must pre-allocate a buffer large enough to hold any new vertices that may be created. Of
|
|
|
|
+ course, this also means that there will be a maximum size for your BufferGeometry - there is
|
|
|
|
+ no way to create a BufferGeometry that can efficiently be extended indefinitely.
|
|
|
|
+ </p>
|
|
|
|
+ <p>
|
|
|
|
+ We'll use the example of a line that gets extended at render time. We'll allocate space
|
|
|
|
+ in the buffer for 500 vertices but draw only two at first, using [page:BufferGeometry.drawRange].
|
|
|
|
+ </p>
|
|
|
|
+ <code>
|
|
var MAX_POINTS = 500;
|
|
var MAX_POINTS = 500;
|
|
|
|
|
|
// geometry
|
|
// geometry
|
|
@@ -78,11 +76,11 @@ var material = new THREE.LineBasicMaterial( { color: 0xff0000 } );
|
|
// line
|
|
// line
|
|
var line = new THREE.Line( geometry, material );
|
|
var line = new THREE.Line( geometry, material );
|
|
scene.add( line );
|
|
scene.add( line );
|
|
- </code>
|
|
|
|
- <p>
|
|
|
|
- Next we'll randomly add points to the line using a pattern like:
|
|
|
|
- </p>
|
|
|
|
- <code>
|
|
|
|
|
|
+ </code>
|
|
|
|
+ <p>
|
|
|
|
+ Next we'll randomly add points to the line using a pattern like:
|
|
|
|
+ </p>
|
|
|
|
+ <code>
|
|
var positions = line.geometry.attributes.position.array;
|
|
var positions = line.geometry.attributes.position.array;
|
|
|
|
|
|
var x, y, z, index;
|
|
var x, y, z, index;
|
|
@@ -99,50 +97,52 @@ for ( var i = 0, l = MAX_POINTS; i < l; i ++ ) {
|
|
z += ( Math.random() - 0.5 ) * 30;
|
|
z += ( Math.random() - 0.5 ) * 30;
|
|
|
|
|
|
}
|
|
}
|
|
- </code>
|
|
|
|
- <p>
|
|
|
|
- If you want to change the <em>number of points</em> rendered after the first render, do this:
|
|
|
|
- </p>
|
|
|
|
- <code>
|
|
|
|
|
|
+ </code>
|
|
|
|
+ <p>
|
|
|
|
+ If you want to change the <em>number of points</em> rendered after the first render, do this:
|
|
|
|
+ </p>
|
|
|
|
+ <code>
|
|
line.geometry.setDrawRange( 0, newValue );
|
|
line.geometry.setDrawRange( 0, newValue );
|
|
- </code>
|
|
|
|
- <p>
|
|
|
|
- If you want to change the position data values after the first render, you need to
|
|
|
|
- set the needsUpdate flag like so:
|
|
|
|
- </p>
|
|
|
|
- <code>
|
|
|
|
|
|
+ </code>
|
|
|
|
+ <p>
|
|
|
|
+ If you want to change the position data values after the first render, you need to
|
|
|
|
+ set the needsUpdate flag like so:
|
|
|
|
+ </p>
|
|
|
|
+ <code>
|
|
line.geometry.attributes.position.needsUpdate = true; // required after the first render
|
|
line.geometry.attributes.position.needsUpdate = true; // required after the first render
|
|
- </code>
|
|
|
|
|
|
+ </code>
|
|
|
|
|
|
- <p>
|
|
|
|
- If you change the position data values after the initial render, you may need to
|
|
|
|
- call `.computeBoundingSphere()` in order to recalculate the geometry's bounding sphere.
|
|
|
|
- </p>
|
|
|
|
- <code>
|
|
|
|
|
|
+ <p>
|
|
|
|
+ If you change the position data values after the initial render, you may need to
|
|
|
|
+ call `.computeBoundingSphere()` in order to recalculate the geometry's bounding sphere.
|
|
|
|
+ </p>
|
|
|
|
+ <code>
|
|
line.geometry.computeBoundingSphere();
|
|
line.geometry.computeBoundingSphere();
|
|
- </code>
|
|
|
|
|
|
+ </code>
|
|
|
|
|
|
- <p>
|
|
|
|
- [link:http://jsfiddle.net/w67tzfhx/ Here is a fiddle] showing an animated line which you can adapt to your use case.
|
|
|
|
- </p>
|
|
|
|
|
|
+ <p>
|
|
|
|
+ [link:http://jsfiddle.net/w67tzfhx/ Here is a fiddle] showing an animated line which you can adapt to your use case.
|
|
|
|
+ </p>
|
|
|
|
|
|
- <h3>Examples:</h3>
|
|
|
|
- [example:webgl_custom_attributes WebGL / custom / attributes]<br />
|
|
|
|
- [example:webgl_buffergeometry_custom_attributes_particles WebGL / buffergeometry / custom / attributes / particles]
|
|
|
|
|
|
+ <h3>Examples</h3>
|
|
|
|
|
|
|
|
+ <p>
|
|
|
|
+ [example:webgl_custom_attributes WebGL / custom / attributes]<br />
|
|
|
|
+ [example:webgl_buffergeometry_custom_attributes_particles WebGL / buffergeometry / custom / attributes / particles]
|
|
|
|
+ </p>
|
|
|
|
|
|
- </div>
|
|
|
|
|
|
+ </div>
|
|
|
|
|
|
- <h3>[page:Geometry]</h3>
|
|
|
|
- <div>
|
|
|
|
- <p>
|
|
|
|
- The following flags control updating of various geometry attributes. Set flags only
|
|
|
|
- for attributes that you need to update, updates are costly. Once buffers
|
|
|
|
- change, these flags reset automatically back to false. You need to keep setting them to
|
|
|
|
- true if you want to keep updating buffers. Note that this applies only to [page:Geometry]
|
|
|
|
- and not to [page:BufferGeometry].
|
|
|
|
- </p>
|
|
|
|
- <code>
|
|
|
|
|
|
+ <h2>Geometry</h2>
|
|
|
|
+ <div>
|
|
|
|
+ <p>
|
|
|
|
+ The following flags control updating of various geometry attributes. Set flags only
|
|
|
|
+ for attributes that you need to update, updates are costly. Once buffers
|
|
|
|
+ change, these flags reset automatically back to false. You need to keep setting them to
|
|
|
|
+ true if you want to keep updating buffers. Note that this applies only to [page:Geometry]
|
|
|
|
+ and not to [page:BufferGeometry].
|
|
|
|
+ </p>
|
|
|
|
+ <code>
|
|
var geometry = new THREE.Geometry();
|
|
var geometry = new THREE.Geometry();
|
|
geometry.verticesNeedUpdate = true;
|
|
geometry.verticesNeedUpdate = true;
|
|
geometry.elementsNeedUpdate = true;
|
|
geometry.elementsNeedUpdate = true;
|
|
@@ -151,27 +151,20 @@ geometry.uvsNeedUpdate = true;
|
|
geometry.normalsNeedUpdate = true;
|
|
geometry.normalsNeedUpdate = true;
|
|
geometry.colorsNeedUpdate = true;
|
|
geometry.colorsNeedUpdate = true;
|
|
geometry.tangentsNeedUpdate = true;
|
|
geometry.tangentsNeedUpdate = true;
|
|
- </code>
|
|
|
|
-
|
|
|
|
- <p>
|
|
|
|
- In versions prior to [link:https://github.com/mrdoob/three.js/releases/tag/r66 r66] meshes
|
|
|
|
- additionally need the <em>dynamic</em> flag enabled (to keep internal typed arrays):
|
|
|
|
- </p>
|
|
|
|
|
|
+ </code>
|
|
|
|
|
|
- <code>
|
|
|
|
- //removed after r66
|
|
|
|
- geometry.dynamic = true;
|
|
|
|
- </code>
|
|
|
|
|
|
+ <p>
|
|
|
|
+ In versions prior to [link:https://github.com/mrdoob/three.js/releases/tag/r66 r66] meshes
|
|
|
|
+ additionally need the <em>dynamic</em> flag enabled (to keep internal typed arrays):
|
|
|
|
+ </p>
|
|
|
|
|
|
- <h3>Examples:</h3>
|
|
|
|
- [example:webgl_geometry_dynamic WebGL / geometry / dynamic]<br />
|
|
|
|
- </div>
|
|
|
|
|
|
+ <code>
|
|
|
|
+ //removed after r66
|
|
|
|
+ geometry.dynamic = true;
|
|
|
|
+ </code>
|
|
|
|
|
|
</div>
|
|
</div>
|
|
|
|
|
|
-
|
|
|
|
-
|
|
|
|
-
|
|
|
|
<h2>Materials</h2>
|
|
<h2>Materials</h2>
|
|
<div>
|
|
<div>
|
|
<p>All uniforms values can be changed freely (e.g. colors, textures, opacity, etc), values are sent to the shader every frame.</p>
|
|
<p>All uniforms values can be changed freely (e.g. colors, textures, opacity, etc), values are sent to the shader every frame.</p>
|
|
@@ -208,9 +201,11 @@ geometry.tangentsNeedUpdate = true;
|
|
|
|
|
|
<p>If the number is large (e.g. each face could be potentially different), consider a different solution, such as using attributes / textures to drive different per-face look.</p>
|
|
<p>If the number is large (e.g. each face could be potentially different), consider a different solution, such as using attributes / textures to drive different per-face look.</p>
|
|
|
|
|
|
- <h3>Examples:</h3>
|
|
|
|
- [example:webgl_materials_car WebGL / materials / car]<br />
|
|
|
|
- [example:webgl_postprocessing_dof WebGL / webgl_postprocessing / dof]
|
|
|
|
|
|
+ <h3>Examples</h3>
|
|
|
|
+ <p>
|
|
|
|
+ [example:webgl_materials_car WebGL / materials / car]<br />
|
|
|
|
+ [example:webgl_postprocessing_dof WebGL / webgl_postprocessing / dof]
|
|
|
|
+ </p>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
|
|
|
|
@@ -222,9 +217,11 @@ geometry.tangentsNeedUpdate = true;
|
|
</code>
|
|
</code>
|
|
<p>Render targets update automatically.</p>
|
|
<p>Render targets update automatically.</p>
|
|
|
|
|
|
- <h3>Examples:</h3>
|
|
|
|
- [example:webgl_materials_video WebGL / materials / video]<br />
|
|
|
|
- [example:webgl_rtt WebGL / rtt]
|
|
|
|
|
|
+ <h3>Examples</h3>
|
|
|
|
+ <p>
|
|
|
|
+ [example:webgl_materials_video WebGL / materials / video]<br />
|
|
|
|
+ [example:webgl_rtt WebGL / rtt]
|
|
|
|
+ </p>
|
|
|
|
|
|
</div>
|
|
</div>
|
|
|
|
|