各テクスチャを個別に初期化せずに WebGL でテクスチャ (異なる画像を含む) の配列を使用する方法は? キューブとピラミッド (配列として編成) をそれぞれ異なるテクスチャ イメージで表示したいと考えています。コードの一部を次に示します (テクスチャを初期化するため):
function handleTexture(texture) {
gl.bindTexture(gl.TEXTURE_2D, texture);
gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, true);
gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, texture.Img);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR_MIPMAP_NEAREST);
gl.generateMipmap(gl.TEXTURE_2D);
gl.bindTexture(gl.TEXTURE_2D, null);
}
function initTextures() {
for (i=0; i<2; i++) {
tex[i] = gl.createTexture();
tex[i].Img = new Image();
tex[i].Img.onload = function() { handleTexture(tex[i]); }
tex[i].Img.src = texImgs[i]; // The name of the image file
}
}
立方体とピラミッドが黒色 (テクスチャなし) で表示され、ページに次のエラーが表示されます。
Uncaught TypeError: Cannot read property 'Img' of undefined // gl.texImage2D()
tex.(anonymous function).Img.onload // tex[i].Img.onload = ...
配列ではなくtex1とtex2を使用してテクスチャを個別に初期化すると、このエラーは発生しません。配列を使用してこれを行う方法に関する提案はありますか?