12/5

日記

2025/12/05

Three.js

vertexShaderで、渡されるpositionを変更するか、modelMatrixでワールド座標に変換されたmodelPositionを変更するかの違い

positionの方を変更すると、その物体の形自体が変わる。（ローカル座標空間で変更）
modelPositionを変更すると、その物体の現時点での座標にアニメーションが加わる。
例えば、planeにmodelPosition.y += sin(modelPosition.x)として、javascriptでplaneをy軸に回転するようにアニメーションさせると、ニョロニョロ動く。

適当に書いてたけど、ちゃんと理解して使い分けようって話。

geometryに回転を加えるのと、meshに加えるの

planeがあるとする。

geometry.rotateX(-Math.PI * 0.5);
geometry.rotateY(Math.PI / 4);

と

mesh.rotateX(-Math.PI * 0.5);
mesh.rotateY(Math.PI / 4);

は見た目から違う。

geometryは頂点データ(position属性)を直接変更する。元の座標軸に対して独立に適用される。
meshは変換行列(modelMatrix)を変更する。回転は順次適用され、-Math.PI*0.5適用した後のy軸は-z方向になる。

ジオメトリの形状自体を変更したい場合は、geometry(positon)を変えて、
オブジェクトの配置や向きを変更したい場合はmesh

ビット

プログラミングの抽象化が進んだため、ビットを意識する機会はなくなったらしい。
俺も知らなかったし・・・

ただ、glslの本にこの内容が書いてあったのを思い出し、なんとか理解はしようと思う。

  • 0x2の0xは16進数を表す
  • & はAND演算（どちらも1の時1）
  • | はOR演算（片方でも1があれば1）

YouTubeは最高の教材

おわりに

UDEMYでやってた、Next.jsのコース一旦ストップで。auth.js<auth-betterであることとがしれて良かった。またNext.jsが忘れそうな頃にやろうかな。
やっていない講義2個くらいあるけど、今必要じゃない。まあ、暇つぶしに見る程度で面白そう。

2進数と論理演算で工夫して短く美しいコードを書く例をみた。
わからないというのは楽しいことだねえ。

I saw an example of concise, elegant code by using binary numbers and logical operations.
Not understanding is fun.