3D Side By Side with Three.js

THREE.js

I started to learn Three.js (in a serious way) two days ago, I’m reading a wonderful book for this:
WebGL: Up and Running by Tony Parisi (O’Reilly). Copyright 2012 Tony Parisi, 978-1-449-32357-8.
and then at the second chapter, I found this lines:

// Put in a camera
camera = new THREE.PerspectiveCamera( 45, container.offsetWidth / container.offsetHeight, 1, 4000 );
camera.position.set( 0, 0, 3 );
….
// Render the scene
renderer.render( scene, camera );

And then I thought, “wait, if I’m rendering the scene from the point of view of the camera, then I can render the scene from the point of view of another camera!! and that’s 3d (well stereoscopic vision)”.

A little on 3D side by side

I bought my 3D tv a few month ago, since then I was looking for some content to use my brand new 3D glasses, sadly the 3d content out there, it might be vast, but is mainly boring long movies or 3D advertisement shorts. And even finding them was so dificult, till i learn the magic words side-by-side (sbs).

Image may be NSFW.
Clik here to view.

3d-side-by-side

Side-by-side is how the stereoscopic vision is achieved, you have a 1920×1080 viewport and is fullfiled with two images of 960×1080 one for each eye.
When you turn on the 3d effect in your tv, it stretch the images to 1920×1080 and interlaced both at the same frecuency it polarize each eye in the 3d glasses.
Awesome technology.

Back to THREE.JS

So I started two figured out how to put two cameras in a THREE.js scene and also how to render both cameras. The first thing I tried was to duplicate everything two container divs, two renderers and two cameras. but it crushed. Then, I looked for help and I found this
http://mrdoob.github.io/three.js/examples/webgl_multiple_views.html

that was it! Every thing I needed. Just a simple changes like

// Put in two cameras
cameraLeft = new THREE.PerspectiveCamera( 45, (container.offsetWidth / 2) / container.offsetHeight, 1, 4000 );
cameraLeft.position.set( 0, 0, 3 );
scene.add(cameraLeft);

cameraRight = new THREE.PerspectiveCamera( 45, (container.offsetWidth / 2) / container.offsetHeight, 1, 4000 );
cameraRight.position.set( 0, 0, 3 );
scene.add(cameraRight);

…

var width = Math.round(container.offsetWidth/2),
height = container.offsetHeight;
// Render the scene
renderer.setViewport( 0, 0, width, height);
renderer.setScissor( 0, 0, width, height);
renderer.enableScissorTest ( true );

cameraLeft.aspect = width * 2 / height;
cameraLeft.updateProjectionMatrix();
cameraLeft.position.set( separation, 0, 3 );

renderer.render( scene, cameraLeft );

renderer.setViewport( width, 0, width, height);
renderer.setScissor( width, 0, width, height);
renderer.enableScissorTest ( true );

cameraRight.aspect = width * 2 / height;
cameraRight.updateProjectionMatrix();
cameraRight.position.set( -separation, 0, 3 );

renderer.render( scene, cameraRight );

is easy to see that I’m just adding two cameras, but on the run loop (where I need to render the scene) I’m defining my width as half of the width of the container ( remember the 1920 to 960 thing), but I keep the aspect for the camera, of course the image will look stretch but the 3d effect on the tv will fix it later, then just used the same renderer to render on different viewports (side-by-side) and bingo stereoscopic vision.

Image may be NSFW.
Clik here to view.

How far are your eyes?

Thats ok but I still cannot see 3d in my tv. Well to achieve a great 3D stereoscopic video effect, you need both of your cameras to render a slightly different view of the scene simulating the separation between your eyes.
But how do I do that?, well I don’t know so I added a simple keyUp Handler to increase and decrease the separation between both cameras, using the up key to increse the separation by a predefined increment and down key to decrese. (right and left keys could be used to increase and decrease the predefined increment)

function addKeyHandler(){
document.addEventListener( ‘keyup’, onKeyUp, false);
}

function onKeyUp (event){
event.preventDefault();
switch(event.keyCode){
case 38: //Up
separation += incrementation;
break;
case 40: //Down
separation -= incrementation;
break;
case 39: //Right
incrementation *= 1.1;
break;
case 37:// left
incrementation *= 0.9;
break;
}
}

That means, every time you hit the up key, both cameras will move in oposite direction a little bit. I played a few minutes till i found a coefficient of -0.04300000000000005 as a great separation between cameras to have a 3d effect, but I also pushed so far as -0.1040 and still have a great powerful effect, don’t play with this coefficient so much because it can cause a headache, because you will be trying to convience your brain that your eyes are now more separated.

And that’s all, now just connect your mac (of course you are using mac) to your tv duplicate the screens and go to:

http://picanteverde.github.io/3dtv/src/tv3d.html

Image may be NSFW.
Clik here to view.