多个gl.drawElements调用无法正常工作

时间:2013-12-11 22:40:00

标签: javascript webgl

我有以下功能用Mini Cooper绘制场景,使用for循环分别渲染汽车的每个部分。

function drawScene() {
    var colormap = new Object();
    colormap["Body"] = [0.05, 0.05, 0.54];
    colormap["Body Chrome"] = [0.95, 0.96, 0.93];
    colormap["Roof"]=[0.85, 0.85, 0.85];
    colormap["Headlights"]=[0.95, 0.96, 0.93];
    colormap["Mirrors"]=[0.85, 0.85, 0.85];
    colormap["Brakelights"]=[0.54, 0.22, 0.22];
    colormap["Undercarriage"]=[0.2, 0.2, 0.2];
    colormap["Antenna"]=[0.2, 0.2, 0.2];
    colormap["Driver Blinker"]=[0.9, 0.5, 0.1];
    colormap["Passenger Blinker"]=[0.9, 0.5, 0.1];
    colormap["Exhaust"]=[0.95, 0.96, 0.93];
    colormap["Upper Driver Wiper"]=[0.2, 0.2, 0.2];
    colormap["Upper Passenger Wiper"]=[0.2, 0.2, 0.2];
    colormap["Lower Driver Wiper"]=[0.2, 0.2, 0.2];
    colormap["Lower Passenger Wiper"]=[0.2, 0.2, 0.2]
    colormap["Rear Wiper"]=[0.2, 0.2, 0.2];
    colormap["Vents"]=[0.1, 0.1, 0.1];
    colormap["License"]=[0.94, 0.64, 0.19];
    colormap["Front Driver Rim"]=[0.75, 0.75, 0.75];
    colormap["Front Passenger Rim"]=[0.75, 0.75, 0.75];
    colormap["Rear Driver Rim"]=[0.75, 0.75, 0.75];
    colormap["Rear Passenger Rim"]=[0.75, 0.75, 0.75];
    colormap["Front Driver Tire"]=[0.1, 0.1, 0.1];
    colormap["Front Passenger Tire"]=[0.1, 0.1, 0.1];
    colormap["Rear Driver Tire"]=[0.1, 0.1, 0.1];
    colormap["Rear Passenger Tire"]=[0.1, 0.1, 0.1];
    colormap["Brakes"]=[0.75, 0.75, 0.75];
    colormap["Rear View Mirror"]=[0.8, 0.8, 0.8];
    colormap["Interior"]=[0.4, 0.4, 0.0];
    colormap["Driver"]=[0.9, 0.9, 0.9];
    colormap["Chair"]=[0.55, 0.27, 0.075];
    colormap["Windows"]=[0.5, 0.5, 0.5];
    gl.viewport(0, 0, gl.viewportWidth, gl.viewportHeight);
    gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);



    gl.bindBuffer(gl.ARRAY_BUFFER, miniVertexBuffer);
    gl.vertexAttribPointer(shaderProgram.vertexPositionAttribute, 3, gl.FLOAT, false, 4*8, 0);
    setMatrixUniforms();

    gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, miniIndexBuffer);
    console.log(miniCoop);
    for(part in miniCoop.parts){
        var start = miniCoop.group[miniCoop.parts[part]][0];
        var end = miniCoop.group[miniCoop.parts[part]][1];
        gl.uniform3f(shaderProgram.colour, colormap[miniCoop.parts[part]][0], colormap[miniCoop.parts[part]][1], colormap[miniCoop.parts[part]][2]);
        var offset = 2*3 * start;
        var count = 3 *(end - start);
        gl.drawElements(gl.TRIANGLES, count, gl.UNSIGNED_SHORT, offset);
    }
}

然而,当调用drawElements()时,场景不会在背景中绘制东西,导致绘制的第一个东西,即身体,总是在前景中,而不管它在场景中的位置,以及场景的其余部分按照色彩映射中显示的顺序显示。我不知道问题是什么,并且非常感谢一些帮助。

示例输出图像:http://imgur.com/LAnp2Rv 在Dropbox上:https://dl.dropboxusercontent.com/u/80759516/test.html

1 个答案:

答案 0 :(得分:0)

开启深度测试?

gl.enable(gl.DEPTH_TEST);