2013-09-09 3 views
1

Я работаю над проектом в WebGL (я не могу использовать three.js или другой LIB), и когда я сделать скайбокс это выглядит следующим образом:WebGL SKYBOX текстур артефакты куба края

skybox issue

как вы можно увидеть, что на краях куба есть несколько строк, поэтому можно сказать, где встречаются текстуры skybox. Обратите внимание, что те же самые текстуры хорошо работают с библиотекой 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); 
    } 

Texture нагрузки:

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

Кто-нибудь знает, что может быть проблема?

ответ

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.

+0

Да, это сработало, как шарм! Спасибо! –

+0

Почему это не работает в Cube Maps? Я использую BoxGeometry с Three.js и имеет тот же probem.My вопрос: http: //stackoverflow.com/questions/35738750/how-can-i-remove- бело-линии или псевдоним, когда решения-а-скайбокс-в-три-JS – aboutqx