Skip to content

Convert Your Pictures to 3D

December 20, 2011

Click HERE for Cranky’s 3D-izer!

If you’re curious as to how I made it and how it works, read on.
Get your red and cyan 3D glasses out. I was at Ed Park’s place and he had a pair of red / cyan 3D glasses along with a 3D drawing notepad.

Cool. In theory, I understood how 3D glasses work… but I wanted to experiment with it more. So Ed kindly let me borrow the notepad and the glasses.
So, when you look at a 3D image, there are 2 images… one blue (or cyan), one red. The glasses cancel one of them out on each eye, tricking your brain’s depth perception.

I decided to write software that can 1) take one photo and make it 3D glasses compatible and 2) take two photos that were taken side by side and combine them as one 3D glasses compatible photo.

Sounds do-able… Why not? I first took a photo of my parents’ dog Einstein

I love PHP-GD. You can do wonders with it. So I used a GD image filter with the IMG_FILTER_COLORIZE option and I was able to apply the appropriate filters needed to make this work.

Now, going back to Ed’s notepad…. there’s a scribble on it. When I look at it right-side up, the scribble looks like it’s floating on top of a grid of lines. When I flip the notepad upside down, the scribble looks like it’s underneath the grid. Interesting. The red filter is on my left eye, so if the red image is shifted to the right of the cyan image, it pops in. If the red image is shifted to the left of the cyan image, it pops out!

This image pops in and

this image pops out.
To be honest, this is kind of boring because the “anchor” is the dust on my laptop screen…. and the 2nd image, in order for it to look popped out, you need to stand back from your screen.
Now, what if I took 2 photos (the way 3d movies are filmed with 2 lenses) and I applied a red filter on one and a cyan filter on the other? Wouldn’t that be much better?

Taking these photos, I tried it out.

Now you need to step back from your computer screen with your 3d glasses in order for it to look good. I made the mistake of taking a photo of an object much too close.

If you see doubles, step back. Way back. Why do you see doubles? Well, focus on your computer screen and put your finger close to your eyes. You see double right? Apparently it’s not possible to make the image pop out SO close to your face that it can kiss you…. That is, without you seeing double. Now, if I shift the photos so the red and blue image overlap at the bottle, that becomes the focal point. Everything in front of it pops out and everything behind it pops in.

I made the focal point the plant on my desk. Pretty cool. Go ahead and use the 3d-izer to 3d-ize your photos. Just remember to take photos of objects that are somewhat distant. It also looks better on a bigger screen.
Cranky’s 3d-izer

Enjoy. Here’s the source code:


if(is_uploaded_file($_FILES['leftphoto']['tmp_name'])){
    $leftphoto = $_FILES['leftphoto']['tmp_name'];
    $leftphototype = $_FILES['leftphoto']['type'];
    if(is_uploaded_file($_FILES['rightphoto']['tmp_name'])){ 
        $type = "double";
        $rightphoto = $_FILES['rightphoto']['tmp_name'];
        $rightphototype = $_FILES['rightphoto']['type'];
    }   
    else{ 
        $type = "single";
        $rightphoto = $_FILES['leftphoto']['tmp_name'];
        $rightphototype = $leftphototype;
    }   
    $glasses = $_POST['glasses'];
    $poptype = $_POST['poptype'];
       
    if($leftphototype === "image/jpeg" || $leftphototype === "image/pjpeg"){
        $bim = imagecreatefromjpeg($leftphoto);
        $rim = imagecreatefromjpeg($rightphoto);
    }   
    elseif($leftphototype === "image/png" || $leftphototype === "image/x-png"){
        $bim = imagecreatefrompng($leftphoto);
        $rim = imagecreatefrompng($rightphoto);
    }   
    elseif($leftphototype === "image/gif"){ 
        $bim = imagecreatefromgif($leftphoto);
        $rim = imagecreatefromgif($rightphoto);
    }   

    unlink($leftphoto);
    if($type==="double") unlink($rightphoto);

    if($glasses === "redblue") $gvalue=0;
    elseif($glasses === "redcyan") $gvalue=255;
    imagefilter($bim, IMG_FILTER_COLORIZE, 0, $gvalue, 255);
    imagefilter($rim, IMG_FILTER_COLORIZE, 255, 0, 0); 
    if($type==="double") $offset = 0;
    elseif($poptype==="in") $offset = -50;
    else $offset = 50;
    imagecopymerge($rim,$bim,$offset,0,0,0,imagesx($bim),imagesy($bim),50);
    header('Content-Type: image/jpeg');
    imagejpeg($rim);

    imagedestroy($rim);
    imagedestroy($bim);
}

From → Hacks

2 Comments
  1. I think you could do this runtime in a browser using this lib: http://camanjs.com/docs/built-in#colorize

    • hey, that’s a cool javascript library. You’re right. You can do it client-side.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: