时间戳

首页 > 解决方案 > WebGL TRIANGLE 与 TRIANGLE_STRIP

webgl - WebGL TRIANGLE 与 TRIANGLE_STRIP

问题描述

我使用 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，则不会出现任何面，顶点几乎看不到小点。

我在这里有什么误解？

标签： webglgl-triangle-strip

解决方案

推荐阅读