旋转的三原色——WebGL滤镜的艺术

2024-02-19 12:16:32

旋转的三原色

想象一下，在一个空旷的舞台上，有红、蓝、绿三盏聚光灯，它们围绕着一个共同的中心旋转。当它们交汇时，创造出令人惊叹的色彩融合。这是我们希望通过本文实现的效果——旋转的三原色。

WebGL滤镜

WebGL是一种跨平台的3D图形API，它允许你在网页上创建交互式3D图形。WebGL滤镜是WebGL中的一种特殊效果，它可以应用于3D对象，以改变它们的视觉外观。在本文中，我们将使用WebGL滤镜来创建模糊的圆圈和旋转动画。

代码剖析

绘制模糊圆圈

function drawCircle(x, y, radius, color) {
  // 设置圆圈的中心位置和半径
  gl.vertexAttrib2f(positionAttributeLocation, x, y);
  gl.uniform1f(radiusUniformLocation, radius);

  // 设置圆圈的颜色
  gl.uniform4fv(colorUniformLocation, color);

  // 绘制圆圈
  gl.drawArrays(gl.TRIANGLE_FAN, 0, circleVertices.length);
}

这个函数负责绘制一个模糊的圆圈。它首先将圆圈的中心位置和半径传递给WebGL程序，然后设置圆圈的颜色。最后，它调用gl.drawArrays()函数来绘制圆圈。

旋转动画

function animate() {
  // 计算旋转角度
  var angle = Date.now() * 0.001;

  // 设置旋转矩阵
  var rotationMatrix = mat4.create();
  mat4.rotateZ(rotationMatrix, rotationMatrix, angle);

  // 将旋转矩阵传递给WebGL程序
  gl.uniformMatrix4fv(rotationMatrixUniformLocation, false, rotationMatrix);

  // 重新渲染场景
  gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);

  // 请求浏览器调用animate()函数
  requestAnimationFrame(animate);
}