用 GLSL 绘制简单脉冲波（带三角波的半正弦波）

前端

2023-11-14 02:53:43

用 GLSL 绘制脉冲波：探索波形生成

简介

在计算机图形学中，波形无处不在，从模拟自然现象到创建逼真的动画。在本文中，我们将深入探讨如何使用 GLSL 绘制一种特定的波形：脉冲波。脉冲波是一种简单的波形，但它具有独特的特性，使其在各种应用中都很有用。

什么是脉冲波？

脉冲波是半正弦波和三角波的组合。半正弦波类似于正弦波，但仅代表其一半。三角波类似于带有尖锐上升和下降边的方波。当半正弦波与三角波相乘时，就会形成脉冲波，具有独特而有趣的形状。

算法原理

要使用 GLSL 绘制脉冲波，我们需要了解其组成部分的算法。

半正弦波：

y = sin(x)

y 是波形的振幅
x 是波形的相位角

三角波：

y = abs(2 * floor(x / 2) - 1)

y 是波形的振幅
x 是波形的相位角
abs() 是绝对值函数
floor() 是向下取整函数

脉冲波：

y = sin(x) * abs(2 * floor(x / 2) - 1)

GLSL 实现

现在我们知道了算法，让我们将它们转换为 GLSL 着色器代码。

片段着色器：

void main() {
  // 计算相位角
  float phase = gl_FragCoord.x;

  // 计算半正弦波
  float semiSin = sin(phase);

  // 计算三角波
  float triangle = abs(2.0 * floor(phase / 2.0) - 1.0);

  // 计算脉冲波
  float pulse = semiSin * triangle;

  // 输出脉冲波
  gl_FragColor = vec4(pulse, pulse, pulse, 1.0);
}

示例代码

为了演示如何使用着色器代码绘制脉冲波，让我们创建一个简单的 JavaScript 代码示例：

// 创建画布
const canvas = document.createElement("canvas");
const gl = canvas.getContext("webgl");

// 编译着色器
const vertexShaderSource = `
  attribute vec2 a_position;

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

const fragmentShaderSource = `
  precision mediump float;

  uniform float u_phase;

  void main() {
    float semiSin = sin(u_phase);
    float triangle = abs(2.0 * floor(u_phase / 2.0) - 1.0);
    float pulse = semiSin * triangle;

    gl_FragColor = vec4(pulse, pulse, pulse, 1.0);
  }
`;

// 创建着色器程序
const program = gl.createProgram();
gl.attachShader(program, vertexShader);
gl.attachShader(program, fragmentShader);
gl.linkProgram(program);

// 设置视口和清除颜色
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.useProgram(program);

// 设置相位角并绘制
const numVertices = 1000;
for (let i = 0; i < numVertices; i++) {
  // 计算相位角
  const phase = i / numVertices;

  // 设置 uniform
  gl.uniform1f(phaseLocation, phase);

  // 绘制线段
  gl.drawArrays(gl.LINE_STRIP, 0, 2);
}