Three.js: Increase Point Size As Camera Gets Closer To Point

I am working on a scene (easier to see on bl.ocks.org than below) in Three.js that would benefit greatly from using points as the rendering primitive, as there are ~200,000 quads t

Solution 1:

This is due to the distortion caused by rectilinear projection, which takes the depth value of each point (the "proximity distance" you were referring to) to be its Z (or Y) coordinate in camera space; you are instead taking this to be the Euclidean distance from the camera's position.

The diagram illustrates that, as you move the camera's axis away from the point, the distance delta increases (the point shrinks) while the depth value (the "apparent proximity") stays constant. To fix this, just replace delta with the depth value project[2] (or [1] - I forgot which one OpenGL uses).

Note that if your modelViewMatrix is set up correctly according to convention, you shouldn't subtract by cameraPosition.