WebGL 入门指南：绘制三角形

2023-11-20 14:54:44

绘制三角形：深入了解 WebGL 缓冲区

在掌握了 WebGL 的基础知识后，让我们继续深入探索，了解如何使用缓冲区绘制三角形，从而构建更复杂的图形。

缓冲区简介

缓冲区是用于存储 WebGL 应用程序中图形数据的对象。它们允许我们高效地传输数据到图形处理器 (GPU)，并使图形渲染更加高效。

创建和绑定缓冲区

要创建缓冲区，我们使用 gl.createBuffer() 方法：

const triangleVertexBuffer = gl.createBuffer();

创建缓冲区后，我们需要将其绑定到我们希望用于存储数据的特定目标。例如，要存储顶点数据，我们使用：

gl.bindBuffer(gl.ARRAY_BUFFER, triangleVertexBuffer);

填充缓冲区数据

使用 gl.bufferData() 方法可以将数据填充到缓冲区中。对于三角形，我们需要提供顶点数据：

const triangleVertices = [
    0.0, 1.0, 0.0, // 顶点 1
    -1.0, -1.0, 0.0, // 顶点 2
    1.0, -1.0, 0.0  // 顶点 3
];

gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(triangleVertices), gl.STATIC_DRAW);

配置顶点属性

为了将缓冲区数据与顶点着色器连接起来，我们需要配置顶点属性。这通过 gl.vertexAttribPointer() 方法完成：

const positionAttributeLocation = gl.getAttribLocation(program, "a_position");

gl.enableVertexAttribArray(positionAttributeLocation);

gl.vertexAttribPointer(positionAttributeLocation, 3, gl.FLOAT, false, 0, 0);

绘制三角形

最后，我们可以使用 gl.drawArrays() 方法绘制三角形：

gl.drawArrays(gl.TRIANGLES, 0, 3);

代码示例

以下是可以绘制三角形的完整代码：

<!DOCTYPE html>
<html>
<head>
    
    <script>
        function initWebGL() {
            // 获取 canvas 元素
            const canvas = document.getElementById('glcanvas');

            // 初始化 WebGL 上下文
            const gl = canvas.getContext('webgl');

            // 创建 WebGL 程序
            const vertexShaderSource = `
                attribute vec3 a_position;

                void main() {
                    gl_Position = vec4(a_position, 1.0);
                }
            `;
            const fragmentShaderSource = `
                void main() {
                    gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);
                }
            `;
            const vertexShader = gl.createShader(gl.VERTEX_SHADER);
            gl.shaderSource(vertexShader, vertexShaderSource);
            gl.compileShader(vertexShader);
            const fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
            gl.shaderSource(fragmentShader, fragmentShaderSource);
            gl.compileShader(fragmentShader);
            const program = gl.createProgram();
            gl.attachShader(program, vertexShader);
            gl.attachShader(program, fragmentShader);
            gl.linkProgram(program);
            gl.useProgram(program);

            // 创建和绑定缓冲区
            const triangleVertexBuffer = gl.createBuffer();
            gl.bindBuffer(gl.ARRAY_BUFFER, triangleVertexBuffer);

            // 填充缓冲区数据
            const triangleVertices = [
                0.0, 1.0, 0.0, // 顶点 1
                -1.0, -1.0, 0.0, // 顶点 2
                1.0, -1.0, 0.0  // 顶点 3
            ];
            gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(triangleVertices), gl.STATIC_DRAW);

            // 配置顶点属性
            const positionAttributeLocation = gl.getAttribLocation(program, "a_position");
            gl.enableVertexAttribArray(positionAttributeLocation);
            gl.vertexAttribPointer(positionAttributeLocation, 3, gl.FLOAT, false, 0, 0);

            // 绘制三角形
            gl.drawArrays(gl.TRIANGLES, 0, 3);
        }
        window.onload = initWebGL;
    </script>
</head>
<body>
    <canvas id="glcanvas" width="500" height="500"></canvas>
</body>
</html>