samien
/
three.js
mirror of https://github.com/mrdoob/three.js.git


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276
							<!DOCTYPE html><html lang="en"><head>
    <meta charset="utf-8">
    <title>How to update Things</title>
    <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
    <meta name="twitter:card" content="summary_large_image">
    <meta name="twitter:site" content="@threejs">
    <meta name="twitter:title" content="Three.js – How to update Things">
    <meta property="og:image" content="https://threejs.org/files/share.png">
    <link rel="shortcut icon" href="../../files/favicon_white.ico" media="(prefers-color-scheme: dark)">
    <link rel="shortcut icon" href="../../files/favicon.ico" media="(prefers-color-scheme: light)">

    <link rel="stylesheet" href="../resources/lesson.css">
    <link rel="stylesheet" href="../resources/lang.css">
<script type="importmap">
{
  "imports": {
    "three": "../../build/three.module.js"
  }
}
</script>
  </head>
  <body>
    <div class="container">
      <div class="lesson-title">
        <h1>How to update Things</h1>
      </div>
      <div class="lesson">
        <div class="lesson-main">
          
          <div>
            <p>All objects by default automatically update their matrices if they have been added to the scene with</p>
<pre class="prettyprint notranslate lang-js" translate="no">
const object = new THREE.Object3D();
scene.add( object );
</pre>
            or if they are the child of another object that has been added to the scene:
<pre class="prettyprint notranslate lang-js" translate="no">
const object1 = new THREE.Object3D();
const object2 = new THREE.Object3D();

object1.add( object2 );
scene.add( object1 ); //object1 and object2 will automatically update their matrices
</pre>
          </div>
      
          <p>However, if you know the object will be static, you can disable this and update the transform matrix manually just when needed.</p>
      
<pre class="prettyprint notranslate lang-js" translate="no">
object.matrixAutoUpdate = false;
object.updateMatrix();
</pre>
      
          <h2>BufferGeometry</h2>
          <div>
            <p>
              BufferGeometries store information (such as vertex positions, face indices, normals, colors,
              UVs, and any custom attributes) in attribute 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 `BufferGeometry.drawRange`.
            </p>
<pre class="prettyprint notranslate lang-js" translate="no">
const MAX_POINTS = 500;

// geometry
const geometry = new THREE.BufferGeometry();

// attributes
const positions = new Float32Array( MAX_POINTS * 3 ); // 3 floats (x, y and z) per point
geometry.setAttribute( 'position', new THREE.BufferAttribute( positions, 3 ) );

// draw range
const drawCount = 2; // draw the first 2 points, only
geometry.setDrawRange( 0, drawCount );

// material
const material = new THREE.LineBasicMaterial( { color: 0xff0000 } );

// line
const line = new THREE.Line( geometry, material );
scene.add( line );
</pre>
             <p>
              Next we'll randomly add points to the line using a pattern like:
            </p>
<pre class="prettyprint notranslate lang-js" translate="no">
const positionAttribute = line.geometry.getAttribute( 'position' );

let x = 0, y = 0, z = 0;

for ( let i = 0; i < positionAttribute.count; i ++ ) {

    positionAttribute.setXYZ( i, x, y, z );

    x += ( Math.random() - 0.5 ) * 30;
    y += ( Math.random() - 0.5 ) * 30;
    z += ( Math.random() - 0.5 ) * 30;

}
</pre>
            <p>
              If you want to change the <em>number of points</em> rendered after the first render, do this:
            </p>
<pre class="prettyprint notranslate lang-js" translate="no">
line.geometry.setDrawRange( 0, newValue );
</pre>
            <p>
              If you want to change the position data values after the first render, you need to
              set the needsUpdate flag like so:
            </p>
<pre class="prettyprint notranslate lang-js" translate="no">
positionAttribute.needsUpdate = true; // required after the first render
</pre>
      
            <p>
              If you change the position data values after the initial render, you may need to recompute
              bounding volumes so other features of the engine like view frustum culling or helpers properly work.
            </p>
<pre class="prettyprint notranslate lang-js" translate="no">
line.geometry.computeBoundingBox();
line.geometry.computeBoundingSphere();
</pre>
      
            <p>
              [link:https://jsfiddle.net/t4m85pLr/1/ Here is a fiddle] showing an animated line which you can adapt to your use case.
            </p>
      
            <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>
      
          <h2>Materials</h2>
          <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>Also GLstate related parameters can change any time (depthTest, blending, polygonOffset, etc).</p>
      
            <p>The following properties can't be easily changed at runtime (once the material is rendered at least once):</p>
            <ul>
              <li>numbers and types of uniforms</li>
              <li>presence or not of
                <ul>
                  <li>texture</li>
                  <li>fog</li>
                  <li>vertex colors</li>
                  <li>morphing</li>
                  <li>shadow map</li>
                  <li>alpha test</li>
                  <li>transparent</li>
                </ul>
              </li>
            </ul>
      
            <p>Changes in these require building of new shader program. You'll need to set</p>
            <code>material.needsUpdate = true</code>
      
            <p>Bear in mind this might be quite slow and induce jerkiness in framerate (especially on Windows, as shader compilation is slower in DirectX than OpenGL).</p>
      
            <p>For smoother experience you can emulate changes in these features to some degree by having "dummy" values like zero intensity lights, white textures, or zero density fog.</p>
      
            <p>You can freely change the material used for geometry chunks, however you cannot change how an object is divided into chunks (according to face materials). </p>
      
            <h3>If you need to have different configurations of materials during runtime:</h3>
            <p>If the number of materials / chunks is small, you could pre-divide the object beforehand (e.g. hair / face / body / upper clothes / trousers for a human, front / sides / top / glass / tire / interior for a car). </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>
            <p>
              [example:webgl_materials_car WebGL / materials / car]<br />
              [example:webgl_postprocessing_dof WebGL / webgl_postprocessing / dof]
            </p>
          </div>
      
      
          <h2>Textures</h2>
          <div>
            <p>Image, canvas, video and data textures need to have the following flag set if they are changed:</p>
            <code>
              texture.needsUpdate = true;
            </code>
            <p>Render targets update automatically.</p>
      
            <h3>Examples</h3>
            <p>
              [example:webgl_materials_video WebGL / materials / video]<br />
              [example:webgl_rtt WebGL / rtt]
            </p>
      
          </div>
      
          <h2>Cameras</h2>
          <div>
            <p>A camera's position and target is updated automatically. If you need to change</p>
            <ul>
              <li>
                fov
              </li>
              <li>
                aspect
              </li>
              <li>
                near
              </li>
              <li>
                far
              </li>
            </ul>
            <p>
              then you'll need to recompute the projection matrix:
            </p>
<pre class="prettyprint notranslate lang-js" translate="no">
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
</pre>
          </div>
      
          <h2>InstancedMesh</h2>
          <div>
            <p>
              `InstancedMesh` is a class for conveniently access instanced rendering in `three.js`. Certain library features like view frustum culling or
              ray casting rely on up-to-date bounding volumes (bounding sphere and bounding box). Because of the way how `InstancedMesh` works, the class
              has its own `boundingBox` and `boundingSphere` properties that supersede the bounding volumes on geometry level.
            </p>
            <p>
              Similar to geometries you have to recompute the bounding box and sphere whenever you change the underlying data. In context of `InstancedMesh`, that
              happens when you transform instances via `setMatrixAt()`. You can use the same pattern like with geometries.
            </p>
<pre class="prettyprint notranslate lang-js" translate="no">
instancedMesh.computeBoundingBox();
instancedMesh.computeBoundingSphere();
</pre>
      
          </div>
      
          <h2>SkinnedMesh</h2>
          <div>
            <p>
              `SkinnedMesh` follows the same principles like `InstancedMesh` in context of bounding volumes. Meaning the class has its own version of
              `boundingBox` and `boundingSphere` to correctly enclose animated meshes.
              When calling `computeBoundingBox()` and `computeBoundingSphere()`, the class computes the respective bounding volumes based on the current
              bone transformation (or in other words the current animation state).
            </p>
          </div>

        </div>
      </div>
    </div>

  <script src="../resources/prettify.js"></script>
  <script src="../resources/lesson.js"></script>


</body></html>