javascript - WEBGL - 画像を表示するには?

Question

WEBGLを使用してx座標とy座標でキャンバスに画像を表示するだけですが、その方法がわかりません。シェーダーなどを含める必要がありますか? 画像を表示するコードを見てきましたが、非常にかさばります。フレームワークを使用したくありません。可能であれば、重要なセクションが何をするのかコメントして説明していただけますか? 2D タイル ベースのゲームに WEBGL を使用します。

お時間をいただきありがとうございます

Answer 1

はい、頂点シェーダーとフラグメント シェーダーが必要ですが、それらは比較的単純な場合があります。Ido が提案したように、Mozilla の例から始めることをお勧めします。それを実行した後、3D の側面を削除します。特に、uMVPMatrix と uPmatrix は必要なく、座標配列は 2D にすることができます。頂点シェーダーの場合、次のことを意味します。

attribute vec3 aVertexPosition;  
attribute vec2 aTextureCoord;  

varying highp vec2 vTextureCoord;  

void main(void) {  
  gl_Position = vec4(aVertexPosition, 0.0, 1.0);  
  vTextureCoord = aTextureCoord;  
}