CODEWITHSUNDEEP
openglglslwebglshader
socrateisabot
socrateisabot

Reputation: 847

Using shader to move texel to its center

I'm trying to move squared texture texel to the center of the texture following time. The following code is doing it's job unless I want the pixel drawn vanish when it reaches the center of the geometry (a plane) and for now it's only becoming more a more small while time increase and the texture seems to be like contracted.

enter image description here

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) );
}

Edit :

Think of this as a black hole in the texture center. enter image description here

Upvotes: 11

Views: 1093

Answers (2)

Nolesh
Nolesh

Reputation: 7018

Recently, I've faced the same issue. But I found alternative solution somewhere on Internet which is use tunnel shader instead of moving texture's texels to center. It has similar behaviour as you want.

float time = -u_time * 0.15;
vec2 p = 2.0 * gl_FragCoord.xy / u_res.xy -1.0;
vec2 uv;

float a = atan(p.y,p.x);
float r = sqrt(dot(p,p));
uv.x = time+.1/r;
uv.y = a/3.1416;

vec4 bg = texture2D(u_texture, uv);

I hope it will be helpfull.

Upvotes: 1

Orace
Orace

Reputation: 8359

As I understand it, you want the texel to be at vUv when t=0 and at center after a while.

The result is a zoom-in on the center of the texture.

Actually your code do it from t = 0 to t = 1. When t = 1 the texel position is center.

You have the same behavior using the mix function.

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

Also when t = 1 all the texel are at center and the image is a single color image. (The color of the center of the texture).

Your problem is that t keep growing. And when t > 1 the texel continues on their path. After they all meet at the center, now they stray from each other. The effect is that the texture is reversed and you see a zoom-out.

Depending on how you want it to end there are multiple solutions:

  • You want to go to the maximal zoom and keep this image: clamp t in the range [0, 1] like this t = clamp(t, 0, 1);.

  • You want to go to the maximal zoom and the image vanish: stop to draw it when t > 1 (or t >= 1 if you do not want the single color image).

  • You want an infinite zoom-in, ie texel going closer and closer to the center but never reach it.

For this third behavior, you can use a new t, say t2:

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

Upvotes: 1

Related Questions