只有第一次调用在具有相同顶点缓冲区的多个 drawElements 调用中有效

Question

我正在尝试使用具有不同光源的多个drawElement调用在多个光源下渲染模型。代码的要点如下。

    this.setUniform("u_matrix", "Matrix4fv", false, matrix);
    this.setUniform("u_nMatrix", "Matrix3fv", false, nMatrix);
    this.setUniform("u_kSpecular", "3fv", material.specular);
    this.setUniform("u_kDiffuse", "3fv", material.diffuse);
    this.setUniform("u_kAmbient", "3fv", material.ambient);
    this.setUniform("u_shininess", "1f", material.shininess);
    this.setVertexAttribArray("a_position", new Float32Array(mesh.vertices), 3);
    this.setVertexAttribArray("a_normal", new Float32Array(mesh.vertexNormals), 3);
    this.setElementArray(new Uint16Array(mesh.indices));
    for(var i = 0;i < lights.length;i++) {
        if(i == 1) {
            gl.enable(gl.BLEND);
            gl.blendFunc(gl.ONE, gl.ONE);
            gl.blendEquation(gl.FUNC_ADD);
        }
        var light = lights[i];
        console.dir(light);
        this.setUniform("u_lightType", "1i", light.type);
        this.setUniform("u_lightVector", "3fv", light.vector);
        this.setUniform("u_lightColor", "3fv", light.color);
        gl.drawElements(gl.TRIANGLES, mesh.indices.length, gl.UNSIGNED_SHORT, 0);
    }
    gl.disable(gl.BLEND);

这里的问题是只渲染第一个照明。后续的 drawElements 不会渲染任何内容。我认为问题不在于我的着色器代码，因为即使我将着色器剥离到仅将片段颜色设置为等于光源类型或某些此类参数，问题仍然存在。

setUniform setVertexAttribArray和setElementArray是我写的一些帮手。它们基本上看起来像这样：

setElementArray: function(array) {
    var gl = this.gl;
    var buffer = this._arrBuffers.__indexBuffer;
    if(_.isUndefined(buffer)) {
        buffer = gl.createBuffer();
        this._arrBuffers.__indexBuffer = buffer;
    }
    gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, buffer);
    gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, array, gl.STATIC_DRAW);
}
setVertexAttribArray: function(name, array, size, type, normalized, stride, offset) {
    var gl = this.gl;
    size = size || 2;
    type = type || gl.FLOAT;
    normalized = normalized || false;
    stride = stride || 0;
    offset = offset || 0;
    var buffer = this._arrBuffers[name];
    if(_.isUndefined(buffer)) {
        buffer = gl.createBuffer();
        this._arrBuffers[name] = buffer;
    }
    var location = this.getLocation(name, true);
    gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
    gl.bufferData(gl.ARRAY_BUFFER, array, gl.STATIC_DRAW);
    gl.enableVertexAttribArray(location);
    gl.vertexAttribPointer(location, size, type, normalized, stride, offset);
}

Answer 1

我已经找到了解决方案。我设置了gl.depthFunc(gl.LESS)，所以后续的效果图没有通过深度测试。设置gl.depthFunc(gl.LEQUAL)解决了问题。