javascript - WebGLのインデックスバッファ?

Question

WebGL を学習しようとしています (このチュートリアルhttp://learningwebgl.com/blog/?page_id=1217から)。私はガイドに従いましたが、今は自分のデモを実装しようとしています。シーンに表示される個々のオブジェクトのバッファとデータを含むグラフィックス オブジェクトを作成したいと考えています。現在、位置頂点バッファー、テクスチャ座標バッファー、および法線バッファーがあります。チュートリアルでは、別のバッファー (インデックス バッファー) を使用しますが、これはキューブに対してのみです。インデックスバッファは実際には何のためにあるのですか? 私はそれを実装する必要がありますか?それはキューブ以外に役立ちますか?

Answer 1

オブジェクトの頂点は、3D 座標系 (ユークリッド座標系)での位置によって定義されます。したがって、ラスター化プロセスによって 3D 座標系が 2D ラスター (画面またはターゲット イメージ) に投影された直後に、次の 2 つの頂点ごとに取得し、それらを線で結ぶことができます。いわゆるワイヤーフレームが得られます。

ワイヤーフレームの問題は、それが明確でないことです。ワイヤーフレームの立方体を特定の角度から見ると、立方体が正確にどのように回転しているのかわかりません。これは、可視性アルゴリズムを使用して、立方体のどの部分が観察者の位置 (カメラの位置) に近いかを判断する必要があるためです。

しかし、線自体は表面を定義できません。これは、立方体のどちらの側が他の側よりも観測者に近いかを判断するために必要です。コンピュータ グラフィックスでサーフェスを定義する最良の方法はポリゴン、まさに三角形です (コンピュータ グラフィックスには多くの短所があります)。

これで、三角形で定義された立方体ができました (三角形メッシュと呼びます)。

しかし、どの頂点が三角形を形成するかを定義する方法は? インデックス バッファによる。頂点バッファー (頂点のリスト) へのインデックスが含まれており、どの 3 つの頂点が三角形を形成するかをラスタライズ アルゴリズムに伝えます。同じ頂点の繰り返しを減らすためにインデックス バッファー内のインデックスを解釈する方法はたくさんあります (1 つの頂点が多くの三角形の一部である可能性があります) 。グラフィック プリミティブに関する記事でいくつかを見つけることができます。