java - 在GLSL Shader中，如何移动图像 'smoothly'而不使用 'scrubbing'

Question

特别是，我正在使用一个处理 Java 示例，该示例利用 GLSL 着色器(称为 InfiniteTiles)。原始草图实际上只是移动平铺图像。

我有一个名为 time 的统一变量，我在 java 中调用它。

tileShader.set("time", millis() / 1000.0);

现在在片段着色器中有一个代码部分

vec2 pos = gl_FragCoord.xy - vec2(TILES_COUNT_X * time);
vec2 p = (resolution - TILES_COUNT_X * pos) / resolution.x;
vec3 col = texture2D (tileImage, p).xyz;

我试图在java代码中做的是设置时间变量，这样我就可以增加和减少图像滚动的速度。

这是我写的

float t =millis() / 1000.0;
float pctX = map (mouseX, 0, width, 0, 1);
tileShader.set("time", t*pctX);

发生的情况是，当我移动鼠标时，整个图像会根据我移动的位置向左或向右快速移动，就像“擦洗”图像一样。当我停止移动鼠标时，它将以所需的速度移动。

我想避免这种“擦洗”效果，并让图像滚动速度随着鼠标移动而平滑过渡。

通常情况下，我只需在 java 中绘制图像并滚动它就可以完成这样的事情，但我认为我不了解 glsl 在显卡上实现相同效果的工作方式的基本原理。

任何帮助表示赞赏。

示例中的完整处理代码:

//-------------------------------------------------------------
// Display endless moving background using a tile texture.
// Contributed by martiSteiger
//-------------------------------------------------------------

PImage tileTexture;
PShader tileShader;

void setup() {
  size(640, 480, P2D);
  textureWrap(REPEAT);
  tileTexture = loadImage("penrose.jpg");
  loadTileShader();
}

void loadTileShader() {  
  tileShader = loadShader("scroller.glsl");
  tileShader.set("resolution", float(width), float(height));  
  tileShader.set("tileImage", tileTexture);
}

void draw() {
  tileShader.set("time", millis() / 1000.0);
  shader(tileShader);                    
  rect(0, 0, width, height);
}

完整着色器代码

//---------------------------------------------------------
// Display endless moving background using a tile texture.
// Contributed by martiSteiger
//---------------------------------------------------------

uniform float time;
uniform vec2 resolution;
uniform sampler2D tileImage;

#define TILES_COUNT_X 4.0

void main() {
  vec2 pos = gl_FragCoord.xy - vec2(4.0 * time);
  vec2 p = (resolution - TILES_COUNT_X * pos) / resolution.x;
  vec3 col = texture2D (tileImage, p).xyz;
  gl_FragColor = vec4 (col, 1.0);
}

Answer 1

叹息......这比我想象的要简单一些。 JeremyDouglass 在此提供答案

https://forum.processing.org/two/discussion/comment/90488

解决方案:

“这个问题并不是着色器特有的 - 如果您使用 img() 执行此操作，您也会遇到同样的问题。您不能以这种方式进行时钟数学。将任何值乘以 millis() 将始终创建缩放效果 - 在这种情况下总会产生您所说的“清理”。例如，如果您更改乘数，10 秒突然变成 15。

相反，为了改变时钟 future 变化的速度，但不改变它到目前为止已经前进的距离，请将您自己的时钟变量与 millis() 分开，并更改步长量(使用加法，而不是乘法)每个并条机。现在时钟前进的速度将会改变，但基本偏移(最后一个时钟时间)不会跳动，因为原始值没有被缩放(相乘)。”