This is a WebGL question, but I figure somebody here may be able to help.
Basically, I'm rendering camera-facing quads in 3D. The WebGL path is working fine. Now, though, I need to have a 2D canvas fallback -- think of it like Graphics.drawImage in Java2D.
I'm projecting the sprite's 3D world position into 2D space. The problem is that I need to scale my images with respect to how far away in Z depth they are. Since I am not submitting individual vertices of the image, but instead just the center 3D point, how should I determine the "projected scale"?
My current solution is to project the upper-left vertex and lower-right vertex of the billboard into 2D space, and then determine the final 2D image size based on that.
However, this seems excessive to do for each sprite. Is there a simpler way that I'm missing? I'm looking for something like this:
var fl = frameSize / (2 * Math.tan(camera.fieldOfView / 2));
var scale = 1/ ( z / fl );
But what is "frameSize" and how would I keep the scaling consistent with the WebGL renderer?