Three.js のメモ

ワールド行列

Object3D.matrixWorld は、それ自身の matrix を含んだ変換である。更新を強制するには、

obj.matrixWorldNeedsUpdate = true;
obj.updateMatrixWorld();

とすればよいはずだが、実際に render するまで更新されないことがある気配(詳細未確認)。

データテクスチャの利用

DataTexture も、power of two (POT) である必要はない。ただし、wrapping と filter の扱いに制限がある。詳細はWebGL and OpenGL Differences - WebGL Public Wiki参照。以下のようにすれば OK。

volTex = new THREE.DataTexture(map, texX, texY, THREE.RGBFormat, THREE.UnsignedByteType);
volTex.wrapS = volTex.wrapT = THREE.ClampToEdgeWrapping;
volTex.magFilter = volTex.minFilter = THREE.LinearFilter;
volTex.generateMipmaps = false;
volTex.needsUpdate = true; // 絶対必要

needsUpdate フラグを立てないとなにも表示されないので注意。通常の画像からテクスチャを作る時は不要。

頂点などの更新

r47 以降、仕組みが変わったので注意。dirty◯◯ではなくて、◯◯NeedUpdate フラグを使う。上の行列と違って、Needs と三単現の s がつくわけではないので注意。

例えば頂点バッファを更新するには、

// 最初のジオメトリを設定
geo.dynamic = true; // 最初の render 前に設定必要

render(); // 一回目

updateGeometry(); // 更新処理
geo.verticesNeedUpdate = true;

render(); // 二回目

とする。dynamic フラグをそのオブジェクトが最初に描画される前に設定しなければならない。また、頂点数を増減することはできないので、最初に十分な頂点数を確保し、余った分は (0, 0, 0) など縮退させた頂点で埋めておく。

uniform は特にフラグを立てなくとも、レンダリングごとに GPU に送信される。詳しくは、Home · mrdoob/three.js Wiki · GitHub を参照。