WebGL - 使用多个纹理时出现条纹答案

【问题标题】：WebGL - stripes when using multiple texturesWebGL - 使用多个纹理时出现条纹
【发布时间】：2014-09-16 12:09:33
【问题描述】：

我在我的 WebGL 程序中使用了三个纹理，我得到了条纹/重叠效果。

我绑定的第一个纹理是可以的，但是顺序纹理会得到效果。

这是我的顶点数据格式（x,y,z,s,t,textureIndex,textureName）

-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

这是我单独初始化每个纹理的方法：

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

缓冲区初始化：

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

在我正在做的主循环中：

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

【问题讨论】：

标签： javascript 3d opengl-es-2.0 webgl

【解决方案1】：

我看到的可能性是您变化的vTextureIndex 的插值很差。尝试将其四舍五入到最接近而不是向下：int(vTextureIndex + 0.5)。

是的，您会认为这没有必要，但 GPU 在允许使用的所有地方都使用粗略的、足够好的近似值。

【讨论】：