GLSL中基于正弦函数实现网格方块X轴平移的问题排查

问题描述 #

我有一个用floor函数生成网格方块的GLSL片段着色器，方块左下角为黑色、右上角为蓝色，中间颜色由floor函数组合生成。想要实现方块沿X轴随时间平移，且后续方块保持从黑到蓝的颜色过渡，但当前实现存在两个问题：

1. 方块被拉长变形
2. 运动到一定位置后回弹，无法持续右移

原问题代码：

precision mediump float;
varying vec2 pos;
uniform float millis;
void main() {
  float squareNumber = 10.;
  float millisNorm = millis / 10000.;
  float tmp = (floor(abs(sin(millisNorm + pos.x)) * squareNumber) + floor(pos.y * squareNumber)) / (2. * squareNumber);
  vec2 newPos = vec2(tmp);
  gl_FragColor = vec4(0., 0., tmp, 0.);
}

我尝试过修改为：

float tmp = (floor(abs(pos.x + abs(sin(millisNorm))) * squareNumber) + floor(pos.y * squareNumber)) / (2. * squareNumber);

这种写法几乎能实现需求，但方块会回弹而非持续向右移动。不清楚如何正确处理时间平移逻辑，恳请帮助。

问题分析 #

核心问题出在用正弦函数处理X轴偏移：

• 正弦函数是周期性的（值域[-1,1]），加上abs后变成[0,1]的周期变化，必然导致网格来回回弹，无法持续平移
• 原代码中abs(sin(millisNorm + pos.x))会扭曲X轴的网格分布，导致方块变形拉伸

要实现持续右移，必须用线性的时间偏移，而非周期性的正弦函数。

修正方案 #

直接对X轴坐标做线性偏移，去掉正弦函数，这样网格会随时间持续向右移动，同时保持方块的形状和颜色过渡：

precision mediump float;
varying vec2 pos;
uniform float millis;
void main() {
  float squareNumber = 10.;
  // 调整分母控制平移速度，1000代表每秒移动1个单位，可按需修改
  float timeOffset = millis / 1000.;
  // 对X轴做线性偏移，实现持续右移
  float xGrid = floor((pos.x - timeOffset) * squareNumber);
  float yGrid = floor(pos.y * squareNumber);
  // 保持原有的颜色计算逻辑，确保左下黑、右上蓝的过渡
  float tmp = (xGrid + yGrid) / (2. * squareNumber);
  gl_FragColor = vec4(0., 0., tmp, 1.);
}

关键改动说明 #

• 移除正弦函数，改用pos.x - timeOffset实现线性平移：随着millis增加，timeOffset持续增大，X轴网格会不断向右移动，不会回弹
• 保持floor(...) * squareNumber的网格计算逻辑，确保每个方块的大小一致，不会变形
• 调整millis / 1000.的分母可以控制平移速度：分母越小速度越快，比如改成500就是每秒移动2个单位
• 修正了gl_FragColor的alpha通道为1.（原代码是0.，会导致方块透明）

内容的提问来源于stack exchange，提问作者Jorge Kageyama