Hello everyone,
I’m relatively new to shaders, and I’ve been working on recreating a basic distortion shader to apply to my entire scene using ShaderPass.
In my scene, I have images randomly placed that animate towards the viewer. Everything works fine until these images get too close to the screen edge. At that point, instead of smoothly distorting, the image corners abruptly snap to the edge, and the last row of pixels is repeated to fill the space. I believe this is referred to as “clamp to edge”. This happens suddenly - please see here:
Despite trying various approaches, I haven’t been able to eliminate this effect. I’m wondering if I’m overlooking something obvious.
Here’s the current state of my shader:
uniforms: {
tDiffuse: { value: null },
iTime: { value: 3.5 }, // Add a time uniform for dynamic effects
iResolution: { value: new THREE.Vector2(window.innerWidth, window.innerHeight) }, // Resolution of the viewport
},
vertexShader: `
varying vec2 vUv;
void main() {
vUv = uv;
gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
}
`,
fragmentShader: `
uniform sampler2D tDiffuse;
uniform vec2 iResolution;
varying vec2 vUv;
vec2 computeUV(vec2 uv, float k, float kcube) {
vec2 t = uv - 0.5;
float r2 = t.x * t.x + t.y * t.y;
// Limit the distortion near the edges by reducing the effect using a smoothstep function
float edgeFactor = smoothstep(0.2, 0.8, r2);
float f = 1.0 + edgeFactor * r2 * (k + kcube * sqrt(r2));
vec2 nUv = f * t + 0.5;
return nUv;
}
void main() {
// Using static values for k, kcube, and offset to remove animation
float k = 1.0;
float kcube = 0.5;
float offset = 0.1;
vec2 uv = gl_FragCoord.xy / iResolution.xy;
uv = computeUV(uv, k + offset, kcube); // Apply static distortion
vec3 color = texture2D(tDiffuse, uv).rgb;
gl_FragColor = vec4(color, 1.0);
}
`
Any suggestions on what adjustments I should make to achieve the desired outcome?
Thanks in advance!