Sử dụng shader để di chuyển texel đến trung tâm của nó

Question

Tôi đang cố gắng di chuyển hình vuông texture Texel đến trung tâm của kết cấu theo thời gian. Đoạn mã sau đang thực hiện công việc trừ khi tôi muốn điểm ảnh bị biến mất khi nó đến trung tâm của hình học (mặt phẳng) và bây giờ nó chỉ trở nên tăng thêm trong khi thời gian tăng lên và kết cấu dường như giống như ký hợp đồng.

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:

Hãy suy nghĩ về điều này như một lỗ đen ở trung tâm kết cấu.

Answer 1

Theo tôi được biết, bạn muốn Texel để được ở vUv khi t=0 và tại center sau một thời gian.

Kết quả là phóng to ở chính giữa của kết cấu.

Thực tế mã của bạn làm điều đó từ t = 0 đến t = 1. Khi t = 1 vị trí texel là center.

Bạn có cùng hành vi sử dụng chức năng mix.

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

Ngoài ra khi t = 1tất cả các Texel đang ở center và hình ảnh là một hình ảnh màu duy nhất. (Màu của trung tâm của kết cấu).

Vấn đề của bạn là t tiếp tục phát triển. Và khi t > 1, texel tiếp tục trên đường dẫn của chúng. Sau khi tất cả họ gặp nhau ở trung tâm, bây giờ họ đi lạc với nhau. Hiệu ứng là kết cấu được đảo ngược và bạn thấy một zoom-out.

Tùy thuộc vào cách bạn muốn nó dừng lại ở đó nhiều giải pháp:

• Bạn muốn đi đến zoom tối đa và giữ hình ảnh này: clampt trong khoảng [0, 1] như t = clamp(t, 0, 1); này.

• Bạn muốn đi tới thu phóng tối đa và hình ảnh biến mất: dừng để vẽ hình khi t > 1 (hoặc t >= 1 nếu bạn không muốn hình ảnh màu đơn).

• Bạn muốn phóng to vô hạn, tức là texel tiến gần hơn và gần hơn với trung tâm nhưng không bao giờ chạm tới.

Đối với hành vi thứ ba này, bạn có thể sử dụng một mới t, nói 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

Answer 2

Gần đây, tôi đã phải đối mặt với cùng một vấn đề. Nhưng tôi tìm thấy giải pháp thay thế ở đâu đó trên Internet, đó là sử dụng đổ bóng đường hầm thay vì di chuyển các ô của kết cấu vào giữa. Nó có hành vi tương tự như bạn muốn.

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

Tôi hy vọng nó sẽ hữu ích.