ThreeJsマテリアル練習4(スタンダードマテリアル)(前編)

スタンダードマテリアルは物理ベースレンダリングのマテリアルです。UnityやUnrealなどにも実装されています。
3Dアプリケーション開発においては不可欠と言っても良いと思います。

ランバートシェーディングやフォンシェーディングよりも光の反射や散乱などパラメーターも多く設定できるため、リアルな質感が出ると思います。

1. どのようなパラメーターが設定できるか実際に確認してみる。

new THREE.MeshStandardMaterial({
   color: 0x66ff99,
   roughness: 0.5,
   metalness: 1.0,});

ざっくりとした感じですが、1つ1つの意味を列挙すると。

colorは色の設定です。(これは他のマテリアルと共通です)
roughnessは光沢感の設定です。設定値としては0.0から1.0の間で値が高いほど光沢感が出ます。
metalnessは金属感の設定です。設定値は2つしかなく0.0が非金属、1.0が金属です。

2. Dodecahedronの増殖。

以下は条件です。
1. その名の通りDodecahedronを増殖させる。
2. 色は0x66ff99,0x6699ff,0xff9900の3色のみ。
3. roughnessはすべて0.5を設定。
4. metalnessは1.0を選択。
5. 増殖数は任意。

実装するとこんな感じになる。

メタル感が出ていると思います。

ここまではあくまで学習目的で実装しました。

ここからは特に制限を設けずに実装しました。

3. 自由だよ1

メタル感のあるペイントができました。

1つ欠点なのはライティング用のライトも軌跡が残ってしまったことです。

改良した画像は以下です。

ライトの軌跡は残っていないと思います。

すべてソースコードは以下にあります。

HosodaMath/WebGLStudyNote

後半はまたどこかで投稿しようと思います。