WebGL 背景动画

2023-10-23 20:43:25

将 WebGL 动画作为背景

大家好，我是 Fly 哥。转眼又到了周末，这次分享的文章篇幅不长。如果你现在或将来会涉及到个人博客，那么如何将炫酷的 3D 效果添加到普通网页中呢？这篇文章将为你揭晓答案：

见文章开头处展示的 3D 动画，其实它就是整个网页的背景！

相信大家都已经看到了 3D 动画在网站设计中的广泛应用，从交互式演示文稿到引人入胜的背景，这些动画让网页变得更加生动有趣。然而，实现这些令人惊叹的效果通常需要借助复杂的技术和昂贵的工具。但今天，我们将介绍一种使用 WebGL 的简单方法，让你轻松地在网页中融入 WebGL 动画，而无需编写复杂的着色器或 3D 建模代码。

WebGL 是什么？

WebGL（Web Graphics Library）是一种基于 JavaScript 的 API，可让你直接在浏览器中渲染交互式 3D 图形。它基于 OpenGL ES 2.0，是一个跨平台的 3D 图形 API，广泛用于移动设备和嵌入式系统。有了 WebGL，开发者可以在网页中创建和操作复杂的 3D 场景，而无需借助外部插件或本机应用程序。

将 WebGL 动画添加到网页

使用 WebGL 在网页中添加动画相对简单。首先，你需要创建一个 <canvas> 元素，它将用作 WebGL 渲染目标：

<canvas id="webgl-canvas"></canvas>

接下来，你需要创建一个 JavaScript 文件来初始化 WebGL 上下文，并设置场景和动画：

// 获取 WebGL canvas 元素
const canvas = document.getElementById('webgl-canvas');

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

// 设置场景
// ...

// 设置动画循环
function render() {
  // 更新场景
  // ...

  // 渲染场景
  gl.drawArrays(gl.TRIANGLES, 0, 3);

  // 请求下一次动画帧
  requestAnimationFrame(render);
}

// 开始渲染循环
render();

在上述示例中，render() 函数被用作动画循环，它不断更新场景，并使用 WebGL 的 drawArrays() 方法渲染场景。通过这种方式，你可以创建动态的 3D 动画，并在网页中显示它们。

示例代码

为了进一步说明如何使用 WebGL 在网页中添加动画，我们提供了一个简单的示例代码：

<!DOCTYPE html>
<html>
<head>
  
</head>
<body>
  <canvas id="webgl-canvas"></canvas>

  <script>
    // WebGL 代码在此处
  </script>
</body>
</html>

// WebGL 代码

// 获取 WebGL canvas 元素
const canvas = document.getElementById('webgl-canvas');

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

// 设置场景
const vertexShaderSource = `
  attribute vec3 aVertexPosition;

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

const fragmentShaderSource = `
  precision highp float;

  uniform vec3 uColor;

  void main() {
    gl_FragColor = vec4(uColor, 1.0);
  }
`;

// 创建着色器
const vertexShader = gl.createShader(gl.VERTEX_SHADER);
const fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);

// 编译着色器
gl.shaderSource(vertexShader, vertexShaderSource);
gl.compileShader(vertexShader);

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 aVertexPosition = gl.getAttribLocation(program, 'aVertexPosition');
const uColor = gl.getUniformLocation(program, 'uColor');

// 创建缓冲区
const vertexBuffer = gl.createBuffer();

// 绑定缓冲区
gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);

// 填充缓冲区数据
const vertices = [
  -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(vertices), gl.STATIC_DRAW);

// 设置顶点属性
gl.vertexAttribPointer(aVertexPosition, 3, gl.FLOAT, false, 0, 0);
gl.enableVertexAttribArray(aVertexPosition);

// 设置 uniform 变量
gl.uniform3f(uColor, 1.0, 0.0, 0.0);

// 设置视口
gl.viewport(0, 0, canvas.width, canvas.height);

// 清除颜色缓冲区
gl.clearColor(0.0, 0.0, 0.0, 1.0);
gl.clear(gl.COLOR_BUFFER_BIT);

// 渲染场景
gl.drawArrays(gl.TRIANGLES, 0, 3);
  </script>
</html>