WebGLRenderingContext 错误加载纹理贴图 [英] WebGLRenderingContext ERROR loading texture maps

问题描述

首先，感谢您的出色工作，我在使用three.js 时很开心.

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

我试图找到关于一个反复出现的问题的答案，.WebGLRenderingContext: GL ERROR :GL_INVALID_OPERATION : glDrawElements: 尝试访问属性 2 中超出范围的顶点

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

我正在用 webgl 制作一个网站，我花了几周时间了解了 Three.js 的所有内容，但我无法解决这个问题.每次我尝试将画布加载到地图、凹凸贴图和规范贴图时，我都会在 Chrome 和 Firefox(最新)上收到此消息.我所有的网格都是从 obj 文件加载的，顺便说一下，我重写了 OBJMTLLoader.js 以便能够从 obj 文件加载更多参数等等.这里是用于加载图像的代码.

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 ) {

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.

谢谢

推荐答案

出现此错误是因为 Three.js 缓冲区已过时.当您向网格添加一些纹理(贴图、凹凸贴图 ...)时，您必须像这样重新组合缓冲区:

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;

就是这样！

希望对您有所帮助.

问候.

赛里斯

这篇关于WebGLRenderingContext 错误加载纹理贴图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！