stereo viewing

This is a way to create a stereoscopic view of a scene, i.e. one which gives an illusion of depth on the screen.

The theory is fairly simple, to create a stereo image you need to render the scene twice, once for each eye. Then you need to be able to display both views simultaneously in such a way taht a person looking at the image gets a sense of depth that doesn't really exist.

There are 2 common methods to achieve this, red/green images, where you need a pair of tinted glasses and the resultant image is created as a pair of monochrome images, tinted the same as the glasses. The second method is to render both eyes in full colour, and place them side by side and get the viewer to try to look through the image so that each eye only sees one of the two images, and the superimpose to create the impression of depth.

There are 2 ways to get the desired output, one in OPENGL mode, and one in P3D mode.

The OPENGL mode is simple, but can't be used in an applet. The P3D version is significantly more complex and require using extra PGraphics3 objects which can confuse matters.

 
/**
 
stereo viewing taken from http://processinghacks.com/hacks:stereo_viewing
 
@author John Gilbertson
 
*/
 
 
 
import processing.opengl.*;
 
import javax.media.opengl.*;
 
 
 
GL gl;
 
float rotation;
 
 
 
void setup()
 
{
 
  size(500,300,OPENGL);
 
  gl=((PGraphicsOpenGL)g).gl; //We need this to set some OPENGL options.
 
  perspective(PI/3.0,1,0.1,1000); //this is needed ot stop the images being squashed.
 
  noStroke();
 
  rotation=0;
 
}
 
 
 
void draw()
 
{
 
  rotation+=0.01; //you can vary the speed of rotation by altering this value.
 
 
 
  ambientLight(64,64,64); //some lights to aid the effect.
 
  pointLight(128,128,128,0,20,-50);
 
 
 
  background(0);
 
  fill(255);
 
 
 
  // Left Eye
 
  camera(-10,0,-100,0,0,0,0,-1,0); //using Camera gives us much more control over the eye position.
 
  gl.glViewport(50,50,200,200); // This means anythign we draw will be limited to the left half of the screen.
 
  pushMatrix();
 
  rotateX(rotation);
 
  rotateY(rotation/2.3);
 
  box(30);
 
  translate(0,0,30);
 
  box(10);
 
  popMatrix();
 
 
 
  // Right Eye
 
  camera(10,0,-100,0,0,0,0,-1,0);
 
  gl.glViewport(250,50,200,200);
 
  pushMatrix();
 
  rotateX(rotation);
 
  rotateY(rotation/2.3);
 
  box(30);
 
  translate(0,0,30);
 
  box(10);
 
  popMatrix();
 
}
 
 

 
/**
 
stereo viewing taken from http://processinghacks.com/hacks:stereo_viewing
 
@author John Gilbertson
 
*/
 
//two objects which we render the scene into.
 
PGraphics3 left;
 
PGraphics3 right;
 
 
 
float rotation;
 
 
 
void setup()
 
{
 
  size(500,300,P3D);
 
 
 
  //We need to set up a few things for each eye
 
  left=new PGraphics3(200,200,null);
 
  left.defaults(); // If you ever use a PGraphics3/GL remember this line!
 
  left.ambientLight(64,64,64);
 
  left.pointLight(128,128,128,0,20,100);
 
  left.noStroke();
 
 
 
  right=new PGraphics3(200,200,null);
 
  right.defaults();
 
  right.ambientLight(64,64,64);
 
  right.pointLight(128,128,128,0,20,100);
 
  right.noStroke();
 
  rotation=0;
 
}
 
 
 
 
 
// We need to render the same thing to both eyes, so to save writing it twice, we put it into a function
 
void drawScene(PGraphics3 target, int eyePosition)
 
{
 
  target.loadPixels();
 
  target.background(0);
 
  target.fill(255);
 
  // Left Eye
 
  target.camera(eyePosition,0,-100,0,0,0,0,-1,0); //using Camera gives us much more control over the eye position.
 
  target.rotateX(rotation);
 
  target.rotateY(rotation/2.3);
 
  target.box(30);
 
  target.translate(0,0,30);
 
  target.box(10);
 
  target.updatePixels();
 
}
 
 
 
void draw()
 
{
 
  rotation+=0.01;
 
  background(0);
 
  //This created both eye images inside their respective PGraphics3s 
 
  drawScene(left,-10);
 
  drawScene(right,10);
 
 
 
  //This draws both created views onto the screen.
 
  image(left,50,50);
 
  image(right,250,50);
 
}

OPENGL version

P3D version

http://processing.org