15

如何测试WebGLTexture对象是否“完整”？

目前我收到这条消息： [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'

我收到此警告是因为渲染循环在其图像完成加载之前尝试使用纹理，那么如何解决这个问题？

4

3 回答 3

26

解决这个问题的最简单方法是在创建时制作 1x1 纹理。

var tex = gl.createTexture();
gl.bindTexture(gl.TEXTURE_2D, tex);
gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, 1, 1, 0, gl.RGBA, gl.UNSIGNED_BYTE,
              new Uint8Array([255, 0, 0, 255])); // red

然后当图像加载时，您可以用图像替换 1x1 像素纹理。不需要标志，您的场景将使用您选择的颜色进行渲染，直到图像加载完毕。

var img = new Image();
img.src = "http://someplace/someimage.jpg";
img.onload = function() {
   gl.bindTexture(gl.TEXTURE_2D, tex);
   gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, img);

   // then either generate mips if the image uses power-of-2 dimensions or 
   // set the filtering correctly for non-power-of-2 images.
   setupTextureFilteringAndMips(img.width, img.height);
}

只是为了避免人们遇到他们最有可能遇到的下一个问题的麻烦，WebGL 需要 mips 或者它需要不需要 mips 的过滤。最重要的是，它需要尺寸为 2 的幂（即 1、2、4、8、...、256、512 等）的纹理才能使用 mips。因此，在加载图像时，您很可能希望设置过滤以正确处理此问题。

function isPowerOf2(value) {
  return (value & (value - 1)) == 0;
};

function setupTextureFilteringAndMips(width, height) {
  if (isPowerOf2(width) && isPowerOf2(height) {
    // the dimensions are power of 2 so generate mips and turn on 
    // tri-linear filtering.
    gl.generateMipmap(gl.TEXTURE_2D);
    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR_MIPMAP_LINEAR);
  } else {
    // at least one of the dimensions is not a power of 2 so set the filtering
    // so WebGL will render it.
    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);
  }
}
于 2013-11-03T01:29:50.103 回答
1

要解决该问题，请使用一些布尔值来判断图像是否已加载。

var loaded = false,
    texture,
    img = new Image();

img.onload = function() {
    texture = gl.createTexture();
    // . . . 
    loaded = true;
};
img.src = "path/myimage.jpg";

// render-loop
function render() {
    if(loaded) {
        // use texture
    }
    else {
        // not loaded yet
    }
}
于 2013-11-01T20:43:17.353 回答
1

我在尝试使用 Cordova 将我的 HTML5/JS 应用程序部署到 Android 手机时遇到了这个问题。

起初，我认为我的问题是我的精灵表/纹理图集太大而无法加载移动 GPU。所以我使用 ImageMagickmogrify ( mogrify -resize 256x256 *.png) 批量缩小了所有图像，但仍然有问题。这一步仍然是必要的（因为我8000x8000 .png的手机太多了）。

然后我检查了我的浏览器版本，发现使用的 Chromium 比我的浏览器旧。所以我重新安装了Crosswalk 插件，一切正常。console.log(navigator.userAgent)

cordova plugin rm cordova-plugin-crosswalk-webview
cordova plugin add cordova-plugin-crosswalk-webview
于 2016-09-11T15:50:49.657 回答