Hi,
I’ve followed a few tutorials and successfully set a scene in ThreeJS that emulates sort of wavy movement on mouseover.
As I am not really experience with ThreeJS I encountered an issue that I can’t seem to solve.
After some research I realised my shader is not set properly, and it results in an stretched image that doesn’t cover the whole width of the container – resulting in this ugly pixel expand on the edges.
I realised that my camera and scene is built correctly, but something’s not right with the shader.
Essentially, what I need is for this image to cover the whole width of the window, without wrapping the edges.
Can someone help me spotting where the problem is?
const vertex = `precision mediump float;
uniform float u_time;
varying vec3 texcoords;
uniform float u_amplitude;
uniform float u_freq;
uniform vec2 u_mouse;
void main() {
vec2 st = position.xy / 30.;
vec2 mc = u_mouse - 0.4;
vec2 point = vec2(0.5);
float l = length(vec2(st.x - mc.x, st.y + mc.y));
float angle = (u_time*0.5 + l*30.) * u_freq;
float oscillation = sin(angle) * u_amplitude;
gl_Position = projectionMatrix * modelViewMatrix * vec4(position.xy, oscillation, 1.0);
texcoords = vec3(position.xy, oscillation);
}
`;
const fragment = `precision mediump float;
uniform vec2 u_res;
uniform sampler2D u_texture;
varying vec3 texcoords;
uniform float u_amplitude;
void main() {
vec2 a = texcoords.xy / 30. + 0.5;
gl_FragColor = mix(texture2D(u_texture, a), vec4(vec3(0.0),1.),-texcoords.z/u_amplitude/8.);
}
`;
Thanks a lot in advance.