しかしながら、オブジェクトが静的なものであると分かっている場合は、自動更新を無効にして必要な時だけ、更新することが出来ます。

BufferGeometry

BufferGeometriesは、情報（頂点の位置、面のインデックス、法線、色、UV、カスタム属性など）をバッファ、つまり[link:https://developer.mozilla.org/en-US/docs/Web/JavaScript/Typed_arrays Typed_arrays](型付の配列)に保存します。このため、標準的なジオメトリよりも一般的に高速ですが、その反面、作業がやや難しくなっています。

BufferGeometriesの更新についてバッファのサイズを変更することができないということは理解しておく必要があります。(これは非常にコストがかかり、基本的には新しいジオメトリを作成するのと同じです）。しかし、バッファの内容を更新することはできます。

つまり、BufferGeometry の属性（例えば頂点の数など）が増加することがわかっている場合、新たに作成される可能性のある頂点を保持するのに十分な大きさのバッファを事前に確保しておく必要があります。もちろん、これはBufferGeometryの最大サイズが存在することになります。

ここでは、レンダリング時に拡張される線の例を使用します。バッファに500頂点分のスペースを確保しますが、[page:BufferGeometry.drawRange]を使って最初は2つだけ描画します。


const MAX_POINTS = 500;

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

// attributes
const positions = new Float32Array( MAX_POINTS * 3 ); // 3 vertices 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 );

次に以下のようにして、線上にランダムに点を追加してみましょう。


const positions = line.geometry.attributes.position.array;

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

for ( let i = 0, l = MAX_POINTS; i < l; i ++ ) {

    positions[ index ++ ] = x;
    positions[ index ++ ] = y;
    positions[ index ++ ] = z;

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

}

もし、最初の描画以降に点の数を変更したい場合は、以下のようにしてください。


line.geometry.setDrawRange( 0, newValue );

最初の描画以降に位置データの値を変更したい場合は、needsUpdateをtrueにセットする必要があります。


line.geometry.attributes.position.needsUpdate = true; // required after the first render

最初の描画以降に位置データの値を変更した場合は、frustum cullingやヘルパーといったエンジンの他の機能がちゃんと機能するようにboundingボリュームを再計算する必要があるかもしれません。


line.geometry.computeBoundingBox();
line.geometry.computeBoundingSphere();

ここ([link:https://jsfiddle.net/t4m85pLr/1/ link])では、あなたのユースケースに合わせることができるアニメーションを表示しています。

Examples

[example:webgl_custom_attributes WebGL / custom / attributes]
[example:webgl_buffergeometry_custom_attributes_particles WebGL / buffergeometry / custom / attributes / particles]

Materials

ユニフォームの値(例えば、色やテクスチャや透明度)は自由に変更することが出来ます。これらの値はフレームごとにシェーダに送られます。

GLstateに関連したパラメータ(depthTest, blending, polygonOffsetなど)もいつでも変更出来ます。

以下に示すパラメータはランタイム(マテリアルが一度描画された後)には簡単に変更ができません。

ユニフォームの種類や数
以下の要素の有無
- texture
- fog
- vertex colors
- morphing
- shadow map
- alpha test
- transparent

これらの値を変更するのには新しいシェーダプログラムが必要です、そのためには以下のように設定してください。

material.needsUpdate = true

こうすることで、プログラムはとても遅くなり、フレームレートが不安定になるかもしれないことを覚えておいてください。(特にWindowsでは、シェーダのコンパイルがOpenGLよりもDirectXの方が遅いので、より顕著に現れる可能性があります）。

より滑らかな体験を提供するために、明るさ0の光や、白紙のテクスチャ、密度0の霧といった"ダミー"の値を使うことで、これらの変化をある程度模倣することができます。

ジオメトリチャンクに使用するマテリアルは自由に変更できますが、オブジェクトをチャンクに分割する方法は変更できません。オブジェクトをどのようにチャンクに分割するからは、表面のマテリアルによって決まります。

ランタイムに異なるマテリアルの設定が必要な場合

マテリアル/チャンクの数が少ない場合は、あらかじめオブジェクトを分割しておくことができます（例：人間の場合は髪/顔/胴体/上着/ズボン、車の場合はフロント/サイド/トップ/ガラス/タイヤ/内装）。

数が多い場合（例えば、人の顔はそれぞれ違っている可能性があります）は、顔ごとに異なる外観にするために属性/テクスチャを使用するなど、別の解決策を検討してください。

Examples

[example:webgl_materials_car WebGL / materials / car]
[example:webgl_postprocessing_dof WebGL / webgl_postprocessing / dof]

[name]

BufferGeometry

Examples

Materials

ランタイムに異なるマテリアルの設定が必要な場合

Examples

Textures

Examples

Cameras