I am working on a project in webgl (I cannot use three.js or other lib) and when I render skybox it looks like this:

skybox issue

as you can see, on the edges of the cube there are some lines, so it can be said where skybox textures meet. Note that the same textures work well with three.js library So it has to be something wrong with my drawing code.

My cube .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

My drawing code:

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

Texture loads:

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

Does anybody know what can be the issue ?

有帮助吗?

解决方案

Just try to add:

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

It should help if you don't use Cube Maps.

许可以下: CC-BY-SA归因
不隶属于 StackOverflow
scroll top