如何在加载three.js纹理时除去INVALID_VALUE警告?

时间:2014-03-09 20:00:56

标签: three.js webgl

使用Three.Js r66和类似的设置:

var texture = THREE.ImageUtils.loadTexture('/data/radar.png');
texture.wrapS = THREE.RepeatWrapping;
 var radar = new THREE.Mesh(
    sphere,
    new THREE.MeshBasicMaterial({
      map: texture,
      transparent: true,
    }));

我在控制台上收到以下警告:

WebGL: INVALID_VALUE: texImage2D: invalid image dev_three.js:26190
[.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' 

我很确定这是因为在加载纹理之前渲染了对象,因此WebGL正在尝试访问:three.js第26190行中的空纹理。

_gl.texImage2D( _gl.TEXTURE_2D, 0, glFormat, glFormat, glType, texture.image );

上面引用的代码可以正常工作 - 一旦纹理加载就显示出来就好了。我想摆脱警告 - 任何想法?其他材料(例如phong)似乎更好地处理异步纹理加载。它们显示黑色直到纹理到达。值得注意的是,他们不会通过警告向控制台发送垃圾邮件。

此演示(http://jeromeetienne.github.io/tunnelgl/)表现出同样的问题。

1 个答案:

答案 0 :(得分:2)

等待纹理加载

var safeToRender = true;
var texture = THREE.ImageUtils.loadTexture('/data/radar.png', 
                                           undefined, 
                                           textureHasLoaded);

function textureHasLoaded() {
  safeToRender = true;
}

然后在safeToRender为真之前不要开始渲染。 当然,如果您加载的图像超过1张,则需要使用计数或其他内容而不是标记。