WebGL仅靠矩阵绘制正方形时如何移除代码中的顶点位置相关逻辑

实现原理 #

WebGL2 顶点着色器提供内置变量gl_VertexID，可以直接获取当前绘制顶点的序号，我们直接在着色器内部预设正方形需要的6个顶点坐标，不需要在CPU侧定义、上传任何顶点数据。

顶点着色器修改 #

替换你原来的顶点着色器代码即可，u_matrix矩阵的使用逻辑和原有逻辑完全兼容：

#version 300 es
uniform mat4 u_matrix;
out vec2 v_texcoord;
void main() {
    // 内置的6个顶点坐标，和你之前上传的顶点数据完全匹配
    vec2 positions[6] = vec2[6](
        vec2(0.0, 0.0),
        vec2(0.0, 1.0),
        vec2(1.0, 0.0),
        vec2(0.0, 1.0),
        vec2(1.0, 1.0),
        vec2(1.0, 0.0)
    );
    vec2 currentPos = positions[gl_VertexID];
    gl_Position = u_matrix * vec4(currentPos, 0.0, 1.0);
    v_texcoord = currentPos;
}

JavaScript侧修改 #

• 直接删除你提到的gl.bufferData顶点数据上传代码，以及所有和顶点属性相关的逻辑：包括顶点缓冲区创建、gl.bindBuffer、gl.vertexAttribPointer、gl.enableVertexAttribArray调用。
• 绘制时直接执行gl.drawArrays(gl.TRIANGLES, 0, 6)即可，不需要绑定任何顶点缓冲区。

内容的提问来源于stack exchange，提问作者user16657004