Question

我正在尝试将图像分配给纹理，有时会导致下一个错误报告：

WebGL：texImage2D：无法从DOM元素获取数据。此上传的隐式宽度和高度将为零

WebGL：drawElements：目标0x0de1的活动纹理0是＆＃39;不完整＆＃39;，并将根据GLES 2.0.24 $ 3.8呈现为RGBA（0,0,0,1） .2：level_base的尺寸并非都是正面的

当我重新加载页面时，纹理正常显示。

我已经意识到它只在Firefox中出现，而且似乎没有完全处理图像。有没有办法检查图像是否可以处理或解决此问题。

提前谢谢你，抱歉我的英语不好。

更新：我创建了一个具有相当复杂架构的框架，因此有一个非常简化的代码版本：

1。我创建了一个包含WebGL纹理对象实例的纹理包装器。

function Texture (gl) {
// Here the texture does not keep any data.
this.texture = gl.createTexture();

};

2。当需要时，纹理获取图像实例并执行默认初始化过程：

function initializeTexture (image) {
gl.bindTexture(gl.TEXTURE_2D, this.texture);

// Set pixel storing mode.
gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, flipY);

// Pass image data into the texture.
gl.texImage2D(gl.TEXTURE_2D, 0, this.format, this.format, this.type, image);

// Handle mipmapping option.
if (this.enableMipmap &&
    Math.isPowerOfTwo(this.width) &&
    Math.isPowerOfTwo(this.height)) {
    gl.generateMipmap(gl.TEXTURE_2D);
}

// Set filtering modes.
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, this.magFilter);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, this.minFilter);

// Set wrapping modes.
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, this.wrapS);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, this.wrapT);

// Unbind the texture.
gl.bindTexture(gl.TEXTURE_2D, null);

}

3。在游戏循环中，还有另一组默认操作：

function applyTexture (value) {
// Pass the texture into shader program.
gl.uniform1i(uniform.location, uniform.id);

// Activate the texture.
gl.activeTexture(gl.TEXTURE0 + uniform.id);

// Bind passed texture.
gl.bindTexture(gl.TEXTURE_2D, value.texture);

};

Answer 1

WebGL：texImage2D：无法从DOM元素获取数据。此上传的隐式宽度和高度将为零

这很简单：texImage2D无法从您的图像元素中获取任何数据。通常这是因为图像尚未加载其当前src。

当我重新加载页面时，纹理正常显示。

这种错误几乎总是由于在加载图像之前没有正确等待，因为在后续加载时，通常从http缓存中检索图像的数据，导致加载几乎是立即的。 / p>

有没有办法检查图像是否已准备好处理或解决此问题。

＆＃39;加载＆＃39;事件，由@gman链接： WebGL - wait for texture to load

Firefox

1 个答案: