如何在WebGL顶点着色器内定义顶点位置并绘制三角形？

目标是直接在顶点着色器内自定义顶点位置，不依赖JavaScript的new Float32Array(positions)传递顶点数据，绘制出位置精准的三角形。以下是修正关键错误后的完整可运行代码：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>WebGL 示例</title>
    <style>
        canvas {
            border: 1px solid black;
        }
    </style>
</head>
<body>
    <canvas id="canvas" width="400" height="400"></canvas>
    <script>
        window.onload = function() {
            var canvas = document.getElementById('canvas');
            var gl = canvas.getContext('webgl');

            const shaderSource = {
                vertex: `
                          uniform vec2 screenSize; // 屏幕尺寸uniform变量

                          void main(void) {
                              // 定义顶点数组
                              vec3 vertices[3];
                              vertices[0] = vec3(0.0, 1.0, 0.0);
                              vertices[1] = vec3(-1.0, -1.0, 0.0);
                              vertices[2] = vec3(1.0, -1.0, 0.0);

                              // 根据屏幕尺寸调整顶点
                              for (int i = 0; i < 3; i++) {
                                  vertices[i].x *= screenSize.x / screenSize.y; // 根据宽高比调整x坐标
                              }

                              // 创建存储最终顶点的vec3变量
                              vec3 finalPosition = vec3(0.0);

                              // 通过gl_VertexID索引顶点数组赋值
                              finalPosition = vertices[gl_VertexID];

                              // 计算最终位置
                              gl_Position = vec4(finalPosition, 1.0);
                          }


                `,
                fragment: `
                    void main(void) {
                        gl_FragColor = vec4(0, 0.8, 0, 1);
                    }
                `
            };

            var vertShader = gl.createShader(gl.VERTEX_SHADER);
            gl.shaderSource(vertShader, shaderSource.vertex);
            gl.compileShader(vertShader);

            var fragShader = gl.createShader(gl.FRAGMENT_SHADER);
            gl.shaderSource(fragShader, shaderSource.fragment);
            gl.compileShader(fragShader);

            var shaderProgram = gl.createProgram();
            gl.attachShader(shaderProgram, vertShader);
            gl.attachShader(shaderProgram, fragShader);
            gl.linkProgram(shaderProgram);
            gl.useProgram(shaderProgram);

            // 设置screenSize uniform变量
            const screenSizeLoc = gl.getUniformLocation(shaderProgram, 'screenSize');
            gl.uniform2f(screenSizeLoc, canvas.width, canvas.height);

            // 清除画布
            gl.clearColor(1.0, 1.0, 1.0, 1.0);
            gl.clear(gl.COLOR_BUFFER_BIT);

            // 绘制三角形
            gl.drawArrays(gl.TRIANGLES, 0, 3);
        };
    </script>
</body>
</html>

原代码的两处关键错误及修正： #

• 未设置screenSize uniform变量的值：修正后通过JavaScript获取该uniform的位置，传入画布的宽高参数，确保顶点x坐标能根据画布宽高比适配，避免三角形变形
• 顶点着色器中finalPosition赋值语法错误：修正为使用WebGL内置变量gl_VertexID索引预先定义的顶点数组，为每个绘制的顶点分配正确的位置数据

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