用 WebGL 实现火焰效果：代码示例和解析

2023-11-03 22:58:27

WebGL实现炫酷火焰效果：一步步打造逼真动画

使用WebGL创造迷人的火焰动画

在计算机图形学的世界中，WebGL脱颖而出，成为实现令人惊叹的3D图形和动画效果的有力工具。本教程将深入探讨如何使用WebGL打造逼真的火焰效果，从零开始逐步引导你完成整个过程。

1. 搭建画布：让你的火焰生机勃勃

我们的旅程始于创建一块画布，这是火焰效果的展示舞台。使用HTML5的<canvas>标签，你可以轻松建立一个画布，为你的火焰提供一个空间。

<canvas id="canvas" width="375" height="300"></canvas>

2. 编写着色器代码：火焰背后的秘密配方

着色器是WebGL的心脏，负责定义火焰的外观和行为。它们分为顶点着色器（处理顶点数据）和片元着色器（处理每个像素的颜色）。

顶点着色器

attribute vec3 position;
uniform float time;

void main() {
  gl_Position = vec4(position, 1.0);
}

片元着色器

uniform float time;

void main() {
  float noise = fract(sin(time) * 43758.5453);
  float color = mix(0.0, 1.0, noise);
  gl_FragColor = vec4(color, color, color, 1.0);
}

3. 构建火焰动画：让你的火焰动起来

为了让火焰栩栩如生，我们需要构建动画。我们使用requestAnimationFrame()函数，它就像一个引擎，不断推动火焰的运动。

function animate() {
  requestAnimationFrame(animate);

  // 更新时间变量
  time += 0.01;

  // 渲染火焰效果
  gl.clearColor(0.0, 0.0, 0.0, 1.0);
  gl.clear(gl.COLOR_BUFFER_BIT);
  gl.drawArrays(gl.TRIANGLES, 0, 3);
}

4. 完整代码：将所有部分汇聚在一起

现在，我们将所有内容汇总到一个完整的代码示例中：

<!DOCTYPE html>
<html>
  <head>

  </head>
  <body>
    <canvas id="canvas" width="375" height="300"></canvas>

    <script src="webgl.js"></script>
    <script>
      // 创建画布
      const canvas = document.getElementById("canvas");
      const gl = canvas.getContext("webgl");

      // 编译着色器
      const vertexShader = gl.createShader(gl.VERTEX_SHADER);
      const vertexShaderSource = `
        attribute vec3 position;
        uniform float time;

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

      const fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
      const fragmentShaderSource = `
        uniform float time;

        void main() {
          float noise = fract(sin(time) * 43758.5453);
          float color = mix(0.0, 1.0, noise);
          gl_FragColor = vec4(color, color, color, 1.0);
        }
      `;
      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);

      // 获取属性和 uniform 变量的位置
      const positionAttributeLocation = gl.getAttribLocation(program, "position");
      const timeUniformLocation = gl.getUniformLocation(program, "time");

      // 创建缓冲区对象
      const positionBuffer = gl.createBuffer();

      // 绑定缓冲区对象
      gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);

      // 填充缓冲区对象的数据
      const positions = [
        -1.0, -1.0, 0.0,
        1.0, -1.0, 0.0,
        0.0, 1.0, 0.0,
      ];
      gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(positions), gl.STATIC_DRAW);

      // 启用属性
      gl.enableVertexAttribArray(positionAttributeLocation);

      // 绑定属性和缓冲区对象
      gl.vertexAttribPointer(positionAttributeLocation, 3, gl.FLOAT, false, 0, 0);

      // 设置 uniform 变量
      gl.uniform1f(timeUniformLocation, 0.0);

      // 启用深度测试
      gl.enable(gl.DEPTH_TEST);

      // 清除颜色缓冲区和深度缓冲区
      gl.clearColor(0.0, 0.0, 0.0, 1.0);
      gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);

      // 渲染火焰效果
      gl.drawArrays(gl.TRIANGLES, 0, 3);

      // 启动动画
      function animate() {
        requestAnimationFrame(animate);

        // 更新时间变量
        time += 0.01;

        // 设置 uniform 变量
        gl.uniform1f(timeUniformLocation, time);

        // 清除颜色缓冲区和深度缓冲区
        gl.clearColor(0.0, 0.0, 0.0, 1.0);
        gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);

        // 渲染火焰效果
        gl.drawArrays(gl.TRIANGLES, 0, 3);
      }
      animate();
    </script>
  </body>
</html>