threejs-procedural-materials

プロシージャルマテリアル

チャンネルごとの効果を寄せ集めるのではなく、原因グラフを構築します。

stable coordinates -> structural causes -> identity weights
  -> causal modifiers -> filtered microstructure
  -> NodeMaterial PBR slots -> final-image owner

標準的な不透明／発光 PBR には MeshStandardNodeMaterial を使い、追加のローブや輸送特性がサーフェスの一部となる場合に限り MeshPhysicalNodeMaterial を使います。フラグメント出力全体を置き換えるのではなく、ノードスロットを割り当てて Three.js のライティング、環境、シャドウ、エネルギー処理を維持します。

複数のシステムを使うシーンでは、$threejs-choose-skills を任意の調整役として利用できます。Fields は共有スカラー／ベクトルの原因を管理し、geometry はシルエットを管理し、water はサーフェス／輸送を管理し、最終画像パイプラインはトーンマッピングとディスプレイ変換を管理します。各動的要因またはシステム間要因を利用する際は、単位、座標／フレーム規約、生成側と利用側のオーナー、リビジョン、空間／時間サポートとフィルター、有効領域、誤差上限、更新頻度、古さの判定ルールを明示します。視覚的なマテリアル状態が別のシミュレーションオーナーになることはありません。

ストレージを確保したり、コンピュートで書き込む原因マップをディスパッチしたり、ストレージを使うマテリアル分岐をコンパイルしたりする前に、レンダラーを初期化して機能を判定します。

await renderer.init();
if (renderer.backend.isWebGPUBackend !== true) {
  throw new Error('Native WebGPU is required for procedural material GPU branches.');
}
const { features, limits } = renderer.backend.device;

初期化された機能と制限に基づいて、サンプリング／ストレージのバインディング、書き込み可能なフォーマット、フィルタリングを選択します。

1. 座標、原因、識別情報を確定する

物理的または制作者が設定した原因に基づき、UV、オブジェクト、ワールド、放射状、生成テクスチャのいずれの空間を使うか選択します。スケールはメートルまたは明示したアート単位で記録します。異なる原因に使う場合は空間を混在させてもかまいません。たとえば、ワールド高さに基づく濡れをオブジェクト空間の粒状感に重ねる場合です。

正規化したマテリアル識別重みと、各識別情報に対応するレスポンスバンドルを定義します。

linear base reflectance
roughness alpha and metal/dielectric endpoint
resolved height/normal spectrum plus removed variance
causal modifiers such as wetness, wear, heat, or coverage
semantic/material ID and diagnostic color

すべてのチャンネルで同じフィルター済み重みを使います。ハードな意味上の適用条件は、目に見えるブレンド幅とは別に保ちます。サブピクセルの混合を 1 つの GGX ローブで近似する場合は、alpha=roughness^2 をブレンドしてから sqrt(alpha) でラフネスを復元します。

地形または海底が関係する場合は、海岸までの距離、濡れ、浅瀬、泡、コースティクスを配線する前に、 基質と水の所有権 をお読みください。

すべての PBR チャンネルが、1 つの座標／スケール規約における名前付きの原因と識別重みにたどれること、また重みがゼロになる領域にはハードな意味上のフォールバックがあることを確認したら、この手順は完了です。

2. 欠陥とコストに基づいてマッピングを選択する

次の順序で選択します。

1. シームとテクセル密度の歪みが許容範囲内なら UV。
2. レイヤー間で寸法、フォーマット、ミップ、色の意味、サンプラーポリシーを統一できるならテクスチャ配列。
3. 配列の制約を満たせず、ミップセーフなガターの管理者が明確ならアトラス。
4. 支配的な方向、または上面／側面の分割があるなら 1 軸／2 軸投影。
5. スケールを保つ安価なパラメータ化がない場合に限りトライプラナー。
6. 観測された欠陥がパラメータ化ではなく繰り返しである場合に限り、確率的タイリング。

バインディング数と実行されるサンプル数は分けて数えます。インストール済みの r185 の triplanarTexture() は、バインドされたテクスチャごとに 3 つの投影サンプルを実行し、法線の絶対値を重みに使います。タンジェント空間法線の再配向も、確率的タイリングも提供しません。配列／アトラスで減らせるのはバインディング数であり、サンプル数ではありません。

アトラス、テクスチャ配列、トライプラナーマッピング、確率的タイリングを使う前に、 マッピングとフィルタリング をお読みください。

選択したマッピングが観測された欠陥を解決し、すべてのテクスチャで色／データの意味とミップポリシーが明確になり、コンパイル後のバインディング数／サンプル数が、追加タップの効果を測定したうえでターゲットパイプラインの範囲内に収まることを確認したら、この手順は完了です。

3. 共有する原因を NodeMaterial スロットに接続する

マテリアルに必要なスロットだけを所有します。

colorNode             linear identity color and causal shifts
roughnessNode         identity alpha plus filtered modifiers
metalnessNode         conductor/dielectric identity
normalNode            normalMap, texture bump, or shared-height gradient
aoNode                local cavity/contact term
opacity/mask/alphaTest cutout or dissolve
emissiveNode          actual scene-linear emitted radiance
positionNode          visible local displacement
castShadowPositionNode matching caster displacement
castShadow/maskShadow matching cutout or dissolve

r185 では、receivedShadowPositionNode はワールド空間のレシーバーを別途オーバーライドするものです。置き換えが明示的に導出され、検証されている場合を除き、未設定のままにしてください。可視側とシャドウキャスター側の変位は、同じローカル空間の原因を共有します。エミッションは HDR マテリアルの結果に入力し、ブルームとトーンマッピングは後段で処理します。

データテクスチャには NoColorSpace を使用します。エンコードされた sRGB カラーには SRGBColorSpace を、リニア sRGB HDR には LinearSRGBColorSpace を使用します。その他のカラーエンコーディングには、宣言された変換が必要です。作成時に指定されていても、sRGB であるとは限りません。RenderPipeline.outputColorTransform または 1 つの renderOutput() を通じて、トーンマッピングと出力変換の所有者をそれぞれ 1 つに保ちます。

所有するすべてのスロットに原因が 1 つずつあり、可視側とシャドウ側のマスクおよび変位が一致し、カラー／データのエンコーディングが正しく、マテリアルノードが最終出力変換を重複して行わない状態になれば、このステップは完了です。

4. 微細構造と鏡面反射応答をフィルタリングする

法線を摂動する前に、高さ／法線の帯域をフィルタリングします。フラグメントの表面勾配は、微分が一様な制御フローで計算します。頂点／コンピュートの変位には、解析的な勾配または保存済みの勾配を使用します。平均を正規化して長さを捨てるのではなく、ミップ間で法線の平均と分散を保ちます。

Three.js r185 の getRoughness() では、すでに幾何法線の変動が加算されます。カスタムの鏡面アンチエイリアシングでは、未解決のマテリアル詳細による分散だけを加算します。プロシージャルバンプ、カスタム法線フィルタリング、またはラフネス分散を追加する前に、微分法線と鏡面アンチエイリアシングを読んでください。

スカラーのプロシージャル高さが法線の詳細と鏡面アンチエイリアシングの両方に使われる場合は、フィルタリング済み高さの法線の例を読んでください。ワープ後のヤコビアン全体のスペクトルノルム、長さの単位あたりのサイクル数で表した物理的な支持周波数、そして指定された平均値を中心とする正の帯域半幅から、無次元の footprintCyclesPerSample を指定します。heightHalfAmplitude には、サーフェスと同じ長さの単位を使用します。これにより、減衰、除去された傾斜分散、両面サーフェス勾配の法線処理、roughness^2 による拡幅を、1 つの因果経路にまとめられます。リテラル入力は f32 精度でチェックされます。動的ノードには、同等のプロデューサー側の受け入れ判定が必要です。縮退したサーフェスフレームでは、ゼロを正規化せずにベース法線を返し、normalValid=false とします。条件数の下限を検証し、微分経路全体を一様に保ちます。

保持されるすべての帯域が投影フットプリントの条件を満たし、除去された傾斜／法線分散が正確に 1 回だけ計上され、後処理なしの近距離／中距離／遠距離の比較で、距離依存のシャープ化と斜入射時のきらめきが排除されれば、このステップは完了です。

5. 動的状態とインスタンスごとの状態を所有する

1 つのマテリアルグラフでバッチ全体を処理します。静的なインスタンス差分には属性を使用し、GPU が所有する高頻度の差分には、実測した更新／アクセスパターンで効果が確認できた場合に限り、ストレージベースのインスタンスデータを使用します。ディゾルブ、濡れ具合、バリアント、寿命の各フィールドは、同じ安定したオブジェクト／ワールド上の原因から、表示用マスクとシャドウ用マスクを生成します。標準のシャドウオーバーライドでは、動的な不透明度／アルファテストのノードが自動的にコピーされるわけではありません。リファレンスで説明している共有 Boolean マスクの経路を使用してください。マテリアルのノードグラフを置き換える場合は、material.needsUpdate = true を設定して material.version を無効化し、キャッシュされたキャスター経路も再構築されるようにします。

原因マップには、プロシージャルフィールドの直接処理とベイク処理を選ぶゲートを適用します。静的マップは 1 回だけ生成し、動的マップはその所有者の更新頻度に合わせて更新し、依存するミップマップを無効化します。消費側のレンダリングより先に Compute を送信します。r185 では、computeAsync() は GPU 完了フェンスではありません。

フレームから参照されている間、状態の世代は不変のままにします。サイズ変更、マテリアルのアイデンティティ変更、座標変更、マップのエンコーディング変更、デバイスロストが発生した場合は、それらに依存する履歴、バインディング、診断情報を無効化します。すべてのマテリアル、テクスチャ、ストレージリソース、生成されたバリアントには、処分を担う所有者を割り当てます。

このステップは、動的な原因を進める所有者がそれぞれ 1 つに定まり、各インスタンスレコードが安定した識別情報とリセット動作を持ち、オブジェクトごとのマテリアル複製や、フレームのクリティカルパスでの CPU 読み戻しが不要になった時点で完了です。

6. 診断と検証

座標モード／スケール、アイデンティティの重みとフォールバック、各構造的な原因、マッピングの重み／ミップ／ガター、バインディング数とサンプル数、AA 前後の粗さ、法線の平均／分散、表示とキャスターの整合性、未加工のエミッション、ポスト処理なしのビューティー出力、最終的なポスト処理結果を確認できるようにします。

近景／中景／遠景と動きのあるビュー、導体／誘電体の各端点、選択したフィルタリングでのアトラスのガター、コンパイル後のステージ制限、色空間フラグ、安定したインスタンス／シャドウの動作を検証します。パフォーマンスを主張する場合は、ターゲット環境でのフレーム全体の所要時間／バイト数も検証します。

このステップは、すべての PBR アイデンティティ、マッピング分岐、フィルタリングされた法線の分岐、動的状態、シャドウ経路、色変換、リソースの寿命、および主張するターゲット予算について、直接的な診断根拠が得られた時点で完了です。

完了

マテリアルシステムは、共有の原因／アイデンティティグラフが所有するすべての PBR スロットに供給され、マッピングとフィルタリングの判断に根拠があり、マテリアルのディテールが画面上のフットプリントや動きに左右されず安定し、動的状態に単一の所有者とリセット経路があり、未加工のマテリアル出力、シャドウ、ポスト処理、リソースの寿命が一致した時点で完成です。