绘制一个蓝色三角形：WebGL 最简单的程序

WebGL 中的着色器：一个探索图形管道的神奇之旅

什么是着色器？

WebGL 中的着色器是强大的小程序，它们是图形管道的心脏。它们负责操纵 GPU，将顶点坐标和属性转换为像素颜色，创建我们屏幕上看到的令人惊叹的视觉效果。

构建 WebGL 程序：一步一步

1. 创建 WebGL 上下文：

我们的旅程从创建一个 WebGL 上下文开始，它是一个允许我们与 GPU 交互的接口。我们使用 <canvas> 元素并调用 getContext("webgl") 方法。

2. 编写顶点着色器：

顶点着色器将顶点作为输入，执行变换并输出其位置。它就像幕后的操纵者，确保顶点在恰当的位置。

const vertexShaderSource = `
    attribute vec3 position;
    void main() {
        gl_Position = vec4(position, 1.0);
    }
`;

3. 编写片段着色器：

片段着色器接收像素作为输入，确定其颜色。它充当调色板，为每个像素赋予它独特的色调。

const fragmentShaderSource = `
    void main() {
        gl_FragColor = vec4(0.0, 0.0, 1.0, 1.0);
    }
`;

4. 创建着色器程序：

现在，我们将顶点和片段着色器链接在一起，形成一个强大的着色器程序。

const shaderProgram = gl.createProgram();
gl.attachShader(shaderProgram, vertexShader);
gl.attachShader(shaderProgram, fragmentShader);
gl.linkProgram(shaderProgram);

5. 创建缓冲区：

缓冲区就像 GPU 内存中的宝箱，存储着我们的顶点数据。我们将创建一个数组缓冲区来保存顶点位置。

const vertexBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([
    -0.5, -0.5, 0.0,
    0.5, -0.5, 0.0,
    0.0, 0.5, 0.0
]), gl.STATIC_DRAW);

6. 配置顶点属性：

现在，我们告诉 WebGL 如何从缓冲区中获取顶点位置数据，就像寻宝游戏中的线索一样。

const positionAttributeLocation = gl.getAttribLocation(shaderProgram, "position");
gl.enableVertexAttribArray(positionAttributeLocation);
gl.vertexAttribPointer(positionAttributeLocation, 3, gl.FLOAT, false, 0, 0);

7. 绘制场景：

最后，我们调用 drawArrays 方法，将我们的场景呈现在画布上。

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

结论

我们已经踏上了 WebGL 之旅的第一步，构建了一个最简单的程序，在画布上绘制了一个蓝色三角形。这只是冰山一角，随着我们深入探索 WebGL 的世界，将会有更令人惊叹的发现等着我们。

常见问题解答

1. WebGL 是什么？
WebGL 是一种 API，允许我们直接访问 GPU，在 Web 浏览器中创建交互式 3D 图形。

2. 着色器在 WebGL 中扮演什么角色？
着色器是操纵 GPU 的程序，负责转换顶点坐标和属性以及确定像素颜色。

3. 编写着色器需要哪些语言？
WebGL 着色器使用一种称为 GLSL（OpenGL 着色语言）的特殊语言编写。

4. 缓冲区在 WebGL 中有什么作用？
缓冲区是 GPU 内存中的存储区域，用于保存顶点数据和其他信息。

5. WebGL 可以用于哪些应用程序？
WebGL 用于各种应用程序，包括 3D 游戏、数据可视化和交互式艺术。