Mouse world coordinates?


How do you get the world coordinates from the canvas coordinates( clientX, clientY ), without the use of third-party libraries?

I’ve looked everywhere on how to do this but I cannot find a straight-forward explanation. I am very new to webgl and programming so please bare with me.


If i remember correctly, you take the inverse of the projectionview matrix and multiply it by the screen coordinates scaled to the range [-1.0, 1.0] and the z should be the ‘near’ value you specified to the glFrustum/gluPerspective (yes, they’re not available in GLES but, you get the idea).

So, some pseudo code would be:

vec4 worldCoordinates = inverseProjectionView * vec4(2.0 * clientX / clientWidth - 1.0, 2.0 * clientY / clientHeight - 1.0, near, 1.0)

There’s an article in the GPU Gems 3 about this issue when extracting world coordinates from a rendered image using the depth of the depth buffer as the z-value:

Oh and yes, there’s no way extracting the inverse of the projectionview matrix, you will have to figure out the inverse of the matrix by reading the glFrustum/gluPerspective functions…

Hope that helps!