Fixing UV Stretching in ThreeJS Texture Mapping

Looking at your shader code, I can see you're trying to fit a texture to the viewport while using geometry as a mask. The UV stretching issue you're experiencing is related to how you're handling the aspect ratio in your fragment shader.

Analysis of Current Approach

Your current fragment shader uses gl_FragCoord.xy / resolution.xy to normalize the coordinates, and then applies an aspect ratio correction. However, this approach can lead to stretching because:

1. You're using screen coordinates (gl_FragCoord) rather than the geometry's UVs
2. The aspect ratio correction might not be accounting for the texture's own aspect ratio

Improved Solution

Here's an improved fragment shader that should help fix the UV stretching:

GLSLCopied
uniform float time;
uniform sampler2D uTexture;
uniform vec2 resolution;
uniform vec2 textureSize; // Add this uniform for the texture dimensions

varying vec2 vUv;
varying vec3 vPosition;

void main() {
    // Calculate aspect ratios
    float screenAspect = resolution.x / resolution.y;
    float textureAspect = textureSize.x / textureSize.y;
    
    // Start with the original UV coordinates
    vec2 adjustedUV = vUv;
    
    // Adjust UVs based on aspect ratio differences
    if (screenAspect > textureAspect) {
        // Screen is wider than texture
        float scale = textureAspect / screenAspect;
        adjustedUV.x = 0.5 + (vUv.x - 0.5) * scale;
    } else {
        // Screen is taller than texture
        float scale = screenAspect / textureAspect;
        adjustedUV.y = 0.5 + (vUv.y - 0.5) * scale;
    }
    
    vec4 color = texture2D(uTexture, adjustedUV);
    gl_FragColor = color;
}

To implement this, you'll need to pass the texture dimensions to your shader:

JAVASCRIPTCopied
// When setting up your shader material
const material = new THREE.ShaderMaterial({
    uniforms: {
        time: { value: 0 },
        uTexture: { value: yourTexture },
        resolution: { value: new THREE.Vector2(window.innerWidth, window.innerHeight) },
        textureSize: { value: new THREE.Vector2(yourTexture.image.width, yourTexture.image.height) }
    },
    vertexShader: shader_vs,
    fragmentShader: shader_fs
});

// Update on window resize
window.addEventListener('resize', () => {
    material.uniforms.resolution.value.set(window.innerWidth, window.innerHeight);
});

Alternative Approach

If you specifically want to use screen coordinates rather than UVs, you could modify your current approach:

GLSLCopied
void main() {
    vec2 normalizedUV = gl_FragCoord.xy / resolution.xy;
    
    // Get texture aspect ratio (assuming you pass textureSize uniform)
    float textureAspect = textureSize.x / textureSize.y;
    float screenAspect = resolution.x / resolution.y;
    
    // Center the texture
    normalizedUV -= 0.5;
    
    // Scale based on aspect ratio differences
    if (screenAspect > textureAspect) {
        // Screen is wider than texture
        normalizedUV.x *= (screenAspect / textureAspect);
    } else {
        // Screen is taller than texture
        normalizedUV.y *= (textureAspect / screenAspect);
    }
    
    // Recenter
    normalizedUV += 0.5;
    
    vec4 color = texture2D(uTexture, normalizedUV);
    gl_FragColor = color;
}

This approach should help maintain the texture's aspect ratio while fitting it to the viewport, preventing unwanted stretching.