How can I get rid of INVALID_VALUE warning when loading a three.js texture?

Question

Using Three.Js r66 and a setup like so:

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,
    }));

I'm getting the following warnings on the console:

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'

I'm pretty sure this is because the object is being rendered before the texture has been loaded, thus WebGL is trying to access a null texture in: three.js line 26190.

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

The code as quoted above works - once the texture has been loaded it displays just fine. I'd like to get rid of the warnings though - any ideas? Other materials (e.g. phong) seem to handle asynchronous texture loading better. They show up black until the texture arrives. Noticeably, they do not spam the console with warnings.

This demo (http://jeromeetienne.github.io/tunnelgl/) exhibits the same problem.

gman gman · Accepted Answer · 2014-03-10T03:43:27

Wait for the texture to load

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

function textureHasLoaded() {
  safeToRender = true;
}

Then don't start rendering until safeToRender is true. Of course if you're loading more than 1 image you'll need to use a count or something instead of a flag.

How can I get rid of INVALID_VALUE warning when loading a three.js texture?

1 Answers