I'm looking to convert screen coordinates (from event.clientX, event.clientY) on jQuery mousemove, to world coordinates in my isometric WebGL project. I'm, also using gl-matrix.
I initialise my viewport with;
gl.viewport(0, 0, width, height)
where width and height are
$(window).width()
and
$(window).height()
respectively
The bounds are calculated as such;
left = -width / 2;
right = width / 2;
bottom = -height / 2;
top = height / 2;
The orthographic projection matrix is set up as such;
mat4.ortho(mat4.create(), left, right, bottom, top, -1000000, 1000000);
I then make the projection isometric by rotating the projection matrix to a pitch of
Math.asin(1 / Math.sqrt(3))
and a yaw of
Math.PI / 4
.
With some cubes placed randomly on a grid, it looks like this:
View screenshot[
^]
So given any (x, y) from (0, 0) to (width, height), how can I calculate the world coordinate, given that an object in the very centre of the scene is (0, 0, 0) in world coordinates?
What I have tried:
Using other people's projects' unproject methods