1

我正在使用 webgl 开发一个项目（我不能使用 three.js 或其他库），当我渲染天空盒时，它看起来像这样：

天空盒问题

如您所见，立方体的边缘有一些线条，因此可以说是天空盒纹理的交汇处。请注意，相同的纹理适用于 three.js 库所以我的绘图代码一定有问题。

我的立方体.obj：

v 500 500 500
v 500 500 -500
v 500 -500 500
v 500 -500 -500
v -500 500 -500
v -500 500 500
v -500 -500 -500
v -500 -500 500
vt 0 1
vt 0 0
vt 1 1
vt 0 0
vt 1 0
vt 1 1
vt 0 1
vt 0 0
vt 1 1
vt 0 0
vt 1 0
vt 1 1
vt 0 1
vt 0 0
vt 1 1
vt 0 0
vt 1 0
vt 1 1
vt 0 1
vt 0 0
vt 1 1
vt 0 0
vt 1 0
vt 1 1
vt 0 1
vt 0 0
vt 1 1
vt 0 0
vt 1 0
vt 1 1
vt 0 1
vt 0 0
vt 1 1
vt 0 0
vt 1 0
vt 1 1
vn 1 0 0
vn 1 0 0
vn 1 0 0
vn 1 0 0
vn 1 0 0
vn 1 0 0
vn -1 0 0
vn -1 0 0
vn -1 0 0
vn -1 0 0
vn -1 0 0
vn -1 0 0
vn 0 1 0
vn 0 1 0
vn 0 1 0
vn 0 1 0
vn 0 1 0
vn 0 1 0
vn 0 -1 0
vn 0 -1 0
vn 0 -1 0
vn 0 -1 0
vn 0 -1 0
vn 0 -1 0
vn 0 0 1
vn 0 0 1
vn 0 0 1
vn 0 0 1
vn 0 0 1
vn 0 0 1
vn 0 0 -1
vn 0 0 -1
vn 0 0 -1
vn 0 0 -1
vn 0 0 -1
vn 0 0 -1
f 1/1/1 3/2/2 2/3/3
f 3/4/4 4/5/5 2/6/6
f 5/7/7 7/8/8 6/9/9
f 7/10/10 8/11/11 6/12/12
f 5/13/13 6/14/14 2/15/15
f 6/16/16 1/17/17 2/18/18
f 8/19/19 7/20/20 3/21/21
f 7/22/22 4/23/23 3/24/24
f 6/25/25 8/26/26 1/27/27
f 8/28/28 3/29/29 1/30/30
f 2/31/31 4/32/32 5/33/33
f 4/34/34 7/35/35 5/36/36

我的绘图代码：

    for(var i=0, len=TexturesArray.length; i<len; i++) {
        _gl.bindTexture(_gl.TEXTURE_2D, TexturesArray[i].glTex); 
        _gl.drawElements(_gl.TRIANGLES, (Object.offset ? Object.offset : Object.Triangles.length), _gl.UNSIGNED_SHORT, i*6*2);   
    }

纹理加载：

this.loadTexture = function(Img, opts){  
        var TempTex = _gl.createTexture();  
        _gl.bindTexture(_gl.TEXTURE_2D, TempTex);    

        //_gl.pixelStorei(_gl.UNPACK_FLIP_Y_WEBGL, true);  

        _gl.texImage2D(_gl.TEXTURE_2D, 0, _gl.RGBA, _gl.RGBA, _gl.UNSIGNED_BYTE, Img);    

        _gl.texParameteri(_gl.TEXTURE_2D, _gl.TEXTURE_MAG_FILTER, _gl.LINEAR);
        _gl.texParameteri(_gl.TEXTURE_2D, _gl.TEXTURE_MIN_FILTER, _gl.LINEAR_MIPMAP_NEAREST);
        _gl.generateMipmap(_gl.TEXTURE_2D);   

        _gl.bindTexture(_gl.TEXTURE_2D, null);  
        return TempTex;  
    };

有谁知道可能是什么问题？

4

1 回答 1

1

只需尝试添加：

gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);

如果您不使用 Cube Maps，它应该会有所帮助。

于 2013-09-13T19:55:48.400 回答