テクスチャオブジェクトの生成と画像データの適用
テクスチャの生成とイメージの適用
createTextureでテクスチャオブジェクトを作る
記述例 var tex = gl.createTexture();
このメソッドは引数を持ちません。純粋に、空のテクスチャオブジェクトを返してきます。
次にこのテクスチャオブジェクトを WebGL にバインドします。
WebGLでの各種バッファオブジェクト
利用する際に、バインドする処理がある
VBOもそうだった
テクスチャオブジェクトも同様
バインドの後に、テクスチャに操作を加えるメソッドなどを呼び出すと、
バインドされているテクスチャオブジェクトに対して処理が適用される
テクスチャオブジェクトを WebGL にバインドするには、 bindTexture メソッドを利用します。
bindTexture の記述例
gl.bindTexture(gl.TEXTURE_2D, tex);
このメソッドは引数を二つ取ります。
第一引数にはテクスチャの種類を表す組み込み定数を指定
普通の二次元画像フォーマットなら、 gl.TEXTURE_2D
第二引数にはバインドするテクスチャオブジェクトを指定
ここまでてテクスチャオブジェクトをバインドできた
肝心の画像データがまだ
テクスチャに画像データを紐付けるために必要となるのが texImage2D メソッドです。
texImage2D の記述例
gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, img);
引数多い!
第一引数は bindTexture でも使ったテクスチャの種類を指定
ここでも組み込み定数 gl.TEXTURE_2D を使えば問題ありません。
とりあえず現段階では何も考えずに 0 を指定しておけば問題ありません。
第三引数と第四引数には同じ組み込み定数 gl.RGBA が指定
ここも、現段階では深く考えずにこれを指定すれば大丈夫です。
第五引数の gl.UNSIGNED_BYTE についても特別な理由がない限りこのままで大丈夫です。
要は、現段階では第一引数から第五引数までは上記の記述例を丸写しで大丈夫です。
最も大切なのは最後の第六引数、ここに画像のデータを指定します。
この第六引数に指定されて入ってきた画像データが、
その時点でバインドされているテクスチャに割り当てられます。
画像のロード時間を考慮する
ここで注意しなければならないのは、
texImage2D メソッドが呼び出されたとき、
既に画像の読み込みが完了していなければならないという点です。
先述のとおり texImage2D メソッドの第六引数にはテクスチャに割り当てる画像データを渡す
画像データが完全に読み込まれていない状態でメソッドを実行しても、
正しくテクスチャへの画像の割り当てが行なわれません。
そこで、画像データの読み込みが完了した時点で発生するイベントをトリガーとして処理が実行される仕組みを実装します。
テクスチャ生成関数
code:js
function create_texture(source){
// イメージオブジェクトの生成
var img = new Image();
// データのオンロードをトリガーにする
img.onload = function(){
// テクスチャオブジェクトの生成
var tex = gl.createTexture();
// テクスチャをバインドする
gl.bindTexture(gl.TEXTURE_2D, tex);
// テクスチャへイメージを適用
gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, img);
// ミップマップを生成
gl.generateMipmap(gl.TEXTURE_2D);
// テクスチャのバインドを無効化
gl.bindTexture(gl.TEXTURE_2D, null);
// 生成したテクスチャをグローバル変数に代入
texture = tex;
};
// イメージオブジェクトのソースを指定
img.src = source;
}
この自作関数 create_texture は、テクスチャオブジェクトに割り当てる画像のアドレスを引数として受け取ります。
img.srcにわたす
関数内部で texImage2D メソッドが実行されテクスチャへイメージを適用した後、
ミップマップを生成するために必要となる generateMipmap メソッドの実行 このように generateMipmap メソッドが実行されることによって、ミップマップが生成されます。
このメソッドは引数を取りますが、 bindTexture などと同様に gl.TEXTURE_2D
VBO のときと同様、WebGL にはバインドできるテクスチャが同時に一つしかないため、最後にバインドを解除しています。
最終的に生成されたテクスチャオブジェクトは、今回はグローバルな変数に代入するようにしています
オンロードイベント自体が戻り値を返すことができないため
上記の例で言うと、変数 texture は create_texture 関数が参照できるスコープにある変数でなければいけません。
実際はpromise等でやればよいmiyamonz.icon