Tuesday, October 20, 2015

Fishtank VR viewing in Three.js

I am working on a "Fishtank VR" prototype and asked around and a lot of people told me Three.js is the easiest API for 3D prototyping.   So last night I dug into learn it (and found and watched some of this cool udacity course from Eric Haines on graphics using Three.js as a vehicle for much of it).   I just started using it and dealing with the camera API is where I need to invest some classic graphics API wrangling.   Whenever you want to do something "weird" with a camera, that is where some pain will lie.

Here is the camera API for Three.js.

What I want for fishtank VR is ideally an API that allows me to specify viewpoint in some physical units (like meters), and the location of the physical rectangle of the screen is real physical units (like the position of one corner and the vectors of bottom and side).   Most camera APIs do not have this directly, so the question is can you get at them indirectly, or do you have to make your own from scratch.

The most general camera in Three.js is the perspective camera.   This method is what I will need to use if this is to work:

This appears to be when you have a wall of tiled screens.  But happily the API designer made it a little more general.      All I need to do is manage the relative position of the eye and the "portal",   So I think this can be made to work.

No comments: