Unproject Webgl
<p>So I am trying to create a 2d drawing program in WebGL and I can draw everything fine but I am having a lot of difficulty detecting the location of mouse clicks.</p>

<p>I have a 4x4 projection matrix set up as follows:</p>

<pre><code>mat4.perspective(45, this.gl.viewportWidth / this.gl.viewportHeight, 0.1, 100.0, projectionMatrix);
</code></pre>

<p>I then have a 4x4 view matrix which holds the camera position as follows: </p>

<pre><code>mat4.translate(viewMatrix, [camera.getX(), camera.getY(), camera.getZoom()]);
</code></pre>

<p>I can get a 2d vector of the position of the mouse click on the screen ranging from <code>[-1,-1]</code> in the top left to <code>[1,1]</code> in the bottom right.</p>

<p>What I want to be able to do is take the current position of the camera, get the frustum bounds on the z-plane and then use my relative mouse click positions to get the actual world space position on the z-plane.</p>

<p>Note: </p>

<ul>
<li>The camera does not rotate, only pan and zoom.</li>
<li>Everything is drawn on the model matrix which is on the z=0 plane.</li>
</ul>

<p><img src="https://i.stack.imgur.com/PIEbz.png" alt="see image here"></p>