見出し画像

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. 増殖数は任意。

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

画像1

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

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

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

3. 自由だよ1

画像2

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

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

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

画像3

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

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

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

この記事が気に入ったら、サポートをしてみませんか?
気軽にクリエイターの支援と、記事のオススメができます!
駆け出しのフロントエンジニア、インタラクションデザイナー WebGL(Threejs)、WebAudioAPI、Blender、Rust、C++、TypeScript、JavaScript