12/12

もう金曜日か。

Three.js

onBeforeCompileよりcustom-shader-material

アップデートとかで使えなくなったりといったことを考えると、ライブラリを使うほうが良いかもとのこと。わかりやすいし。

球体での法線計算

平面での動く法線の計算は、簡単な近傍法でできた。では球体は？

表面に沿った方向が保証されないため、tangent（接線）とbitangent（徒接線）を使う。

面のtangentとは

面に垂直な線、法線があるのはもちろん知っている。

面に沿う線、tangentがあるらしい。

uvのuの方向にtangent（接線）,
uvのvの方向にbitangent（従接線）があるらしい。

接線は、各頂点に保存されるベクトル。
geometry.computeTangents()とするだけでtangentが取得できる。

ドキュメントを見ればわかるが、インデックス付きジオメトリであることが条件。
デフォルトでは非インデックス付きジオメトリなので、インデックス付きジオメトリに変換する必要がある。

import * as BufferGeometryUtils from 'three/addons/utils/BufferGeometryUtils.js';

geometry = BufferGeometryUtils.mergeVertices(geometry);
geometry.computeTangents();

console.log(geometry.attributes) // tangentが追加されている

Safari

またサファリパークで問題が発生

こちらの記事

感想

あー、もう金曜か〜

毎週土曜に復習日と考えていると、なくなりがちな曜日感覚が復活してよいね。

Thinking of every Saturday as review day helps get back a sense of the days that tends to lose.