three.js概論#5

2024/6/11

Material

マテリアルは、ジオメトリの各可視ピクセルに対してどのような色や質感を持たせるかを定義する。

各ピクセルの色を決めるアルゴリズムは、シェーダーと呼ばれるプログラムで記述される。

シェーダーの作成は、WebGLとthree.jsの最も難しい部分の1つであるが、three.jsには多くの組み込みマテリアルが用意されているため、それを使用する場合は自分でシェーダーを書く必要はない。

MeshBasicMaterial

MeshBasicMaterial は最も基本的なマテリアル。

const material = new THREE.MeshBasicMaterial({
  map: texture,
});

// または
const material = new THREE.MeshBasicMaterial();
material.map = texture;

プロパティ

Map：テクスチャを指定する。
```
const material = new THREE.MeshBasicMaterial({ map: texture });
```
- aoMap:アンビエントオクルージョンマップを指定する。AOは、物体表面の微細な凹凸や隙間による影の濃淡を表現することで、より現実的で立体感を持たせるために使用される。
```
material.aoMap = ambientOcclusionTexture;
```
- diplacementMap:変位マップを指定する。変位マップは、ジオメトリの頂点を変位させるために使用される。
```
material.displacementMap = heightTexture;
```
- metalnessMap:金属マップを指定する。金属マップは、物体の金属感を表現するために使用される。
```
material.metalnessMap = metalnessTexture;
```
- roughnessMap: 粗さマップを指定する。粗さマップは、物体の表面の粗さを表現するために使用される。
```
material.roughnessMap = roughnessTexture;
```
- normalMap: 法線マップを指定する。法線マップは、物体の表面の凹凸を表現するために使用される。
```
material.normalMap = normalTexture;
```
- alphaMap: アルファマップを指定する。アルファマップは、物体の透明度を表現するために使用される。
```
material.alphaMap = alphaTexture;
```

Color：色を指定する。プロパティを直接変更する場合は、Colorクラスを使用する必要がある。

const material = new THREE.MeshBasicMaterial({ color: 0xff0000 });

// または
const material = new THREE.MeshBasicMaterial();
material.color = new THREE.Color(0xff0000);

Wireframe：ワイヤーフレーム表示にする。
```
material.wireframe = true;
```
Opacity: 透明度を指定する。透明度を変更する場合は、transparentプロパティをtrueに設定する必要がある。
```
material.opacity = 0.5;
material.transparent = true;
```
AlphaMap：アルファマップを指定する。テクスチャで透明度を指定する場合に使用。
```
const material = new THREE.MeshBasicMaterial({ alphaMap: texture });
```
Side：面の表示方法を指定する。デフォルトは前面を表示するTHREE.FrontSide。後面を表示する場合はTHREE.BackSide、両面を表示する場合はTHREE.DoubleSideを指定する。
```
material.side = THREE.DoubleSide;
```

MeshNormalMaterial

MeshNormalMaterial は法線ベクトルを色に変換するマテリアル。

法線(Normal)とは、特定の点における曲線や曲面に垂直（直交）する直線やベクトルのこと。法線は、曲線や曲面の形状や方向性を理解するために重要な役割を果たし、反射や屈折の計算などに使用される。

const material = new THREE.MeshNormalMaterial();

MeshMatcapMaterial

MeshMatcapMaterial は Matcap と呼ばれる球面反射マップを使用するマテリアル。カメラに対する法線ベクトルの方向に応じて、球面反射マップの色が適用される。

const material = new THREE.MeshMatcapMaterial();
material.matcap = matcapTexture;

MeshDepthMaterial

MeshDepthMaterial は深度によって色を変えるマテリアル。カメラと近いほど白く、遠いほど黒くなる。

このマテリアルは、深度をテクスチャに保存するために使用され、影の処理などのために使用できる。

const material = new THREE.MeshDepthMaterial();

--- 以下のマテリアルからはライトが必要 ---

MeshLambertMaterial

MeshLambertMaterial は非物理ベースのランバート反射をシミュレートするマテリアル。光沢のある表面を表現することはできない。

このマテリアルは他のライトを必要とするマテリアルと比べて、計算量が少ないため、パフォーマンスが向上する。

const material = new THREE.MeshLambertMaterial();

MeshPhongMaterial

MeshPhongMaterial は非物理ベースのフォン反射をシミュレートするマテリアル。光沢のある表面を表現することができる。

const material = new THREE.MeshPhongMaterial();

// 光の反射を制御
material.shininess = 100;

// 光の反射の色を制御
material.specular = new THREE.Color(0x1188ff);

MeshToonMaterial

MeshToonMaterial はトゥーンシェーディングをシミュレートするマテリアル。

const material = new THREE.MeshToonMaterial();

MeshStandardMaterial

MeshStandardMaterial は物理ベースレンダリング（PBR）をシミュレートするマテリアル。粗さや金属感などを表現することができる。

const material = new THREE.MeshStandardMaterial();

// 金属感を制御
material.metalness = 0.45;

// 粗さを制御
material.roughness = 0.65;

MeshPhysicalMaterial

MeshPhysicalMaterial
は物理ベースレンダリング（PBR）をシミュレートするマテリアル。MeshStandardMaterialよりもさらに高度な物理ベースレンダリングを行う。

パフォーマンスが低いため、高度な物理ベースレンダリングが必要な場合にのみ使用したほうがいい。

以下のようなプロパティが追加されている。
- Anisotropy：異方性を制御する。異方性は、物体の表面の方向によって反射の強さが変わる性質。
- Clearcoat：クリアコートを制御する。クリアコートは、物体の表面にコーティングされた透明な薄膜のこと。
- Iridescence: 虹色効果を制御する。虹色効果は、物体の表面の微細な凹凸や屈折率の違いによって生じる色の変化。シャボン玉とか油膜のような色の変化。
- Sheen：布やファブリック素材の表現に使用。
- Transmission：透過率を制御する。透過率は、物体が光を透過する度合いのこと。
- ior: 屈折率を制御する。屈折率は、光が物体の表面に入射した際に、どのくらい曲がるかを表す値。

const material = new THREE.MeshPhysicalMaterial();

ライト

マテリアルによっては、ライトが必要なものがある。ライトを追加することで、物体の表面に影をつけたり、光の反射をシミュレートすることができる。

シーンにライトを追加するには、クラスをインスタンス化してシーンに追加する。

ライトには、AmbientLight、DirectionalLight、PointLight、SpotLightなどがある。

AmbientLight

AmbientLight は環境光を表現するライト。全体的に均等に光を当てる。

最初の引数に色、2番目の引数に光の強さを指定する。

const ambientLight = new THREE.AmbientLight(0xffffff, 1);

DirectionalLight

DirectionalLight は平行光源を表現するライト。光源の位置が無限遠にあると仮定して、全体的に均等に光を当てる。太陽光みたいなイメージ。

const directionalLight = new THREE.DirectionalLight(0x00fffc, 0.9);

HemisphereLight

HemisphereLight は半球光源を表現するライト。上方向からの光と下方向からの光を指定することができる。

最初の引数に上方向の色、2番目の引数に下方向の色、3番目の引数に光の強さを指定する。

const hemisphereLight = new THREE.HemisphereLight(0xff0000, 0x0000ff, 0.9);

PointLight

PointLight は点光源を表現するライト。光源の位置によって光の強さが変わる。電球のようなイメージ。

最初の引数に色、2番目の引数に光の強さ、3番目の引数にライトの最大範囲(0の場合は制限なし)、4番目の引数に減衰率を指定する。

const pointLight = new THREE.PointLight(0xff9000, 1.5, 0, 2);

RectAreaLight

RectAreaLight は長方形のライトを表現するライト。明るい窓やテレビの画面などの光源を表現するのに適している。

このライトはMeshStandardMaterialとMeshPhysicalMaterialのみで動作する。

最初の引数に色、2番目の引数に光の強さ、3番目の引数にライトの幅、4番目の引数にライトの高さを指定する。

const rectAreaLight = new THREE.RectAreaLight(0x4e00ff, 6, 1, 1);

SpotLight

SpotLight
はスポットライトを表現するライト。点から始まり、特定の方向に向かって円錐状に光を当てる。懐中電灯のようなイメージ。

パラメータは以下の通り。
- color: 色
- intensity: 光の強さ
- distance: ライトの最大範囲(0の場合は制限なし)
- angle: 光の角度
- penumbra: 光の柔らかさ
- decay: 減衰率

const spotLight = new THREE.SpotLight(
  0x78ff00,
  4.5,
  10,
  Math.PI * 0.1,
  0.25,
  1,
);

Targetプロパティ

SpotLightやDirectionalLightには、targetプロパティがあり、ライトのターゲット(デフォルトは(0, 0, 0))を指定できる。ライトの方向を変えるには、ターゲットの位置を変更する。

position,rotation,scaleは変換行列と呼ばれるものにコンパイルされ、それが最終的な位置、回転、スケールになる。

この処理は、three.jsの内部でシーン内にあるオブジェクトに対して行われるため、targetの位置を変更する際は、それ自体をシーンに追加する必要がある。

spotLight.target.position.x = -0.75;
scene.add(spotLight.target);

Helper

ライトの位置や方向を可視化するために、Helperクラスを使用することができる。

const spotLightHelper = new THREE.SpotLightHelper(spotLight);
scene.add(spotLightHelper);

パフォーマンス

ライトは、シーンをよりリアルに見せるために使用されるが、ライトの数が多いほど計算量が増加しパフォーマンスが低下する。そのため、ライトの数を最小限に抑えることが重要。

ベイキング

ライトの数を減らす方法として、ベイキングという手法がある。ベイキングとは、ライトの影をテクスチャに保存することで、ライトの数を減らしパフォーマンスを向上させる手法。

back