Hello,
I am trying to adapt/cover the image in this scene to the actual browser dimensions (basically simulate the object-fit: cover from CSS).
The result of my setup seems to sort of crop the image and create these lines on the edges.
I am afraid the issue comes from my shader, but I am not able to figure it out.
Does someone know how this could be achieved?
Thanks a lot in advance
Here is my shader code for reference:
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.1;
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.),1.),-texcoords.z/u_amplitude/8.);
}
`;```