Firefox 中的 WebGL 纹理问题答案

【问题标题】：WebGL Texture issue in FirefoxFirefox 中的 WebGL 纹理问题
【发布时间】：2017-01-19 11:45:24
【问题描述】：

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

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

WebGL：drawElements：目标 0x0de1 的活动纹理 0 是“不完整”的，将按照 GLES 2.0.24 $3.8.2 呈现为 RGBA(0,0,0,1)：尺寸的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);

};

【问题讨论】：

你在等待图片上的load事件吗？
这有用吗？ stackoverflow.com/questions/19722247/…
@Kirill，是的，我以标准方式加载图像，但是当我使用外部图像或程序生成的图像时会出现问题。
@gman，感谢您的回答，但不幸的是，它对我没有帮助。
@Eugene 我找到了the place in FF source code，它会产生错误。不过，这有点麻烦。你能提供你的代码的sn-p吗？或者详细说明一下外部图像到底是什么？

标签： firefox textures webgl

【解决方案1】：

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

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

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

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

有什么方法可以检查图像是否准备好处理或解决此问题。

@gman 链接的“加载”事件： WebGL - wait for texture to load

【讨论】：