gl_PointSize in world's space

Questions
,
1

I wanted to use PointsMaterial to render some smoke particles but it doesn’t support per particle rotation, so created a custom shader to do this. Problemn is that I don’t know how to handle the size of the particles in a way that even when resizing the screen they keep in the right size…

this is the error I’m noticing, look the particle size when I resize the browser:

image
image426×545 46.2 KB

Making screen smaller:

image
image103×103 11.5 KB

See how the size of the point relative to the world has make it look giant now…

This is the vertex shader:

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

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

                    vec4 mvPosition = modelViewMatrix * vec4(position, 1.0); 
 
                    gl_PointSize = size * ( vScale / -mvPosition.z );
                    //gl_PointSize = size * vScale * (500.0 / -mvPosition.z); 
 
                }

The PointsMaterial alone works perfect, the only problem is I can’t rotate each individual particle… Will I need to add the camera’s FOV or canvas size into the shader’s uniforms and add them to the formula somehow??

2

Ok I found something that looks like a possible solution (But I think it is overkill to do this…)
Based on this post by West Langley: PointsMaterial's sizeAttenuation property should default to false · Issue #10385 · mrdoob/three.js · GitHub

Following his logic for adding the nominalDistance factor into the equation, I did the same for the screen height, like a ǹominalHeight` so the gl_PointSize is also tied to the screen height:

uniform float wsize;
...
gl_PointSize = ( wsize/ 600.0 ) * size  * (300.0 / -mvPosition.z); 

window.addEventListener("resize", ev=>{
      material.uniforms.wsize.value = window.innerHeight;
})

Where “600.0” is just an arbitrary constant used to set a standard for which the particle’s size should be at that specified value.

This works but the thing I don’t like is that I have to adjust the material’s uniform value on window “resize”… I mean, it’s not like anyone will be playing with the window size constantly once the app is running, so it’s not THAT bad but if anyone knows a better way to do this, let me know!