다중 텍스처를 사용할 때 WebGL - 줄무늬가 생깁니다.

WebGL 프로그램에서 세 가지 텍스처를 사용 중이며 스트라이프/오버랩 효과가 나타납니다. 내가 바인딩다중 텍스처를 사용할 때 WebGL - 줄무늬가 생깁니다.

enter image description here

첫 번째 텍스처는 OK이지만, 순차적 텍스처 효과를 얻을.

gl.bindTexture(gl.TEXTURE_2D, texture); 
gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, true); 
gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, texture.image); 
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST); 
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST); 
gl.bindTexture(gl.TEXTURE_2D, null);

버퍼 초기화 :

여기

-5.0 0.0 -5.0 0.0 0.0 1 WL01 
-5.0 0.0 5.0 0.0 1.0 1 WL01 
5.0 0.0 5.0 1.0 1.0 1 WL01 
-5.0 0.0 -5.0 0.0 0.0 1 WL01 
5.0 0.0 -5.0 1.0 0.0 1 WL01 
5.0 0.0 5.0 1.0 1.0 1 WL01 

-1.0 1.0 -4.0 0.0 1.0 2 WL02 
-1.0 0.0 -4.0 0.0 0.0 2 WL02 
-0.0 0.0 -4.0 1.0 0.0 2 WL02 
-1.0 1.0 -4.0 0.0 1.0 2 WL02 
-0.0 1.0 -4.0 1.0 1.0 2 WL02 
-0.0 0.0 -4.0 1.0 0.0 2 WL02 

2.0 1.0 -4.0 1.0 1.0 0 WL00 
2.0 0.0 -4.0 1.0 0.0 0 WL00 
0.5 0.0 -4.0 0.0 0.0 0 WL00 
2.0 1.0 -4.0 1.0 1.0 0 WL00 
0.5 1.0 -4.0 0.0 1.0 0 WL00 
0.5 0.0 -4.0 0.0 0.0 0 WL00

제가 개별적 텍스쳐 초기화 방법 내 정점 데이터 포맷 (X, Y, Z, S, T, textureIndex, textureName)의

levelVertexBuffer = gl.createBuffer(); 
gl.bindBuffer(gl.ARRAY_BUFFER, levelVertexBuffer); 
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(data), gl.STATIC_DRAW); 
levelVertexBuffer.vertexCount = 18; 
textureIndexBuffer = gl.createBuffer(); 
gl.bindBuffer(gl.ARRAY_BUFFER, textureIndexBuffer); 
gl.bufferData(gl.ARRAY_BUFFER, new Uint8Array(texIndexBuffData), gl.STATIC_DRAW);

메인 루프에서 나는 다음을 수행합니다.

01 23,516,

... 
for(var i = 0; i < level.textures.length; i++) { 
    gl.activeTexture(gl.TEXTURE0 + i); 
    gl.bindTexture(gl.TEXTURE_2D, level.textures[i]); 
} 
... 
gl.uniform1i(shaderProgram.texturesUniform0, 0); 
gl.uniform1i(shaderProgram.texturesUniform1, 1); 
gl.uniform1i(shaderProgram.texturesUniform2, 2);

버텍스 쉐이더 :

<script id="shader-vs" type="x-shader/x-vertex"> 
    attribute vec3 aVertexPosition; 
    attribute vec2 aTextureCoord; 
    attribute float aTextureIndex; 
    uniform mat4 uMVMatrix; 
    uniform mat4 uPMatrix; 
    varying vec2 vTextureCoord; 
    varying float vTextureIndex; 
    void main(void) { 
     gl_Position = uPMatrix * uMVMatrix * vec4(aVertexPosition, 1.0); 
     vTextureCoord = aTextureCoord; 
     vTextureIndex = aTextureIndex; 
    } 
</script>

조각 쉐이더 :

<script id="shader-fs" type="x-shader/x-fragment"> 
    precision mediump float; 
    varying float vTextureIndex; 
    varying vec2 vTextureCoord; 
    uniform sampler2D u_texture0; 
    uniform sampler2D u_texture1; 
    uniform sampler2D u_texture2; 

    vec4 getSampleFromArray(int index, vec2 uv) { 
     vec4 color; 
     if (index == 0) { 
      color = texture2D(u_texture0, uv); 
     } else if (index == 1) { 
      color = texture2D(u_texture1, uv); 
     } else if (index == 2) { 
      color = texture2D(u_texture2, uv); 
     } 
     return color; 
    } 
    void main() { 
     gl_FragColor = getSampleFromArray(int(vTextureIndex), vec2(vTextureCoord.s, vTextureCoord.t)); 
    } 
</script>

Live example

출처

2014-09-16 veidelis