我有以下功能用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
答案 0 :(得分:0)
开启深度测试?
gl.enable(gl.DEPTH_TEST);