3D Viewer

This came about after playing around with shadows here and here . I knew I could manually create two subtly different versions of a webpage or app to create a 3D effect but wondered if I could automate this using JS. A few dozen googles later and I came up with this..

How to use it

• Choose sample html from the drop down at the top
  • Boxes - First test, simple 3x3 grid of different coloured boxes. Incidentally, the only example in which I needed to edit the source html (other than adding the height/depth tags) as the box colours are randomly generated so were different in each eye-frame..
  • More Boxes - Self explanatory. Although more
  • Calculator - My old friend the dozenal calulator. Works ok but not very interesting to look at.
  • Bootstrap - Quick bootstrap log-in page example from my Router Spy project.
• Turn lights off - This makes it easier for your eyes to bring the two images into focus.. Less noise.
• Go full screen (F11) for me
• Get comfortable in a stable position a fixed distance from the screen
• Hit the 'Go' button
• Cross your eyes slowly until you see 3 blurry images
• Wait/relax until the middle one comes into focus
• Enjoy the moment or you can increase/decrease the effect by pressing +/-

Technical details

The '3D Viewer' displays two views of a single html file. It's just two iframes pointing to the same source. It then adjusts the positions of the elements in each view based on height and depth tags that I added to the source html. The result is a stereoscope. Currently it has to be viewed using the 'cross-eye technique' where your left eye focuses on the right image and vice-versa. However the aim is to get it to output to 3D tv's and headsets like the rift.

The code is relatively simple. Essentially, for each height tagged element in the left 'eye frame' move it to the right the number of pixels specified. The reverse happens for the right eye and also for depth tagged elements (so that they appear sunk into the page). I also added a multiplier that can be adjusted by the user to increase and decrease the 3D effect.

This version works with 10 depth and 10 height levels (.h1, .h5, .d3 etc.). Although it would be easy to add more.

To do

• Add interactivity - This involves somehow duplicating the mouse in both frames (and applying position adjustment).
• 3D TV/Oculus Rift integration - Need to get at those API's although until solving the above problem, it's kind or irrelevant!
• Mobile Version - Need to add responsiveness for mobile devices as currently desktop only.