threejs-materials

Three.js のマテリアル

メッシュ表面の見た目とコストに関する場合は、このスキルを使用してください。画像マップ／UV／HDR アセットについては threejs-textures、ライティングとシャドウの設定については threejs-lighting、カスタム GLSL については threejs-shaders に振り分けてください。

このスキルを使用するタイミング

• ライティングなし、クラシックライティング、PBR、スタイライズ、カスタムの各用途に合ったマテリアルタイプを選択する
• ベースカラー、メタルネス、ラフネス、ノーマル／AO／エミッシブマップ、環境への反応を設定する
• 透明度のソート、裏面の不可視化、予期しない編集の共有、マテリアルのリークを修正する
• プロファイリング後に、マテリアルのバリエーション、シェーダーの複雑さ、ドローコールの断片化を減らす

手順

ステップ 1：意図を表現する最もシンプルなマテリアルを選ぶ

要件	デフォルトのマテリアル
ライティングなし／デバッグ／スプライト風メッシュ	MeshBasicMaterial
低コストなクラシック拡散シーン	MeshLambertMaterial
クラシックな鏡面反射の見た目	MeshPhongMaterial
通常の物理ベース表面	MeshStandardMaterial
クリアコート、透過、高度な PBR	MeshPhysicalMaterial
セルシェーディングスタイル	MeshToonMaterial
カスタム頂点／フラグメントプログラム	threejs-shaders 経由の ShaderMaterial

通常の PBR 作業では MeshStandardMaterial から始め、見た目の向上がシェーダーのコストとレンダラーのサポートに見合う場合にのみ、物理特性を追加します。

ステップ 2：PBR の入力値を一貫性のある形で設定する

const material = new THREE.MeshStandardMaterial({
  color: 0x9ca3af,
  metalness: 0.65,
  roughness: 0.28,
  map: baseColorTexture,
  normalMap,
  roughnessMap,
  metalnessMap,
  envMapIntensity: 1,
});

ベースカラーのテクスチャには、適切な色空間設定が必要です。ノーマル、ラフネス、メタルネス、AO などのデータマップには、表示用の色処理と同じ設定を使用しません。マップの読み込みと UV チャネルの要件については、 threejs-textures を参照してください。ライティングのない空のシーンではなく、代表的なライトと環境マップの下でマテリアルの値を評価してください。

ステップ 3：透明度を明示的に扱う

アルファブレンディングが必要な場合にのみ transparent: true を使用してください。問題を診断したうえで、視覚的な要件に応じて depthWrite、 side、alphaTest、renderOrder を設定してください。renderOrder を広範囲に上書きすると、根本にあるソートの問題が隠れることがあります。希望する見た目を満たせる場合は、はっきりと切り抜く葉やデカールにはアルファテストを優先してください。

ステップ 4：マテリアルの所有権を守る

マテリアルは共有されることがよくあります。mesh.material.color を変更すると、そのマテリアルを使うすべての対象に変更が反映されます。オブジェクトごとに変更する前にクローンを作成し、クローンのライフサイクルを明示して、最後の利用者が離れたときに dispose() を呼び出してください。

const uniqueMaterial = sharedMaterial.clone();
mesh.material = uniqueMaterial;
uniqueMaterial.color.set("#3b82f6");

ステップ 5：見た目とコストを確認する

• 直接光、環境への反応、シャドウ、中立的な背景でテストします。
• 透明なオブジェクト同士、および不透明なジオメトリとの重なりをテストします。
• 変更によって、異なるマテリアル／プログラムのバリエーションが多数生成されていないか確認します。
• 置き換えたマテリアルやクローン、そのマテリアルが所有するマップのクリーンアップをテストします。

例

金属製品の表面

MeshStandardMaterial、調整済みのベースカラー、メタルネス／ラフネスマップ、HDR 環境を使用します。環境がない金属オブジェクトには、反射するものがほとんどありません。不足している IBL 信号を補うために、任意のポイントライトを追加しても代わりにはなりません。

オブジェクトごとのハイライト

ハイライトをユニフォーム、インスタンス属性、アウトラインパス、または複製を伴わない別の仕組みで表現できない場合にのみ、共有マテリアルをクローンしてください。選択状態が変わったら、元に戻すか破棄します。

ベストプラクティス

1. 多くのパラメーターを調整する前に、レンダリングの意図に合ったマテリアルを選びます。
2. テクスチャの色空間と UV チャネルのルールを正しく保ちます。マップの解釈が間違っている場合、ラフネスを推測しても修正できません。
3. 繰り返し使うジオメトリでは、マテリアルのバリエーションを最小限にします。
4. 高コストな物理特性や透過機能を対象デバイスで測定します。
5. クローンと、それらの機能が所有するテクスチャを破棄します。ただし、共有アセットは早まって破棄しないでください。

参考資料

• Three.js マテリアルに関するソースの解説
• マテリアルのドキュメント
• Three.js マニュアル：マテリアル