WebGL：粒化图片激发视觉新灵感

前端

2023-11-22 16:08:11

近年来，WebGL在网页设计中引起了广泛关注。它允许开发人员在浏览器中创建和渲染3D图形，打破了以往对网页设计局限性的认知。

本文将重点讨论利用WebGL实现粒子化图片的独特效果。通过将图片的有效像素作为点的坐标，并赋予其z轴的不同值，我们能够创造出具有3D深度的粒子效果。更进一步，我们可以通过透视投影和旋转动画等技术，让粒子效果更加生动。

项目背景

在近期的一个项目中，我需要为网站设计一个交互式背景。在头脑风暴过程中，我萌生了制作粒子效果的想法。这种效果能够为背景带来动态和趣味性。

粒子效果通常用于动画和视频游戏中，它能够营造出飘逸、神秘、充满艺术气息的氛围。我相信，这种效果在网页设计中也会有很好的表现。

技术方案

获取图片有效像素

粒子的位置是根据图片的有效像素来确定的。首先，我们需要获取图片的像素数据。这可以通过Canvas API的getImageData()方法来实现。

var canvas = document.createElement('canvas');
var context = canvas.getContext('2d');
context.drawImage(image, 0, 0);
var pixelData = context.getImageData(0, 0, canvas.width, canvas.height).data;

粒子的创建

接下来，我们将遍历像素数据，并为每个有效像素创建一个粒子。粒子的位置将根据像素的位置来确定，而粒子的颜色将根据像素的颜色来确定。

for (var i = 0; i < pixelData.length; i += 4) {
  var x = i % canvas.width;
  var y = Math.floor(i / canvas.width);
  var color = 'rgb(' + pixelData[i] + ', ' + pixelData[i + 1] + ', ' + pixelData[i + 2] + ')';

  var particle = new Particle(x, y, color);
  particles.push(particle);
}

渲染粒子

最后，我们将使用WebGL来渲染粒子。具体来说，我们将使用顶点着色器和片段着色器来定义粒子的外观和行为。

顶点着色器负责将粒子的位置从模型空间转换到裁剪空间。片段着色器负责计算每个像素的颜色。

// 顶点着色器
var vertexShaderSource = `
  attribute vec3 a_position;
  attribute vec3 a_color;

  uniform mat4 u_projectionMatrix;
  uniform mat4 u_viewMatrix;
  uniform mat4 u_modelMatrix;

  varying vec3 v_color;

  void main() {
    gl_Position = u_projectionMatrix * u_viewMatrix * u_modelMatrix * vec4(a_position, 1.0);
    v_color = a_color;
  }
`;

// 片段着色器
var fragmentShaderSource = `
  precision mediump float;

  varying vec3 v_color;

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