WebGLRenderingContext ERROR loading texture maps

Question

First of all, thank you for this wonderfull work, i'm having a lot of fun working with three.js.

I tried to find answer about a recurent issue, .WebGLRenderingContext: GL ERROR :GL_INVALID_OPERATION : glDrawElements: attempt to access out of range vertices in attribute 2

I'm making a website in webgl, i spend few week understanding all about three.js but i can't fix this issue. I get this message on Chrome and firefox (latest) each time i try to load a canvas into a map, bumpmap and specmap. All my mesh are loaded from obj files, by the way i rewrote OBJMTLLoader.js to be able to load more parameters from obj files and more. here the code used to load image.

THREE.MTLLoader.loadTexture = function ( url, mapping, onLoad, onError ) {

var isCompressed = url.toLowerCase().endsWith( ".dds" );
var texture = null;

if ( isCompressed ) {

    texture = THREE.ImageUtils.loadCompressedTexture( url, mapping, onLoad, onError );

} else {

    var image = new Image();

    texture = new THREE.Texture( image, mapping );

        var loader = new THREE.ImageLoader();

        loader.addEventListener( 'load', function ( event ) {

            texture.image = THREE.MTLLoader.ensurePowerOfTwo_( event.content );
            texture.needsUpdate = true;
            if ( onLoad ) 
                onLoad( texture );

        } );

        loader.addEventListener( 'error', function ( event ) {

            if ( onError ) onError( event.message );

        } );

        loader.crossOrigin = this.crossOrigin;
        loader.load( url, image );

}

return texture;

}; I'm pretty sure it is from this, because when i disable this function, no more warning.

Is it because the mesh has a texture with an empty image while loading datas ? Is there any restriction on the dimensions of image ?

For now everything works fines, but i feel strange having those message in console.

Thanks

Maybe if you could provide a bit more of your code (jsfiddle?) we could simulate this warnings and see what is going on...? — Alex Under

Sayris Sayris · Accepted Answer · 2013-11-30T18:18:49

This error become because the Three.js buffers are outdated. When your add some textures (map,bumpMap ...) to a Mesh, you must recompose the buffers like this :

ob is  THREE.Mesh, mt is a Material, tex is a texture.

tex.needsUpdate = true;
mt.map = tex;
ob.material = mt;
ob.geometry.buffersNeedUpdate = true;
ob.geometry.uvsNeedUpdate = true;
mt.needsUpdate = true;

That's all folks !

Hope it's help.

Regards.

Sayris

WebGLRenderingContext ERROR loading texture maps

1 Answers