dart:web_gl: 渲染警告：绑定到纹理单元 0 的纹理不可渲染答案

【问题标题】：dart:web_gl: RENDER WARNING: texture bound to texture unit 0 is not renderabledart:web_gl: 渲染警告：绑定到纹理单元 0 的纹理不可渲染
【发布时间】：2021-02-05 18:59:45
【问题描述】：

当我在 dartium 中运行我的网络应用程序时，我收到了错误 [.WebGLRenderingContext]RENDER WARNING: texture bound to texture unit 0 is not renderable. It maybe non-power-of-2 and have incompatible texture filtering or is not 'texture complete'。这两天我一直在尝试解决这个问题，包括完全重写代码，但我无法隔离这个问题。

我认为问题在于这段代码。

  void main() {
  ...
    var texture = gl.createTexture();
    var image = new ImageElement();
    image.onLoad.listen((e) {
      gl.bindTexture(webGL.TEXTURE_2D, texture);
      gl.texImage2DImage(webGL.TEXTURE_2D, 0, webGL.RGBA, webGL.RGBA, 
                       webGL.UNSIGNED_BYTE, image);
      gl.texParameteri(webGL.TEXTURE_2D, webGL.TEXTURE_MAG_FILTER, webGL.NEAREST);
      gl.texParameteri(webGL.TEXTURE_2D, webGL.TEXTURE_MIN_FILTER, webGL.NEAREST);
      gl.bindTexture(webGL.TEXTURE_2D, null);
    });
    image.src = "tex.png";
  ...
  }

tex.png 是 32x32

关于问题所在有什么想法吗？

【问题讨论】：

gl.generateMipmap(gl.TEXTURE_2D);帮你？
@Fox32 它没有。不是只有在设置 mipmap 参数时才需要吗？

标签： textures dart webgl

【解决方案1】：

在我的问题中的代码之后，我立即绑定了纹理并发送了采样器制服。这是错误的，因为它是在图像加载之前执行的。为了解决这个问题，我将绑定纹理和绘制元素的调用放在 onload 函数中：

  image.onLoad.listen((e) {
    gl.bindTexture(webGL.TEXTURE_2D, texture);
    gl.texImage2DImage(webGL.TEXTURE_2D, 0, webGL.RGBA, webGL.RGBA, 
                       webGL.UNSIGNED_BYTE, image);
    gl.texParameteri(webGL.TEXTURE_2D, webGL.TEXTURE_MAG_FILTER, webGL.NEAREST);
    gl.texParameteri(webGL.TEXTURE_2D, webGL.TEXTURE_MIN_FILTER, webGL.NEAREST);
    gl.bindTexture(webGL.TEXTURE_2D, null);

    gl.activeTexture(webGL.TEXTURE0);
    gl.bindTexture(webGL.TEXTURE_2D, texture);
    gl.uniform1i(gl.getUniformLocation(shader.program, "uSampler"), 0);

    gl.drawElements(webGL.TRIANGLES, 6, webGL.UNSIGNED_SHORT, 0); 

  });

确保图像已加载。

以前，它只会分配 onload 回调，然后执行下一组命令 - 这涉及绑定纹理 - 但由于计算机非常快，它已经绑定了纹理并尝试在图像完成之前绘制它正在加载。

【讨论】：

另一种处理方法是在纹理创建时创建一个 1x1 像素纹理，并在图像加载后将其替换为图像。这使您无需特殊检查即可立即开始绘图。见stackoverflow.com/questions/19722247/…

【解决方案2】：

我有同样的错误。但就我而言，我忘了设置

gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);

在我的initTexture()-方法中。无论视频大小如何，该代码都有助于正确渲染纹理。

也许它可以帮助某人:)

【讨论】：

或者，如果意图是不进行 mipmapping，则两个 FILTER 选项都应设置为 gl.NEAREST，它只获取最近的纹素，而不是线性混合纹素更接近UV 样品位置。某些纹理类型（例如浮点格式）不可过滤，因此需要禁用线性过滤。