Search code examples
javascriptthree.jsglslshader

Increase point length when zoom in

I wrote a custom shader for three.js so the points are rounded. The shader is the following:

new ShaderMaterial({
    transparent: true,
    depthWrite: false,
    uniforms: {
        size: { value: pointSize * canvasSize * 0.5 },
        color: { value: [...color, opacity ?? 1] },
    },
    vertexShader: `
        uniform float size;

        void main() {
            gl_PointSize = size;
            gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
        }
    `,
    fragmentShader: `
        uniform vec4 color;

            void main() {
            if (length(gl_PointCoord - vec2(0.5)) > 0.5) discard;

            gl_FragColor = color;
        }
    `
})

But I also need to increase the point size when the camera zoom in. How do I do that?

The current undesired behavior of zoom: enter image description here

Solution

  • Oh, I have discovered the answer!

    Acoording to this the FOV is projectionMatrix[0][0], so changing the point size to the following solves my problem:

    gl_PointSize = size * projectionMatrix[0][0];