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