StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>I've written something in this jsfiddle that should help you.</p> <p><a href="http://jsfiddle.net/zttnZ/2/" rel="noreferrer">http://jsfiddle.net/zttnZ/2/</a></p> <p>Just click on the WebGL window to zoom in to where the mouse is pointing.</p> <p>The basic idea is that a point in the WebGL window is obtained by projecting it from 3-space using the projection matrix <code>pMatrix</code> and the view matrix (the view matrix depends on where the camera is and the direction in which it is looking). The composition of these matrices is named <code>pvMatrix</code> in the code.</p> <p>If you want the opposite transform from the window back to three space, you have to take a clip space coordinate (x,y,z) and 'unproject' it back into 3D using the inverse of <code>pvMatrix</code>. In clip space, coordinates are in the range [-1,1], and the <code>z</code> coordinate is depth.</p> <p>In the OpenGL world, these transforms are implemented in <code>gluProject()</code> and <code>gluUnproject()</code> (which you can Google for more information and source code).</p> <p>In the jsfiddle example, we calculate the (x,y) coordinates in clip space, and then unproject (x,y,z) for two different values of z. From that we get two points in 3D space that map onto (x,y), and we can infer a direction vector. We can then move the camera in that direction to get a zoom effect.</p> <p>In the code, the camera position is at the negation of the <code>eye</code> vector.</p> <p>This example shows you how to move the camera in the direction that you are clicking. If you want to actually move towards specific objects in the scene, you have to implement something like object selection, which is a different kettle of fish. The example I've given is unaware of the objects in the scene.</p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload