rewired pictures

Stereoscopy In Photoshop

2010-05-21T16:33:00.000-07:00

I posted earlier about my stereoscopic technique for Robots! in 3D which utilized Photoshop, a tcl script and Apple Shake to programatically make a stereoscopic composition. Last night I tried to take shake and tcl out of the picture and do the 3D for the latest page for Robots! in 3D completely in Photoshop. The video above is a time lapse of me doing it (make sure you watch it in 3D to get the most of it) and jump the link for the details.

When we were doing the first concept page for Robots! in 3D, I tried to do the page in Photoshop but it got pretty convoluted pretty quick. Now with close to an issue under my belt I think I figured out a pretty efficient way to do some 3Din'.

In our previous pipeline, we would do the art in Photoshop, create Layer Comps for every element on the page and then export these Layer Comps to tiffs for Shake. I started last night's page with the tiffs that I would normally use with my tcl script.

I used Adobe Bridge to import those files as layers into PS ( Tools > Photoshop > Load Images into Photoshop Layers... ). I know this is a bit silly, considering I had the original psd as well, but I already had the files and having everything flattened is really important. Next time i'll go through the original document and merge layers and start from there.

After I had all my elements in Photoshop, I grouped them by cell. Once grouped by cell, I grouped all the cell groups to create a group for an eye. I then duplicated the eye group to create a Left Eye and Right Eye group. Multiplied the left eye times red; right eye by cyan; added them up and I had a 3D comp.

Nothing is offset so everything appeared on the same plane as the screen. To start placing things in depth it's about offsetting and skewing the right eye layers until they create the desired 3D effect. What was really amazing about this technique is I could work real-time in 3D. I could drag a layer to the proper depth. In Shake it was all about tweaking a node attribute and waiting for the render.

I don't know if I am completely sold on this technique. If we need to make any small changes to the original art we need to reset the entire element in 3D. With the shake method we just re-exported the element and reloaded the Shake node. However the Photoshop method was quick. The video above is about 30 minutes speed up to 1.5 minutes. I think we'll definitely do some more page with Photoshop and see how they go.

Adding the 3rd D

2010-02-26T14:18:00.000-08:00

before:

Now that you know how 3D works by reading the primer, I wanted to write a post about the technique we use to create the 3D images for Robots! in 3D. Click the jump to geek out over all the technical details of how we add the 3rd to Robots!

Most modern 3D images uses two cameras to capture two images of a three dimensional space (both real and digitally rendered). Robots however we are creating the 3D space completely from a 2D image. We do this by essentially breaking down our 2D image into elements and duplicating/manipulating each element to create a right and left image.

Our current pipeline is basically export Layer Comps from Photoshop and then do the final compositing and anaglyph effect in Shake. At first I built the shake networks by hand, which got very complicated as well as time consuming. I realized there was a good opportunity for some good old fashioned scripting.

The Basic Shake Network I needed to create looked like this:

Essentially each element (Leonard and the background) gets split into two Pans which offsets the element left and right. The left Pans are then put Over each other and the right Pans over each other. This creates the left and right images. These images are multiplied by cyan and red and then added to one another. The resulting image looks like:

The simple example I showed above looks like this in shake code:

// Input nodes

LeftColor = Color(2100, 3150, 1, 0, 1, 1, 1, 0);
RightColor = Color(2100, 3150, 1, 1, 0, 0, 1, 0);
SFileInBG = SFileIn("//Thetreefort/Robotsin3D/comp/assets/0105/r3d_0105_panel5Farmhousefront.tif", 
    "Auto", 0, 0, "v1.1", "0", "");
SFileInLeonard = SFileIn("//Thetreefort/Robotsin3D/comp/assets/0105/r3d_0105_panel5Farmer.tif", 
    "Auto", 0, 0, "v1.1", "0", "");

// Processing nodes

PanBGLeft = Pan(SFileInBG, -PanBGRight.xPan, 0, 0, 0.5, 0);
PanBGRight = Pan(SFileInBG, 0, 20, 0, 0.5, 0);
PanLeonardLeft = Pan(SFileInLeonard, 0, 0, 0, 0.5, 0);
PanLeonardRight = Pan(SFileInLeonard, 0, 0, 0, 0.5, 0);
OverLeft = Over(PanLeonardLeft, PanBGLeft, 1, 0, 0);
OverRight = Over(PanLeonardRight, PanBGRight, 1, 0, 0);
IMultColorLeft = IMult(LeftColor, OverLeft, 1, 100, 0);
IMultColorRight = IMult(OverRight, RightColor, 1, 100, 0);
IAddLeftRight = IAdd(IMultColorLeft, IMultColorRight, 1, 100);

The 20 in PanBGRight is defines the depth for the 3D effect. The larger the number the further back in depth the object will appear, 0 is at the screen plane and negative numbers will make the object appear in front of the screen.

So I wrote a tcl script that would generate a shake script that created the base network and grouped them. The script takes in an .r3d configuation file and a render directory and outputs a shake script. The .r3d configuration file defines the paths and orders of the input images as well as their depth (offset). It is a tab separated flat text file that looks like this:

r3d_0105_panel1SFX.tif        -3
r3d_0105_panel1Leaves.tif        -5
r3d_0105_panel1Border.tif        0
r3d_0105_panel1Windmill.tif        9
r3d_0105_panel1Truck.tif        8
r3d_0105_panel1House.tif        10
r3d_0105_panel1FGhills.tif        15
r3d_0105_panel1Fields.tif        20
r3d_0105_panel1Fartrees.tif        25
r3d_0105_panel1BG.tif                30

Currently we have to hand build these files which takes a bit of time but it's pretty much reordering a ls > file.r3d and adding the depth numbers. The resulting shake network still needs to be tweaked and manipulated for more complex 3D effects but it gives a clean network with all the objects put over each other with depth.

after

While there is definitely room for refinement with this system it does a pretty good job giving us a quick 3D image to work off of.

To see the results of this handy work don't forget to check out Robots! in 3D. A new page is released every friday so put on your 3D spex and enjoy!

What is 3D anyways?

2010-02-26T14:16:00.000-08:00

3D is all the rage today with more and more media going the way of 3D. Ironically what is currently being advertised as new cool technology has been around since the mid 19th century. While back then they may have not had high-performance computers to generate images for 3D consumption they both rely on the concept of stereoscopy. Click the jump to learn the more about the intricacies of how 3D works.
We perceive a 3D space (in a very simplified sense) because we have two eyes that delivery slightly different 2D images to the brain. The brain interprets the divergence between these two images as a 3D space. Current 3D display technologies work off of a concept known as stereoscopy, in which two 2D images are presented to each of the viewer's eyes independently creating an effect of depth. Traditionally, stereoscopic images are produced by using two cameras offset from each other. These two images are then delivered to each eye separately through some sort of filtering mechanism. This was accomplished long ago using a picture holder, then colored glasses (anaglyph), and more recently through polarized and shutter glasses. While you are seeing depth what you are seeing is still not a true three dimensional space but rather it's a two dimensional representation of what a 3D space looks like from one fixed perspective.

Perceiving a true 3D space is very much about moving about it in time. That is why pirates still have a sense of depth. An interesting example of this can be seen in a comic by Doc Pop here:

http://www.docpop.org/2010/01/05/3d-without-glasses.html

By gaining multiple perspectives of a space our brains can fill in the details and flesh out a 3D space. So maybe what everyone is calling 3D, stereoscopy, is not really creating a 3D space but rather tricking our brains into sensing depth. Just remember if you really want to see some 3D stop looking at the monitor and look outside. If you really want to see some awesome stereoscopy make sure to check out Robots! in 3D.

3D Test Flash App

2009-12-17T16:34:00.000-08:00

So I wrote up a little flash app that allows for the creation of anaglyph 3D balls. I'll update this post in a bit with a little more background about how 3D images work and what my app is doing. For now, enjoy!

3D Test App

Grab your 3D Glasses

2009-12-14T23:00:00.000-08:00

I hope everyone has their 3D glasses handy. Here's the first look at a 3D concept for Robots in 3D: The Day the Droids Attacked!

No 3D glasses? Check out Wired's How-To Wiki

A Sneak Peak at Robots in 3D

2009-12-14T15:28:00.000-08:00

Sarah has posted the first concept page of Robots in 3D on her blog. I have begun the task of making it 3D, so kids get your 3D glasses ready and check back soon for the first 3D glimpse at Robots in 3D: The Day the Droids Attacked!

welcome to rewired pictures: the blog

2009-12-07T14:44:00.000-08:00

Hello all, welcome to the rewired pictures blog. This blog will serve as documentation of all upcoming rewired pictures projects including our newest comic Robots in 3D: The Day the Droids Attacked! More details to come so check back later.