Make 3D photos

– 2014, AS3, graphics rendering

This web app lets you prepare existing photos for use with anaglyph red/cyan 3D glasses, turn them into wigglegrams or export them as a crossview image. You'll need a photo / image and a matching "depth map". See below for details.

This app is designed for making existing images 3D. If you have the option to take new photos then go for it. There are phone apps and other web apps available for this kind of thing, or you can simply use a normal camera and a bit of Photoshop.

But if you already have the photo that needs to be turned 3D, then this app is for you.

Warning: Flash Player is slowly being disabled by default in modern web browsers. If you cannot see the app below you may need to re-enable Flash in your browser. Also, due to restrictions with Flash Player, images must be no taller or wider than 8192px, and contain no more than 16777216 pixels in total. If the app crashes, try downsizing your image first. Also please note that saving wigglegram GIFs is an experimental feature at this point and may not always work.

So I need to make a depth map?

If you want to use this web app, yes. They can be a little tricky but the results can look great.

Your depth map will be a grayscale image that corresponds to your photo. Dark areas of your depth map will signify which parts of your photo to appear far away, and light areas will cause areas to appear closer.

Example of a photo with matching depth map, and the final wigglegram

I've found the best way to make a depth map is to use Photoshop and start with a black background (the same resolution as your photo) with your photo positioned over the top. On separate layers, trace over each main shape in the photo in white so you have several solid white silhouettes. You can then alter the brightness of each shape to change how far away it should appear. To avoid making things look flat like cardboard cut-outs, use the dodge and burn tools to paint over your layers, lightening or darkening areas of each shape to add contours and give proper form to your objects. Save this and run it through the app above, adjust if needed, and export once you're done.

Why not just use displacement maps in Photoshop?

These may seem like the right way to warp images for 3D purposes, and they can work in a select few cases, but displacement maps will very often create weird artifacts around the edges of objects.

Anything else?

Questions, comments, suggestions or cool things you've used this for? Email me at  dxinteractive [at] gmail [dot] com.

I'm more than happy for everyone to use this for free. If you're feeling generous then contributions are always appreciated.