🎡three.js ShaderMaterialとBufferAttributeの違い シェーダーを導入するための究極のテクニック Three.js バリアリングとユニフォーム
シェーダーとは、GPU上で動作するGLSLで記述された小さなプログラムのことです。以下のような場合には、カスタムシェーダを使用するとよいでしょう。
ビルトインマテリアルに含まれていないエフェクトの実装
パフォーマンスを向上させるために、多数のオブジェクトを 1 つの BufferGeometry に結合する。
昔はShaderMaterial使ってた、今はInstancedBufferAttribute
THREE r72では、ShaderMaterialのアトリビュートを直接割り当てることはサポートされなくなりました。代わりに BufferGeometry インスタンスを使用し、BufferAttribute インスタンスを使用してカスタムアトリビュートを定義する必要があります。
THREE r77では、WebGLRenderTargetまたはWebGLCubeRenderTargetインスタンスは、ユニフォームとして使用することができなくなりました。代わりにそのテクスチャ プロパティを使用する必要があります。
各マテリアルには2種類のシェーダーを指定できます。
・頂点シェーダは最初に実行され、アトリビュートを受け取り、個々の頂点の位置を計算／操作し、フラグメントシェーダに追加データ（バリエーション）を渡します。
・フラグメント（またはピクセル）シェーダは2番目に実行され、画面にレンダリングされる個々の「フラグメント」（ピクセル）の色を設定します。
シェーダーの変数には、ユニフォーム、アトリビュート、バリアリングの3種類があります
・ユニフォームとは、すべての頂点で同じ値を持つ変数のことで、ライティング、フォグ、シャドウマップなどがユニフォームに格納されるデータの例です。ユニフォームは、バーテックスシェーダとフラグメントシェーダの両方からアクセスできます。
・アトリビュートは各頂点に関連する変数で、例えば、頂点の位置、面の法線、頂点の色などがアトリビュートに格納されるデータの例です。アトリビュートは、バーテックスシェーダ内でのみアクセス可能です。
・Varyingsは、バーテックスシェーダからフラグメントシェーダに渡される変数です。各フラグメントでは、各バリアリングの値は、隣接する頂点の値からスムーズに補間されます。
https://threejs.org/docs/#api/en/materials/ShaderMaterial
このクラスはBufferGeometryに関連付けられたアトリビュート（頂点位置、面インデックス、法線、色、UV、任意のカスタムアトリビュートなど）のデータを格納し、GPUへのデータの受け渡しをより効率的に行えるようにします。詳細と使用例については、そのページを参照してください。ベクターのようなデータを扱うときは、Vector2、Vector3、Vector4、Color クラスの .fromBufferAttribute( attribute, index ) ヘルパーメソッドが役に立つかもしれません。
お願い致します