Hi there,
I’m working on a small test project and I’m trying to fit a texture to the viewport. My goal is to use the geometry as a masking object to reveal parts of the image. It sort of works, but I’m have this small issue with the UVs stretching. Here are my current shaders:
Vertex Shader:
const shader_vs = `
uniform float time;
float PI = 3.141592653589793238;
varying vec2 vUv;
varying vec3 vPosition;
void main() {
vec3 pos = position;
vUv = uv;
vPosition = pos;
gl_Position = projectionMatrix * modelViewMatrix * vec4(pos, 1.0);
}
`;
Fragment Shader:
const shader_fs = `
uniform float time;
uniform sampler2D uTexture;
uniform vec2 resolution;
varying vec2 vUv;
varying vec3 vPosition;
void main() {
vec2 normalizedUV = gl_FragCoord.xy / resolution.xy;
float aspect = resolution.x / resolution.y;
vec2 scale;
if(aspect < 1.0) {
scale = vec2(1.0, 1.0 / aspect);
} else {
scale = vec2(aspect, 1.0);
}
normalizedUV = (normalizedUV - vec2(0.5)) * scale + vec2(0.5);
vec4 color = texture2D(uTexture, normalizedUV);
gl_FragColor = color;
}
`;
I’d appreciate any insights or suggestions on how to fix the UV stretching issue and by the way here’s the sandbox project . Thank you!