Handling Particle Sizes in Custom Shaders During Window Resizing

The issue you're experiencing with particle sizes scaling incorrectly when resizing the browser window is a common challenge when using custom shaders for point sprites. The standard PointsMaterial handles this automatically, but with custom shaders, you need to account for viewport changes manually.

The Problem

When the viewport size changes, the relationship between screen pixels and world units changes, but your custom shader isn't adjusting for this. This is why particles appear too large when you shrink the window.

Solution

You need to incorporate the viewport size into your particle size calculation. Here's how to modify your vertex shader:

GLSLCopied
attribute float rotation; 
attribute float scale; 
attribute float alpha; 
varying float vAlpha; 
varying float vRotation; 
varying float vScale; 

uniform float viewportHeight;  // Add this uniform

void main() {
    vAlpha = alpha; 
    vRotation = rotation; 
    vScale = scale; 

    vec4 mvPosition = modelViewMatrix * vec4(position, 1.0); 
    
    // Adjust point size based on viewport height
    float projectedSize = size * (vScale / -mvPosition.z);
    
    // Scale by viewport height (similar to how Three.js handles it internally)
    gl_PointSize = projectedSize * (viewportHeight / 2.0);
    
    gl_Position = projectionMatrix * mvPosition;
}

Implementation Steps

1. Add a uniform to your shader material:

JAVASCRIPTCopied
const shaderMaterial = new THREE.ShaderMaterial({
    uniforms: {
        // Your existing uniforms
        viewportHeight: { value: window.innerHeight }
    },
    // Rest of your material definition
});

2. Update this uniform when the window is resized:

JAVASCRIPTCopied
function onWindowResize() {
    // Update camera and renderer
    camera.aspect = window.innerWidth / window.innerHeight;
    camera.updateProjectionMatrix();
    renderer.setSize(window.innerWidth, window.innerHeight);
    
    // Update the uniform
    shaderMaterial.uniforms.viewportHeight.value = window.innerHeight;
}

window.addEventListener('resize', onWindowResize);

This approach will help maintain consistent particle sizes relative to world space when the viewport changes. The key is to account for both the perspective projection (which you're already doing with the division by -mvPosition.z) and the viewport size.

You might need to adjust the scaling factor (viewportHeight / 2.0) based on your specific camera setup and desired appearance.