WebGLでテクスチャを使う

WebGLで書いてみよう - ラシウラのつづきです。

WebGLはほとんどOpenGLそのままのAPIですが、テクスチャはcanvas要素を使うようになっているようで、このあたりのやり方はちょっと特殊になっているようです。最初、OpenGL風にRGBA配列を作って全く機能せず大変でした。(追記:imgも同様の方法(texImage2D)でテクスチャに使えます)

(あとピッキングくらいやれば、たいていのことはWebGLでできるようになるはず)

例

• http://gist.github.com/215896

上がWebGL表示で、下がテクスチャに使うcanvasです。このコードでは、テクスチャ座標を、四角形の(-0.5, -0.5)を(0,0), (0.5, 0.5)を(1.0, 1.0)となるように書いてます。どうもcanvasテクスチャは、左上が(0, 0)で、右下が(1.0, 1.0)になるようです。

この例では、表示してるcanvasを使いましたが、document.createElementで作ったdocumentにつながってないcanvasでも同様に使えます。

注目点

• テクスチャ利用のおまじない

  gl.enable(gl.TEXTURING);
  gl.enable(gl.TEXTURE_2D);

• canvasからtextureを登録するのは以下のようなコードです

  var textureCanvas = document.getElementById("texture");
  //... edit canvas ...
  
  var texture = gl.createTexture();
  gl.activeTexture(gl.TEXTURE0);
  gl.bindTexture(gl.TEXTURE_2D, texture);
  gl.texImage2D(gl.TEXTURE_2D, 0, textureCanvas);
  gl.generateMipmap(gl.TEXTURE_2D);

• テクスチャ座標は法線同様、普通のattribute変数として渡します
• テクスチャはshader上、sampler2Dという型になります。親コード上はテクスチャ番号の整数です

  var texture0 = gl.getUniformLocation(program, "texture0");
  gl.uniform1i(texture0, 0);

• fragment shaderでテクスチャから色を取り出すのは組み込み関数texture2D()です

uniform sampler2D texture0;
varying vec2 texCoord;
 
void main(void) {
  gl_FragColor = texture2D(texture0, texCoord);
}

参考

• http://people.mozilla.com/~vladimir/webgl/spore/sporeview.html の sporeview.js

canvasテクスチャは普通のOpenGLテクスチャと上下逆で、このソース中ではflipImageで上下反転させたcanvasを作ってます。

コード