使用着色器将纹理像素移动到其中心

Question

我试图随着时间的推移将平方纹理纹理像素移动到纹理的中心.下面的代码正在做它的工作,除非我希望像素在到达几何体的中心(一个平面)时消失,而现在它只是变得越来越小,而时间增加,纹理看起来像收缩.

uniform float time;
varying vec2 vUv;

void main() {

    vec2 center = vec2(0.5, 0.5);
    vec2 newPosition = vec2(vUv.x + t * (center.x - vUv.x), vUv.y + t * (center.y - vUv.y);

    gl_FragColor = texture2D( texture, vec2(newPosition.x, newPosition.y) );
}

编辑:

把它想象成纹理中心的黑洞.

Answer 1

据我了解，您希望纹素处于“vUv何时t=0”和center“一段时间后”。

\n\n

结果是纹理中心的放大。

\n\n

t = 0实际上你的代码是从到执行的t = 1。当t = 1纹素位置为时center。

\n\n

使用mix函数可以得到相同的行为。

\n\n

vec2 newPosition = mix(vUv, center, t);\n

\n\n

此外，当所有纹素都处于且图像是单色图像时。（纹理中心的颜色）。t = 1 center

\n\n

你的问题是t不断增长。当t > 1纹素继续其路径时。当他们都在中心相遇之后，现在他们却彼此疏远了。效果是纹理反转并且您看到缩小。

\n\n

根据您希望它如何结束，有多种解决方案：

\n\n

\n

• 您想要转到最大缩放并保持此图像：将t夹 在这样的范围内。[0, 1]t = clamp(t, 0, 1);

\n

• 您想要达到最大缩放并且图像消失：停止绘制它t > 1（或者t >= 1如果您不想要单色图像）。

\n

• 您想要无限放大，即纹素越来越接近中心，但永远不会到达它。

\n

\n\n

对于第三种行为，您可以使用新的t，例如t2：

\n\n

\n
• t2 = 1 - 1/(t*k+1); // Where k > 0
\n
• t2 = 1 - pow(k, -t); // Where k > 1
\n
• t2 = f(t); // Where f(0) = 0, f is increasing, continuous and limit in +\xe2\x88\x9e is 1
\n

\n