8つのインデックス付き頂点を使用しているときに、面の色が一意ではない

Question

最初にコードを指定せずに問題を説明してください。

回転キューブの基本レッスンを再作成しました。レッスン4 Webglの学習

コードには、各面に4つの頂点がリストされ、合計24個の頂点があります。これらの24個の頂点0〜23にインデックスを使用してdrawElements（...）を行い、24個の異なる色のカラーバッファ配列を使用します。

最終的な結果はもちろん、それぞれの顔に異なる色が割り当てられた回転キューブです。

私がしたことは、実際にキューブは24個ではなく8個の頂点しか持たないという事実を利用したことでした。そこで私は8個の頂点の配列を作成しました。 0から23までのインデックスではなく、0から7までのインデックスで動作するように位置インデックス配列を再作成しました。オリジナルのレッスンと同じように、顔の作成に同じ順序を入れていたので、私はカラーバッファ配列を残しました。

私がdrawElements（...）を完成したとき、私は完璧な回転キューブを持っていました。しかし、キューブは正しく着色されていません。各頂点は単一の色を有するので、カラー配列要素のうちの最初の8個（24個のうち）のみが使用された。基本的に上半分は1色、下半分は別の色です。キューブの顔にはユニークな色がありません。

問題は：頂点ではなく頂点インデックスに色を割り当てる方法はありますか？ シェーダでgl_vertexIDを使うことができると疑われていますが、最初に意見を聞くと思いましたか？

ありがとう...

Answer 1

短い答えはいいえ。

基本的には、頂点に値を割り当てるための木のオプションがあります。

1. は頂点ごとに一意の値を割り当てます。異なる値（各面に異なる色など）を持つ頂点を使用する場合は、各「構成」に一意の頂点が存在する必要があることに注意してください。
2. 時には頂点またはフラグメントの値を計算することができますシェーダ（これは実際にあなたのケースで動作します）。
3. 一様なシェーダ値を使用します。これにより、すべての頂点に同じ値が割り当てられます（この場合、あなたが望むものではありません）。私はそれが基本的な概念を説明しますので、あなたは、ユニティで手続きメッシュ生成についての私のブログの記事を読むことをお勧め詳細については

：

• http://blog.nobel-joergensen.com/2010/12/25/procedural-generated-mesh-in-unity/
• http://blog.nobel-joergensen.com/2011/04/05/procedural-generated-mesh-in-unity-part-2-with-uv-mapping/

Answer 2

あり顔ごとのデータをWebGLに渡す簡単な方法はありません。

In WebGL（およびOpenGL ES 2）シェーダに渡すことができるデータには、頂点属性とユニフォームがあります。頂点属性は各頂点に対して異なる値を持つことができ、統一データはuniform *（）呼び出しの1つを介して明示的にしか変化しない単一の値を持ちます。

頂点シェーダからフラグメントシェーダに頂点属性（カラーなど）が直接渡されると、その結果がハードウェアによって自動的に補間され、その結果、表面の値（色）が滑らかに変化します。結果の三角形。三角形に「フラット」な色を付けるには、三角形の頂点のすべてに同じ色を付ける必要があります。頂点は異なる色を持つ他の三角形の一部でもあるので、唯一の選択肢は、同じ点を使用する各面の異なる色ごとに別々の頂点項目を作成することです。

代わりにユニフォームを使用する場合は、各フェイスの描画に合わせてユニフォームを変更する必要があります。これは、キューブを6つの部分に分割し、6つの個別の描画呼び出しを行う必要があることを意味します。これははるかに効率的ではありません。 「悪い」解決策は、記述されているように複数の頂点エントリを持ち、余分なGPUメモリを使い、描画を高速化することです。

OpenGLの他のバージョンでは、glVertexAttribDivisor()という機能があり、n個の頂点だけを変更する頂点属性を設定できます。これはあなたがしようとしていることを達成するために使用することができます。しかし、残念ながらWebGLでは利用できません。