探索 WebGL 世界之美：绘出斑斓点阵

前端

2023-09-14 08:29:11

WebGL，全称 Web Graphics Library，是一个 JavaScript API，它允许您在浏览器中创建和渲染 3D 图形。WebGL 是一个跨平台的 API，这意味着它可以在任何支持 WebGL 的浏览器中运行。

WebGL 可以用来创建各种各样的 3D 图形，包括模型、粒子系统和动画。您还可以使用 WebGL 来创建交互式图形，例如游戏和虚拟现实体验。

在本文中，我们将学习如何使用 WebGL 来绘制一个简单的点阵。我们将从创建一个基本的 WebGL 程序开始，然后我们将学习如何使用 WebGL 着色器来为我们的点阵添加颜色。

1. 创建 WebGL 程序

要创建一个 WebGL 程序，我们需要做以下几件事：

创建一个 <canvas> 元素。<canvas> 元素是用于在浏览器中渲染图形的 HTML 元素。
获取 <canvas> 元素的上下文。<canvas> 元素的上下文是用于与 WebGL 进行交互的 JavaScript 对象。
创建一个 WebGL 程序。WebGL 程序是包含顶点着色器和片段着色器的 JavaScript 对象。
将顶点数据和片段数据传递给 WebGL 程序。顶点数据是用于定义点阵的形状的数组，片段数据是用于定义点阵的颜色。
告诉 WebGL 程序使用顶点着色器和片段着色器。
调用 WebGLRenderingContext.drawArrays() 方法来绘制点阵。

2. 使用 WebGL 着色器

WebGL 着色器是用于定义图形外观的程序。WebGL 有两种着色器：顶点着色器和片段着色器。顶点着色器用于定义顶点的位置，片段着色器用于定义顶点的颜色。

在本文中，我们将使用一个简单的顶点着色器和一个简单的片段着色器。顶点着色器将把顶点位置传递给片段着色器，片段着色器将把顶点颜色传递给 WebGL 程序。

3. 绘制点阵

一旦我们创建了 WebGL 程序并定义了着色器，就可以开始绘制点阵了。要绘制点阵，我们需要做以下几件事：

调用 WebGLRenderingContext.clear() 方法来清除 <canvas> 元素的内容。
将 WebGL 程序绑定到 <canvas> 元素的上下文中。
调用 WebGLRenderingContext.drawArrays() 方法来绘制点阵。

4. 完整代码

以下是如何使用 WebGL 绘制点阵的完整代码：

<!DOCTYPE html>
<html>
<head>
  
</head>
<body>
  <canvas id="canvas" width="500" height="500"></canvas>

  <script>
    // 获取 `<canvas>` 元素和上下文
    var canvas = document.getElementById("canvas");
    var gl = canvas.getContext("webgl");

    // 创建 WebGL 程序
    var program = gl.createProgram();

    // 创建顶点着色器
    var vertexShader = gl.createShader(gl.VERTEX_SHADER);
    gl.shaderSource(vertexShader, `
      attribute vec3 position;

      void main() {
        gl_Position = vec4(position, 1.0);
      }
    `);
    gl.compileShader(vertexShader);

    // 创建片段着色器
    var fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
    gl.shaderSource(fragmentShader, `
      void main() {
        gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);
      }
    `);
    gl.compileShader(fragmentShader);

    // 将顶点着色器和片段着色器附加到 WebGL 程序
    gl.attachShader(program, vertexShader);
    gl.attachShader(program, fragmentShader);

    // 链接 WebGL 程序
    gl.linkProgram(program);

    // 获取顶点位置属性的位置
    var positionAttributeLocation = gl.getAttribLocation(program, "position");

    // 创建顶点数据
    var vertices = [
      -0.5, -0.5, 0.0,
      0.5, -0.5, 0.0,
      0.0, 0.5, 0.0
    ];

    // 创建顶点缓冲区对象
    var vertexBufferObject = gl.createBuffer();

    // 将顶点数据绑定到顶点缓冲区对象
    gl.bindBuffer(gl.ARRAY_BUFFER, vertexBufferObject);
    gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW);

    // 将顶点缓冲区对象绑定到顶点位置属性
    gl.vertexAttribPointer(positionAttributeLocation, 3, gl.FLOAT, false, 0, 0);

    // 启用顶点位置属性
    gl.enableVertexAttribArray(positionAttributeLocation);

    // 清除 `<canvas>` 元素的内容
    gl.clearColor(0.0, 0.0, 0.0, 1.0);
    gl.clear(gl.COLOR_BUFFER_BIT);

    // 使用 WebGL 程序
    gl.useProgram(program);

    // 绘制点阵
    gl.drawArrays(gl.TRIANGLES, 0, 3);
  </script>
</body>
</html>