How We Did It: 3D Video for Jay Jay’s Dance-Off Campaign

A quick introduction, as this is my first post to the VJ blog: I’m Stephen Woolcock and I head up the Interactive Development department here at Visual Jazz.

As Sammi stated in his recent post “More on the 3D from the Jay Jays Dance Off campaign“, 3D is so hot right now. Everyone is going nuts about it, so we wanted to get in on the action and Jay Jays provided us with the perfect platform to do so.

If you’ve done any research on the topic in the past, you’ll know there are many different formats for achieving the false depth-trickery people currently refer to as 3D. The format we were most interested in was the old-school Red/Cyan anaglyph method, as it was the most accessible. Other formats, like the one used in recent 3D films like Up! and Avatar, require special equipment to view (like 3D projectors or monitors and polarised glasses).

So how did we do it for Jay Jays? It actually turned out to be very easy. After some research, we sourced a 3D camera rig from a local production house and filmed some test video. This rig outputs two videos, one representing the ‘left eye’ and one representing the ‘right eye’. We then stitched them together to create one video, which looked like this:

We now had a source video for our test. From here, I loaded the the video into Flash the standard way (using a NetStream object):

var netConn:NetConnection = new NetConnection();
netConn.connect(null);

var metaData:Object;
var stream:NetStream = new NetStream(netConn);
stream.client = this;
stream.play("sidebyside.mp4");

var vid:Video = new Video(1280, 720);
vid.attachNetStream(stream);
vid.smoothing = true;

Now that we have our source video loaded, you’ll notice two things: a) we need to scale the two images along the x axis and b) we need to combine the right and left eye images to create our anaglyph.

The way to do this is to draw first the right eye (cyan channel) to a BitmapData object using a transformation matrix, then the left eye (red channel) using the Screen blending mode.

The RGB channels have been split (red to the left eye, blue and green to the right eye), so when the two images are overlayed using Screen, full colour returns to the image at the points of convergence (ie. right eye pixel == left eye pixel). Points of difference end up being either red or cyan and the amount they are offset from the converged pixels represents how ‘far’ or ‘close’ they are to you. Simple, hey?

// Anaglyph channel transformations
const CT_CYAN:ColorTransform = new ColorTransform(0, 1, 1);
const CT_RED:ColorTransform = new ColorTransform(1, 0, 0);

// Create a new BitmapData canvas. This will store the final anaglyph output.
var bmpDataOutput:BitmapData = new BitmapData(vid.width, vid.height, false, 0x000000);
var bmpVideo:Bitmap = new Bitmap(bmpDataOutput, "auto", true);
addChild(bmpVideo);

// This matrix will scale the video by 2 along the x axis.
var bmpMatrix:Matrix = new Matrix();
bmpMatrix.scale(2, 1);

function draw3DVideo () : void
{
    // Draw right eye (blue, green)
    bmpMatrix.tx = 0;
    bmpDataOutput.draw(vid, bmpMatrix, CT_CYAN);

    // Draw left eye (red)
    bmpMatrix.tx = -vid.width; // Translate by the video width (remember, the matrix is scaled along x)
    bmpDataOutput.draw(vid, bmpMatrix, CT_RED, "screen");
}

And that’s all there is to it! The function draw3DVideo will draw the current state of the video to the output BitmapData canvas twice; once for the right eye and once for the left eye. This method is executed whenever the frame within the video changes and results in a red/cyan anaglyph image being drawn to the screen.

View the example application (SWF)
Note: Red/Cyan glasses are required to view the full 3D effect