blenderで作ったモデルをThree.jsで表示させたいとなったとき、Exportする形式を模索。
glbファイル形式
three.jsではGLTFローダーを使うのが主流っぽく、gltfファイルとglbファイルを扱える。特にglbファイルは以下のテクスチャやデータがすべて1つのファイルにバイナリ形式でパッケージ化されており、.glbファイルを使うと、これらの個別のテクスチャファイル（PNGやJPEGファイルなど）を別途提供する必要がなく楽そう。
- メッシュ（頂点情報、ポリゴンなど）
- マテリアル（ディフューズ、スペキュラ、ラフネスなど）
- テクスチャ（ディフューズ、ノーマル、ラフネス、メタリックなどのマップ）
- アニメーション（ボーン情報、キーフレームなど、あれば）
通常、.gltfファイルの場合、ディフューズマップ、ノーマルマップ、ラフネスマップなどは別々のファイル（diffuse.png, normal.png, roughness.png など）として存在し、それらが .gltf ファイル内で参照される。モデルやテクスチャの数が多くなったとき、読み込むコードを書くだけでもかなり大変になる
Blenderからエキスポートテスト
まず普通にノイズテクスチャをつかったり、カラーランプを使ってglbファイルで書き出してみました。最初にThree.jsサイトのEditorで確認ができるらしいのですが、そこに持って行ってみてもやはりちゃんと表示されてないので、ブラウザでも同様に表示されていませんでした。
基本的にマテリアルはカラーやラフネスも単純に一色、一つの数値などでないと反映されないようです。
この複雑なシェーダーをBlender側ですべてテクスチャにベイクします。
これをglbファイルとしてエキスポートすると、
（ライトの関係で別物のように見えますが）無事Three.jsでまだら模様や局所的なラフネスなどのマテリアルを再現できました。微妙に強度などが違うので、調整の必要はありそうです。
