ThreeJsマテリアル練習5(Physical Material編)

Physical Materialとは？

Mesh Standard Materialを拡張した物理ベースレンダリングのマテリアルです。UnityやUnrealなどにも実装されています。
3Dアプリケーション開発においては不可欠と言っても良いと思います。
Mesh Phong MaterialやMesh Standard Materialよりも光の反射や散乱などパラメーターも多く設定できるため、リアルな質感が出ると思います。
しかしリアルな質感は出ますが多用するとかなり重くなります。

設定パラメーター

リアルな質感が出るのでその分指定できるパラメーターも非常に多いです。ここではPhysical Material固有のパラメータを2つ取り上げます。

1. clearcoat ​

clearcoatは光沢層の設定が可能になります。設定値は0.0 ~ 1.0で設定が可能です。光沢層は値が高いほどroughnessだけでは表せないリアルな光沢感が出ます。

2. clearcoatRoughness

clearcoatRoughnessは光沢層の粗さの設定が行なえます。光沢層の粗さは値が高いほど光沢感の粗さを表現できます。つまり粗ければ光沢感はなくなるというわけです。

パラメーター全体を見てみるとこんな感じになります。

new THREE.MeshPhysicalMaterial({
 color: 0x6699ff,
 roughness: 0.5,
 metalness: 0.0,
 clearcoat: 1.0,
 clearcoatRoughness: 1.0,
 reflectivity: 1.0,
});

すべて1で確認してみる

const sphereMaterial = new THREE.MeshPhysicalMaterial({
 color: 0x6699ff,
 roughness: 0.5,
 metalness: 0.0,
 clearcoat: 1.0,
 clearcoatRoughness: 1.0,
 reflectivity: 1.0,
});

それなりにリアルな質感が出ていると思います。とくにライティングとの兼ね合いが重要だと思います。

値をずらしながら確認する

const sphereGeometry = new THREE.SphereBufferGeometry(10.0, 32, 32);
const step = 1.0 / 5.0;
for (let x = 0; x <= 1; x+=step) {
 for (let y = 0; y <= 1; y+=step) {
   const sphereMaterial = new THREE.MeshPhysicalMaterial({
     color: 0x6699ff,
     roughness: 0.5,
     metalness: 0.0,
     clearcoat: 1.0 - x,
     clearcoatRoughness: 0.0 + y,
     reflectivity: 1.0,
   });
   console.log(x, y);
   const Mesh = new THREE.Mesh(sphereGeometry, sphereMaterial);
   Mesh.position.x = x * 400 - 200;
   Mesh.position.y = y * 400 - 200;
   Mesh.position.z = 0.0;
   scene.add(Mesh);
 }
}

メタルネス

Physical MaterialはStandard Materialよりリアルな質感は出ますがその分かなり重くなってしまうのが難点だと思います。またそれらを活用するには光の当て方も重要なことだと思います。

ソースコード

HosodaMath/WebGLStudyNote