作業の進め方
Three.js Shadersは、JavaScriptのパラメーターとGPUシェーディングの関係を説明します。uniformは共有される値を渡し、attributeはジオメトリを記述し、varyingはシェーダーステージ間で情報を受け渡します。ShaderMaterialと、より明示的なRawShaderMaterialの違いも区別しています。
例には、グラデーション、ディスプレイスメント、リムエフェクト、ノイズ、ディゾルブ表現のほか、組み込みマテリアルを拡張するフックが含まれます。座標空間、シェーダーチャンク、GLSLのバージョンは重要な要素です。これは検証を前提としたシェーダー作業の指針であり、コピーした例が本番環境でテスト済みであることを保証するものではありません。
期待される成果物
- シェーダーペア、または範囲を限定したマテリアル拡張
- 文書化されたuniform更新の取り決め
- コンパイル確認と診断用ビジュアライゼーション
ブリーフからレビューまで
- 01エフェクトの対象を特定する
変更が頂点、サーフェスシェーディング、スクリーンスペースのパスのどれに属するかを判断します。
- 02マテリアルの方法を選ぶ
カスタムシェーダーを使うか、対象を絞った拡張で組み込みのシェーディングを維持します。
- 03データフローをデバッグする
最終的な見た目を調整する前に、宣言、空間、入力、コンパイル結果を確認します。