threejs-procedural-materials について
PBR の各チャンネルが一貫した構造と原因入力を共有するマテリアルを作る、Three.js 向けスキルです。プロシージャルな表面、物理光学、シミュレーションと連動するマテリアルの例を扱います。
主な機能
- 01一貫性のある PBR マテリアルグラフ
- 02プロシージャル表面と惑星マテリアル
- 03ガラス、宝石、回折光学
- 04薄膜せっけん膜の干渉
- 05布、砂、ソフトボディの連成システム
- 06マテリアルのフィルタリングとデバッグ制御
活用シーン
- 01地質を表現する惑星表面の作成
- 02透過ガラスや宝石マテリアルの制作
- 03薄膜せっけん泡の描画
- 04シミュレーション布や変形砂の構築
インストール
コマンドをコピーしてターミナルで実行します。
npx skills add https:/ / github.com/ scottstts/ threejs-awesome-graphics-agent-skills --skill threejs-procedural-materialsインストール後、Claude Code で/threejs-procedural-materialsを入力して読み込まれたか確認します。
同梱ファイル
SKILL.md と一緒にインストールされる参考資料やスクリプト。
agents/openai.yamlassets/deformable-sand/GPL-3.0.txtTHIRD_PARTY_LICENSES.mdassets/raytraced-diamond/THIRD_PARTY_LICENSES.mddiamond.glbassets/simulated-tearable-denim/THIRD_PARTY_LICENSES.mdGPL-3.0.txtsettled-drape.jsexamples/deformable-sand/deformable-sand.jsexamples/deformable-sand/source/config.tsexamples/deformable-sand/source/input/strokes.tsexamples/deformable-sand/source/platform/shader.tsexamples/deformable-sand/source/render/airborne-shadow.tscamera.tslighting.tscoconut-shadow.tspostprocess.tsrenderer.tsshaders.tswater-reset.tsexamples/deformable-sand/source/reset/viewport.tseffect.tswgsl.tsexamples/deformable-sand/source/simulation/clock.tsflux.tsshaders.tswave-reset-shader.tssolver.tsexamples/hybrid-soil-moss-surface/hybrid-soil-moss-surface.jsmodel-moss-accumulation.js詳細
プロシージャルマテリアル
表面の特性とその要因からマテリアルを構築します。色、粗さ、金属度、法線、透過、発光は、無関係なノイズテクスチャではなく、同じ表面を表す必要があります。
このスキルには、説明的なガイダンスに加えて、優れたサンプルやアセットが含まれています。ぜひ調べたり、参考にしたり、そのまま利用したりしてください。関連する場合は十分に活用し、内容を確認せずに飛ばさないでください。
マテリアルグラフの順序
stable coordinates
→ structural fields
→ material identity weights
→ causal modifiers
→ filtered microstructure
→ PBR channels
→ lighting/shadow extensions
アトラスフィルタリング、スペキュラー AA、惑星座標、ワールド高さに基づく濡れ、インスタンスごとのディゾルブ、作成済みの PBR 応答バンドルについては、references/procedural-pbr-system.mdを参照してください。
かすめる光を当てたときのウォールナット、アンティークゴールド、エボニーのテクスチャ/粗さ/金属度/クリアコートのバンドルについては、彫刻を施したギャラリーフレームのジオメトリを参照してください。
プロシージャルな惑星表面における地質、気候、水、バイオーム、粗さ、微分法線の共通要因については、プロシージャルな惑星表面を参照してください。
法線、岩石/溶岩の特性、発光、グロー、火の粉、フォグ、粒子が、ひとつのマテリアル要因スタックに連動したレイマーチングによるプロシージャルな高さフィールドについては、溶岩流の表面マテリアルを参照してください。
メッシュ自体を光学ボリュームとして扱う宝石については、レイトレースによるダイヤモンドマテリアルを参照してください。カメラレイの入射屈折、全反射のバウンス回数を制限した GPU BVH のファーストヒットループ、チャンネルごとの IOR 分散、ミップを正しく扱う環境光の退出サンプリング、動的なカメラ行列ユニフォームを実装しています。
透過性のあるボディを画像空間で解く方法については、スペクトル分散ガラスマテリアルを参照してください。深度を反転させた両面のバックフェースデータパス、反復的な内部退出探索、回数を制限した全反射、実際の光路長に基づく Beer-Lambert 吸収、波長ごとの Cauchy 屈折率を用い、CIE 1931 を通じて再結合します。再利用可能な光学プリミティブである、正確な非偏光 Fresnel、Cauchy 係数、スペクトル重み、回転可能な環境プローブ、バッファ投影は、ガラス光学にあります。また、references/dielectric-glass-optics.mdには、2 パスの仕様、バッファ形式、探索範囲、透過診断が記載されています。
透過性を実現する 2 つの方式は、品質ではなくジオメトリに応じて選択してください。カメラから背を向けていても退出ファセットを正確に処理する必要がある、閉じた多面体の宝石には BVH 方式を使います。スキャン済み、組み立て式、開いたシート状、または複数のシェルを持つボディには、画像空間方式を使います。この方式は一貫しない面の巻き順や、どちらを向いている場合もある作成済み法線を許容しますが、フレームの外にある表面は認識できません。
正確なエンボスフィールド、CIE/黒体スペクトル、位相格子、Bessel 次数効率、コヒーレンス広がり、ストリップエミッター、加算レイヤー、安定したオブジェクトフレーム、制限、診断の仕様については、references/physical-diffraction-grating.mdを参照してください。
印刷基材と加算型 HDR フォイル応答を組み合わせた物理回折格子の実装を参照してください。星形と縞模様のマスクで局所的な溝の角度、ピッチ、レリーフを選び、スペクトルカラーは波長だけで決まります。完全な光学モデルは、埋め込みのネイティブシェーダーソースを使わず、Fn、If、Loopを使った純粋な TSL グラフとして表現されています。
空気‐薄膜‐空気の Airy 方程式、代表的な RGB スペクトル帯域、2 膜のブレンド、回数を制限した二次反射、毛細管力学、カメラを考慮した流入、穿孔時の収縮、制限、診断については、references/thin-film-soap-bubble-system.mdを参照してください。 石鹸膜の干渉を画像に反映させる必要がある場合は、 薄膜石鹸泡システム を参照してください。波長依存の水溶液屈折率、膜の表面と裏面での光の通過、近傍の泡による解析的な反射、体積を維持する毛細管モード、浮力と抗力、テイラー・クリック破裂、目に見える液滴の破裂後の挙動、決定論的な物理ゲートを備えています。
変形する花形の透過性ボディについては、 ソフトボディ・ゼリーの実装 を参照してください。四面体 XPBD 状態、滑らかな光学シェル、視線方向の厚さ、BVH 屈折、吸収、受光面の影、有限の RGB 集光場が連動しています。
固定ステップの粒状高さ場については、 変形する砂の実装 を参照してください。保存的な輸送、衝撃粒子、異方性鉱物粒子、地平線照明、光学的深度による影が、一つの質量を持つ状態を共有しています。
正確な平織りリネン素材を GPU XPBD シートと連動させる仕組みについては、 シミュレーション布の実装 を参照してください。糸の伸縮、せん断ロック、曲げ、剛体との接触、自己衝突、つまみ動作に対応しています。 調整済みソルバーと布マップの仕様については、 references/simulated-cloth-system.md を参照してください。
3/1 綾織り、陰的マルチグリッド PCG 力学、摩耗による糸の破断、連結したグリップパッチ、分離した断片、ほつれた糸や繊維については、
シミュレーションで破れるデニムの実装
を参照してください。
素材、ソルバー、トポロジー、フィルタリング、統合の仕様については、
references/simulated-tearable-denim.md
を参照してください。
素材の損失や糸の破断にはこの例を選び、破れない平織り XPBD リネンには
simulated-clothを選んでください。
グルーミングされた GPU ストランド、先細りのリボンシェーディング、ストランド場をとかすカプセル接触を持つ関節式の手については、 シミュレーションで再現する毛皮の実装 を参照してください。ストランド、グルーミング、インタラクションの仕様については、 references/simulated-fur-system.md を参照してください。
ソフトボディの座標仕様、ネオ・フック XPBD の分割、減衰とスリープのルール、屈折受光面の予算、素材定数、制限、診断については、 references/softbody-jelly.md を参照してください。
しわのあるシートの力学、素材格子による燃焼、炭化による破砕、ボリュームのある炎と煙、煤による受光面の照明については、紙を燃やすシミュレーションの実装を参照してください。 連動するグリッド、固定ステップの順序、光学的な積分、燃え尽きのシーケンスについては、 references/simulated-paper-burning.md を参照してください。
クラゲの傘の解剖構造、遊泳、ベアートの付属肢、生物発光組織、水中での深度順輸送については、発光クラゲの実装を参照してください。 解剖構造、付着テクスチャ、光学レイヤー、統合の仕様については、 references/luminescent-jellyfish.md を参照してください。
一貫性のある翅マスク、鱗粉のきらめき、関節運動、止まり場所とのクリアランス、有限の翅の照明、レンズによる撮像については、発光する蝶の実装を参照してください。 翅、発光、レンズ、統合、スイープ形状の仕様については、 references/luminescent-butterfly.md を参照してください。
必須の制御項目
- 実寸または知覚上のテクスチャスケール
- マテリアルのアイデンティティの重み
- ラフネスの範囲とマイクロ法線の強度
- 選択したマテリアルパターンに必要な因果フィールド
- 透過性のある物体では、それを定義する物理定数――屈折率とアッベ数の組、内部経路の予算、減衰深度。式の中に埋め込まず、名前を付けます
- シャボン膜では、外部媒質と膜の屈折率、ナノメートル単位の厚さの範囲、波長帯、表面張力、膜の順序
- 距離/微分フィルタリング
- スペキュラーアンチエイリアス
- チャネルとマスクのデバッグモード
- マテリアルに発光またはボリューム蓄積がある場合は、発光マテリアルのデバッグモード
テクスチャを用いた土と苔のアルベド、AO、ラフネス、法線の微細ディテールを、プロシージャルな盛り上がりの変位、湿り気、苔の被覆率と高さ、ワープしたセルラークラックと組み合わせる方法については、references/hybrid-soil-moss-surface.mdと 土と苔のハイブリッド実装 を参照してください。その表面の特徴を、完全にプロシージャルに合成されたものとして説明してはいけません。苔をモデルにも定着させる必要がある場合は、モデルに固定された被覆率、上向きの面への堆積、厚さの変位、共有の苔のPBRアイデンティティについて、 モデルの苔の実装 を参照してください。
失敗条件
- PBRの各チャンネルがそれぞれ独立したノイズをサンプリングしている
- ラフネスが後付けの単一スカラーになっている
- 1ピクセル未満の高周波法線が残っている
- トライプレーナー投影に、見て分かる向きやスケールの継ぎ目がある
- ミップマッピング時にアトラスのパディングが無視されている
- 明示的なスタイライズ上の目標がないまま、カスタムライティングでエネルギー保存が失われている
- 不安定なハイライトを隠すためにポストプロセスが使われている
- 回折色相を波長から導出せず、UVから色付けしている
- グルーブの基準座標系がオブジェクトではなく、カメラまたはワールド軸に追従している
- 密度の正規化にシグマが含まれず、回折ローブを狭めるとエネルギーが失われる
- シャボン玉を空気―膜―空気の干渉を使わず、固体のガラス球として扱ったり、虹色を塗ったりしている
- 変形したシャボン膜が変形前の球の法線を保持している
- 変形する透過性のある物体のレンダーシェル、光学BVH、受光フィールドが異なる状態から更新されている
- 有限のコースティクス受光面で、ゼロ以外のデータがクランプされたテクスチャの端まで到達している
- ソフトボディソルバーが可変の積分ステップや、減衰後にエネルギーを注入する非連成の静止応力分割を使用している
- 粒状物の変位、浮遊粒子、堆積層のシェーディング、影フィールドが異なるシミュレーションクロックで進行している
- 砂粒のきらめきがフィルタリングされていない高周波ルックアップで、斜め方向への動きでエイリアシングが発生する
適用範囲の境界
独立したボクセルの炎と煙には$threejs-procedural-vfxを使用してください。シートの燃焼、炭化の破壊、流体の放出を連動させる必要がある場合は、ここではsimulated-paper-burningを選んでください。空気側の発光する川には$threejs-water-opticsを使用してください。luminescent-jellyfishは、水中の動物の組織とその周囲の輸送を扱います。
主な課題が、共有されるスカラー/ベクトルの原因の設計である場合は、$threejs-procedural-fieldsを使用してください。マテリアルだけではなく、軌道から接近までを含む完全な天体には$threejs-procedural-planetsを使用してください。ハイトフィールドにレイマーチングによる交差、シルエットのカバレッジ、またはレリーフを考慮した影を担わせる必要がある場合は、$threejs-parallax-occlusion-mappingを使用してください。視点に位置合わせされた濡れたガラスの光学効果とスクリーンスペースの履歴には$threejs-temporal-surfacesを使用してください。このスキルは、透過性のある物体そのものを通る光路を扱います。