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.

score 2 · Accepted Answer · answered Mar 10 '14 at 03:43

2

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.

answered Mar 10 '14 at 03:43

gman

100,619
31
269
393

I'd rather like the asynchronous loading - less time showing progress bars. The current solution will render the scene with solid color objects until the textures eventually show up. I do have loaders for things that absolutely must exist before I can continue (models...), but I'd like to lazy load as much as possible. – BuschnicK Mar 10 '14 at 20:22
2

You have 2 options then. (1) use a different texture until the image has loaded or (2) change `THREE.ImageUtils.loadTexture` so it creates a 1x1 pixel texture to start. See http://stackoverflow.com/questions/19722247/webgl-wait-for-texture-to-load/19748905#19748905 – gman Mar 11 '14 at 02:29

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

1 Answers1