Mon, Apr 09, 2012

HoloToy perspective in WebGL

Mouse movement controls the head position used to calculate the perspective and modelview matrices.

Ever since I released HoloToy I have received many questions about how exactly it produces the perspective distortion that (combined with the device orientation/head-tracking) gives the illusion of glasses-free 3D. I've answered all these questions individually as and when but with my recent dives into WebGL I figured this was a good time to put an example up that people can use.

The effect is very simple to achieve. First an off-axis projection matrix is created, offset by the head position. Then a modelview matrix is created, looking directly into the 'room', offset by the inverted head position. These two matrices cause the 'fourth wall' to remain stationary while everything beyond moves according to depth.
The code for this example is linked directly below. The matrix generation is handled in main.js and uses Javascript equivalents of OpenGL/GLUT matrix functions so should be very easy to port to your required platform.