Depth-based Image Editing in WebGL

What can you do with an image that has a depth value for every pixel? Try out this 3D WebGL image processing viewer to see!

Use the sliders/controls below, and mouse over + click the images!

 

Loading… [WebGL capable browser needed to see this content] Screen-Shot-2015-03-02-at-114821AM












There are an order of magnitude more possibilities of new image editing and viewing innovations possible when depth information is available for a photo!

Features of this example:

  • Blur bokeh (simulated large aperture)
  • Motion parallax (simulated perspective)
  • Selective highlight (desaturation based on distance)
  • Edges (simple edge convolution filter)

The image above was taken with the Pelican Imaging array camera. See more example images!

What creative examples of depth-based image editing in WebGL can you think of?

 

 

Loading… [WebGL capable browser needed to see this content] train-pano-thumb

 

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.