Threejs: PointCloudMaterial size compared to ShaderMaterial gl_PointSize with size attenuation

Question

I am curious to know what the relationship is between gl_PointSize and the size property within PointCloudMaterial.

When I create a PointCloud with PointCloudMaterial and set the size property to 1, the size of the particles are far larger than when creating a PointCloud with a ShaderMaterial and setting the size parameter for the vertex shader to 1. I also account for size attenuation like in the PointCloudMaterial shader:

<script type="x-shader/x-vertex" id="particle_vs">
    uniform float size;
    uniform float scale;
    void main() {
        vec4 mvPosition = modelViewMatrix * vec4( position, 1.0 );
        gl_PointSize = size * ( scale / length( mvPosition.xyz ) );
        gl_Position = projectionMatrix * mvPosition;
    }
</script>

I have extracted a simple example of my problem here: http://dev.cartelle.nl/particle-example/

• The red particles are assigned a PointCloudMaterial set to size 1.
• The green particles are assigned a ShaderMaterial that has a Vertex Shader that accounts for size attenuation like in PointCloudMaterial. I've set the size to 300 in this case, and as you can see the green particles are still smaller.

My expected result is to have a ShaderMaterial to take the same unit measure as the size property on PointCloudMaterial. I have to have both these materials working together, so I'm trying to figure out the relationship between these sizes. Must be something I'm missing with the vertex shader?

Thanks! Johnny

Answer 1

In your ShaderMaterial, you need to set

scale: { type: 'f', value: window.innerHeight / 2 },

This is because of the following line in the WebGLRenderer method refreshUniformsParticle():

uniforms.scale.value = _canvas.height / 2.0; // TODO: Cache this.

three.js r.71