webgl skybox textures artifacts on cube edges

1.5k views Asked by At

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 ?

1

There are 1 answers

1
trebor On BEST ANSWER

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.