Question

我已经使用gl.TRIANGLE_STRIP绘制了一个三角形，但是当我尝试将其更改为gl.TRIANGLE时，这些面将无法渲染。看来顶点正在渲染为非常小的点，但是面是空的。

我的理解是，对于单个三角形，TRIANGLE与TRIANGLE_STRIP的顶点格式应相同。

// vertex setup
const buffer = gl.createBuffer();
const vertices = new Float32Array([
    1,  -1, -1,     1,   1.3, 1.5,  1,
    1,  -1,  1,     1.3, 1,   1.5,  1,
    0,   1,  0,     1,   1,   1.75, 1
]);

gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW);

const length = vertices.length / 7;
const mode = gl.TRIANGLE_STRIP;

return {buffer, length, mode};

使用以下渲染代码可以正常工作：

// render frame
gl.bindBuffer(gl.ARRAY_BUFFER, shape.buffer);
gl.vertexAttribPointer(attribs.position, 3, gl.FLOAT, false, 28, 0);
gl.vertexAttribPointer(attribs.color, 4, gl.FLOAT, false, 28, 12);
gl.enableVertexAttribArray(attribs.position);
gl.enableVertexAttribArray(attribs.color);
gl.useProgram(programs.colored);
gl.uniformMatrix4fv(uniforms.projection, false, projection);
gl.uniformMatrix4fv(uniforms.modelView, false, modelView);
gl.drawArrays(shape.mode, 0, shape.length);

但是，如果我将mode更改为gl.TRIANGLE，则不会出现任何面，其顶点几乎看不到小点。

我在这里误会什么？

WebGL TRIANGLE和TRIANGLE_STRIP

0 个答案: