canvas - WebGL ブリット テクスチャをキャンバスに

Question

WebGL で HTML キャンバスにテクスチャをブリットする最もクリーンな方法は何ですか? 正射投影を設定してテクスチャ付きクワッドをレンダリングするのを見ることができましたが、よりクリーンな方法はありますか?

Answer 1

「テクスチャを HTML5 Canvas にブリットする」とはどういう意味ですか? テクスチャ 1x1 ピクセルをキャンバスに描画するだけですか? 正投影は必要ありません。最も簡単なことは、単位クワッドを作成してスケーリングするか、ピクセル座標でクワッドを作成して描画することです。

これがピクセル座標クワッドシェーダーです

attribute vec2 a_position;
attribute vec2 a_texCoord;

uniform vec2 u_resolution;

varying vec2 v_texCoord;

void main() {
   // convert the rectangle from pixels to 0.0 to 1.0
   vec2 zeroToOne = a_position / u_resolution;

   // convert from 0->1 to 0->2
   vec2 zeroToTwo = zeroToOne * 2.0;

   // convert from 0->2 to -1->+1 (clipspace)
   vec2 clipSpace = zeroToTwo - 1.0;

   gl_Position = vec4(clipSpace * vec2(1, -1), 0, 1);

   v_texCoord = a_texCoord;
}

その例はここからです。(http://games.greggman.com/game/webgl-image-processing/)

ユニット クワッド バージョンのスケール オフセットは次のようになります。

attribute vec2 a_position;
attribute vec2 a_texCoord;

uniform vec2 u_offset;
uniform vec2 u_scale;

varying vec2 v_texCoord;

void main() {
   gl_Position = vec4(a_position * u_scale + u_offset, 0, 1);

   v_texCoord = a_texCoord;
}

最後に、いずれの場合も、3x3 行列演算を使用してコードを簡素化できます。

attribute vec2 a_position;

uniform mat3 u_matrix;

void main() {
  // Multiply the position by the matrix.
  gl_Position = vec4((u_matrix * vec3(a_position, 1)).xy, 0, 1);
}

そして、マトリックスを設定するだけです。単位クワッド (スケール マトリックスを追加してピクセルを拡大する) を使用するか、ピクセルを使用することができます。

の行列

[
  2 / canvasWidth, 0, 0,
  0, -2 / canvasHeight, 0,
  -1, 1, 1
]

ピクセルからクリップスペースに変換します。の行列

[
  imageWidth, 0, 0,
  0, imageHeight, 0,
  0, 0, 1
]

単位クワッドから画像のサイズに変換します。

すべての行列の計算に入ると、この回答には多すぎるように思えますが、興味がある場合は、ここで見つけることができますhttp://games.greggman.com/game/webgl-2d-matrices/を参照してください