WebGLで画像を描画する

itinao 6:00 , 1 件のコメント
表題の通り、WebGLで画像を描画します。

描画するにはいくつか方法があると思いますが、
今回は
・gl.drawElementsを使った手法
・gl.drawArraysを使った手法
の2通りを試しました。

描画した結果はこちらです。
なるべくシンプルに書いています。
http://experiment.itinao.net/webgl/texture_draw_sample.html
（サンプル画像は、東京ドロンパです！

ハマりどころになるかと思うので先に書いておきますが、
画像のサイズ(縦と横)は2の乗数にしてください。
そうしないとエラーになって描画できません。
canvasでdrawImage(2の乗数で)して、canvas.toDataURLでリサイズしたデータを取るなどしても大丈夫です。

理由は、古いGPUが2の乗数のテクスチャしかサポートしていないから、などがあるみたいです。

gl.drawElementsを使った手法

おそらく一般的なもの。
コードを一部抜粋すると、このような感じ。
全文を見たい場合は、上記のサンプルコードを見てください！
var tex = gl.createTexture();
gl.bindTexture(gl.TEXTURE_2D, tex);
gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, textureImg);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST);
gl.bindTexture(gl.TEXTURE_2D, null);
textureImgは、HTMLのIMG要素です。
ここをVIDEO要素に変えると動画の一コマを描画することができます。

画像の描画に関する詳細は、こちらが参考になります。

動画の描画に関する詳細は、こちらが参考になります。

gl.drawArraysを使った手法

gl.POINTSを使って1つずつパーティクルを描画しています。

canvasのctx.getImageDataで画像データを取得し、その取得した画像データを使い、
ループの中で画像色・その位置を格納していってる感じです。
for (var i = 0; i < this.numParticles; i++) {
    var p = i;
    var cIndex = p * 3;
    var imageindexX = (rate * i % this.width) >> 0;
    var imageindexY = this.height - rate * (rate * i / this.width >> 0) >> 0;
    var pixIndex = (imageindexX + this.width * imageindexY) >> 0;
    vColor[cIndex] = this.imageArr[pixIndex * 4] / 255;
    vColor[cIndex + 1] = this.imageArr[pixIndex * 4 + 1] / 255;
    vColor[cIndex + 2] = this.imageArr[pixIndex * 4 + 2] / 255;
    var pIndex = p * 3;
    vPosition[pIndex] = ((rate * i % this.width) - this.width / 2) / posScale;
    vPosition[pIndex + 1] = (rate * (rate * i / this.width >> 0) - this.height / 2) / posScale;
    vPosition[pIndex + 2] = 0;
}

終わりに。

この他にも画像を描画する手法はあるかもしれませんが、
描画の方法によってできる演出が違うと思うので色々覚えておくと良いかもしれません！

1 件のコメント :

登録: コメントの投稿 ( Atom )