{"id":2998,"date":"2015-02-20T12:06:32","date_gmt":"2015-02-20T19:06:32","guid":{"rendered":"http:\/\/mcclanahoochie.com\/blog\/?post_type=portfolio&#038;p=2998"},"modified":"2023-06-10T10:32:41","modified_gmt":"2023-06-10T17:32:41","slug":"depth-enabled-image-editing-in-webgl","status":"publish","type":"post","link":"https:\/\/mcclanahoochie.com\/blog\/2015\/02\/depth-enabled-image-editing-in-webgl\/","title":{"rendered":"Depth-based Image Editing in WebGL"},"content":{"rendered":"<p>What can you do with an image that has a depth value for every pixel? Try out this 3D WebGL image processing\u00a0viewer to see!<\/p>\n<p><em><strong>Use the sliders\/controls below, and mouse over + click the images!<\/strong><\/em><\/p>\n<div>\n<div id=\"gui-div\"><\/div>\n<p>&nbsp;<\/p>\n<div id=\"loading\">Loading&#8230; [WebGL capable browser needed to see this content] <img data-recalc-dims=\"1\" decoding=\"async\" data-attachment-id=\"3034\" data-permalink=\"https:\/\/mcclanahoochie.com\/blog\/2015\/02\/depth-enabled-image-editing-in-webgl\/screen-shot-2015-03-02-at-114821am\/#main\" data-orig-file=\"https:\/\/i0.wp.com\/mcclanahoochie.com\/blog\/wp-content\/uploads\/2015\/02\/Screen-Shot-2015-03-02-at-114821AM.png?fit=789%2C591&amp;ssl=1\" data-orig-size=\"789,591\" data-comments-opened=\"1\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}\" data-image-title=\"Screen-Shot-2015-03-02-at-114821AM\" data-image-description=\"\" data-image-caption=\"\" data-large-file=\"https:\/\/i0.wp.com\/mcclanahoochie.com\/blog\/wp-content\/uploads\/2015\/02\/Screen-Shot-2015-03-02-at-114821AM.png?fit=789%2C591&amp;ssl=1\" class=\"aligncenter size-thumbnail wp-image-3034\" src=\"https:\/\/i0.wp.com\/mcclanahoochie.com\/blog\/wp-content\/uploads\/2015\/02\/Screen-Shot-2015-03-02-at-114821AM-150x150.png?resize=150%2C150\" alt=\"Screen-Shot-2015-03-02-at-114821AM\" width=\"150\" height=\"150\" srcset=\"https:\/\/i0.wp.com\/mcclanahoochie.com\/blog\/wp-content\/uploads\/2015\/02\/Screen-Shot-2015-03-02-at-114821AM.png?resize=150%2C150&amp;ssl=1 150w, https:\/\/i0.wp.com\/mcclanahoochie.com\/blog\/wp-content\/uploads\/2015\/02\/Screen-Shot-2015-03-02-at-114821AM.png?resize=50%2C50&amp;ssl=1 50w, https:\/\/i0.wp.com\/mcclanahoochie.com\/blog\/wp-content\/uploads\/2015\/02\/Screen-Shot-2015-03-02-at-114821AM.png?zoom=2&amp;resize=150%2C150&amp;ssl=1 300w, https:\/\/i0.wp.com\/mcclanahoochie.com\/blog\/wp-content\/uploads\/2015\/02\/Screen-Shot-2015-03-02-at-114821AM.png?zoom=3&amp;resize=150%2C150&amp;ssl=1 450w\" sizes=\"(max-width: 150px) 100vw, 150px\" \/><\/div>\n<div id=\"renderer\"><\/div>\n<p><script src=\"http:\/\/mcclanahoochie.com\/depth-player\/three.min.js\" type=\"text\/javascript\"><\/script><br \/>\n<script src=\"http:\/\/mcclanahoochie.com\/depth-player\/Detector.js\" type=\"text\/javascript\"><\/script><br \/>\n<script src=\"http:\/\/mcclanahoochie.com\/depth-player\/dat.gui.min.js\" type=\"text\/javascript\"><\/script><br \/>\n<script src=\"http:\/\/mcclanahoochie.com\/depth-player\/CopyShader.js\" type=\"text\/javascript\"><\/script><br \/>\n<script src=\"http:\/\/mcclanahoochie.com\/depth-player\/EffectComposer.js\" type=\"text\/javascript\"><\/script><br \/>\n<script src=\"http:\/\/mcclanahoochie.com\/depth-player\/RenderPass.js\" type=\"text\/javascript\"><\/script><br \/>\n<script src=\"http:\/\/mcclanahoochie.com\/depth-player\/ShaderPass.js\" type=\"text\/javascript\"><\/script><br \/>\n<script src=\"http:\/\/mcclanahoochie.com\/depth-player\/MaskPass.js\" type=\"text\/javascript\"><\/script><br \/>\n<script src=\"http:\/\/mcclanahoochie.com\/depth-player\/ColorProcessing.js\" type=\"text\/javascript\"><\/script><br \/>\n<script src=\"http:\/\/mcclanahoochie.com\/depth-player\/ParallaxShader.js\" type=\"text\/javascript\"><\/script><br \/>\n<script src=\"http:\/\/mcclanahoochie.com\/depth-player\/EdgeShader.js\" type=\"text\/javascript\"><\/script><br \/>\n<script src=\"http:\/\/mcclanahoochie.com\/depth-player\/app.js\" type=\"text\/javascript\"><\/script><\/p>\n<\/div>\n<p>There are an order of magnitude more possibilities of new image editing and viewing innovations possible when depth information is available for a photo!<\/p>\n<p><em>Features of this example:<\/em><\/p>\n<ul>\n<li>Blur bokeh (simulated large aperture)<\/li>\n<li>Motion parallax (simulated perspective)<\/li>\n<li>Selective highlight (desaturation based on distance)<\/li>\n<li>Edges (simple edge convolution filter)<\/li>\n<\/ul>\n<p>The image above was taken with the <a href=\"http:\/\/pelicanimaging.com\/index.html\" target=\"_blank\" rel=\"noopener\">Pelican Imaging<\/a> array camera. See more <a href=\"http:\/\/web.archive.org\/web\/20160504155023\/http:\/\/pelicanimaging.com:80\/parallax\/\" target=\"_blank\" rel=\"noopener\">example images<\/a>!<\/p>\n<p>What creative examples of depth-based image editing in WebGL can you think of?<\/p>\n<p>&nbsp;<\/p>\n<div>\n<div id=\"gui-div2\"><\/div>\n<p>&nbsp;<\/p>\n<div id=\"loading2\">Loading&#8230; [WebGL capable browser needed to see this content] <img data-recalc-dims=\"1\" decoding=\"async\" data-attachment-id=\"3520\" data-permalink=\"https:\/\/mcclanahoochie.com\/blog\/2015\/02\/depth-enabled-image-editing-in-webgl\/train-pano-thumb\/#main\" data-orig-file=\"https:\/\/i0.wp.com\/mcclanahoochie.com\/blog\/wp-content\/uploads\/2015\/12\/train-pano-thumb.jpg?fit=400%2C400&amp;ssl=1\" data-orig-size=\"400,400\" data-comments-opened=\"1\" data-image-meta=\"{&quot;aperture&quot;:&quot;2.8&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;PICam&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;1&quot;}\" data-image-title=\"train-pano-thumb\" data-image-description=\"\" data-image-caption=\"\" data-large-file=\"https:\/\/i0.wp.com\/mcclanahoochie.com\/blog\/wp-content\/uploads\/2015\/12\/train-pano-thumb.jpg?fit=400%2C400&amp;ssl=1\" class=\"aligncenter size-thumbnail wp-image-3520\" src=\"https:\/\/i0.wp.com\/mcclanahoochie.com\/blog\/wp-content\/uploads\/2015\/12\/train-pano-thumb-150x150.jpg?resize=150%2C150\" alt=\"train-pano-thumb\" width=\"150\" height=\"150\" srcset=\"https:\/\/i0.wp.com\/mcclanahoochie.com\/blog\/wp-content\/uploads\/2015\/12\/train-pano-thumb.jpg?resize=150%2C150&amp;ssl=1 150w, https:\/\/i0.wp.com\/mcclanahoochie.com\/blog\/wp-content\/uploads\/2015\/12\/train-pano-thumb.jpg?resize=300%2C300&amp;ssl=1 300w, https:\/\/i0.wp.com\/mcclanahoochie.com\/blog\/wp-content\/uploads\/2015\/12\/train-pano-thumb.jpg?resize=50%2C50&amp;ssl=1 50w, https:\/\/i0.wp.com\/mcclanahoochie.com\/blog\/wp-content\/uploads\/2015\/12\/train-pano-thumb.jpg?w=400&amp;ssl=1 400w\" sizes=\"(max-width: 150px) 100vw, 150px\" \/><\/div>\n<div id=\"renderer2\"><\/div>\n<p><script src=\"http:\/\/mcclanahoochie.com\/depth-player\/app2.js\" type=\"text\/javascript\"><\/script><\/p>\n<\/div>\n<p>&nbsp;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>What can you do with an image that has a depth value for every pixel? Try out this 3D WebGL image processing\u00a0viewer to see! Use the sliders\/controls below, and mouse over + click the images! &nbsp; Loading&#8230; [WebGL capable browser needed to see this content] There are an order of magnitude more possibilities of new &#8230; <a title=\"Depth-based Image Editing in WebGL\" class=\"read-more\" href=\"https:\/\/mcclanahoochie.com\/blog\/2015\/02\/depth-enabled-image-editing-in-webgl\/\" aria-label=\"Read more about Depth-based Image Editing in WebGL\">Read more<\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"advanced_seo_description":"","jetpack_seo_html_title":"","jetpack_seo_noindex":false,"jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":true,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2}},"categories":[1],"tags":[55,58,51,50,56,54,49,57,62,53,47,101,29,52],"class_list":["post-2998","post","type-post","status-publish","format-standard","hentry","category-uncategorized","tag-3d","tag-computational-photography","tag-depth","tag-image-editing","tag-image-editor","tag-image-processing","tag-images","tag-imaging","tag-javascript","tag-photography","tag-photos","tag-programming","tag-projects","tag-webgl"],"jetpack_publicize_connections":[],"jetpack_featured_media_url":"","jetpack_sharing_enabled":true,"jetpack_shortlink":"https:\/\/wp.me\/pZdXI-Mm","jetpack-related-posts":[{"id":3491,"url":"https:\/\/mcclanahoochie.com\/blog\/2015\/12\/google-cardboard-camera-vr-photos\/","url_meta":{"origin":2998,"position":0},"title":"Google&#8217;s Cardboard Camera for 3D Virtual Reality Photos","author":"mcclanahoochie","date":"December 3, 2015","format":false,"excerpt":"Today Google released an app \"Cardboard Camera\" for Android in\u00a0the Play Store: https:\/\/play.google.com\/store\/apps\/details?id=com.google.vr.cyclops A free app to create 3D virtual reality photos (stereoscopic 3D 360\u00b0 panoramas). VR Photography The app\u00a0takes a three-dimensional panorama you can view in the Google Cardboard app. The result is a 360\u00b0 image where near things\u2026","rel":"","context":"In \"android\"","block_context":{"text":"android","link":"https:\/\/mcclanahoochie.com\/blog\/tag\/android\/"},"img":{"alt_text":"Screen Shot 2015-12-03 at 2.19.33 PM","src":"https:\/\/i0.wp.com\/mcclanahoochie.com\/blog\/wp-content\/uploads\/2015\/12\/Screen-Shot-2015-12-03-at-2.19.33-PM-280x300.png?resize=350%2C200","width":350,"height":200},"classes":[]},{"id":2072,"url":"https:\/\/mcclanahoochie.com\/blog\/2012\/01\/using-gradient-layer-masks-in-gimp\/","url_meta":{"origin":2998,"position":1},"title":"Using Gradient Layer Masks in GIMP","author":"mcclanahoochie","date":"January 29, 2012","format":false,"excerpt":"Some simple notes on how to seamlessly blend images in GIMP using gradient based layer masks. INPUT IMAGES 4 images with only different shutter speeds: PROCESS Open all images as separate layers in a new GIMP canvas: Right click a layer > \"Add layer mask\" > choose default \"White full\u2026","rel":"","context":"In \"computational photography\"","block_context":{"text":"computational photography","link":"https:\/\/mcclanahoochie.com\/blog\/tag\/computational-photography\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/mcclanahoochie.com\/blog\/wp-content\/uploads\/2012\/01\/stream-i1-2-150x150.png?resize=350%2C200","width":350,"height":200},"classes":[]},{"id":3618,"url":"https:\/\/mcclanahoochie.com\/blog\/2016\/06\/random-thoughts-vr-virtual-reality\/","url_meta":{"origin":2998,"position":2},"title":"Random Thoughts on VR","author":"mcclanahoochie","date":"June 7, 2016","format":false,"excerpt":"This is a brain dump of knowledge and opinions I've gained over the past 18 months: My personal preferences for VR headsets: The HTC Vive is AMAZING, followed by the Oculus Rift, followed by Morpheus (Playstation VR), followed by Gear VR. The current Google cardboard is not VR in my\u2026","rel":"","context":"In \"360\"","block_context":{"text":"360","link":"https:\/\/mcclanahoochie.com\/blog\/tag\/360\/"},"img":{"alt_text":"20160425_111454","src":"https:\/\/i0.wp.com\/mcclanahoochie.com\/blog\/wp-content\/uploads\/2016\/06\/20160425_111454-300x159.jpg?resize=350%2C200","width":350,"height":200},"classes":[]},{"id":3434,"url":"https:\/\/mcclanahoochie.com\/blog\/2015\/06\/lightroom-export-to-gimp-plugin\/","url_meta":{"origin":2998,"position":3},"title":"Lightroom Export to GIMP Plugin","author":"mcclanahoochie","date":"June 14, 2015","format":false,"excerpt":"Tags: gimp, image editing, lightroom, photography, plugin, portfolio, projects, scripts Export image to Gimp plugin\/template for Lightroom \u00a0+\u00a0 This post will show you how to easily setup lightroom to export a photo from Lightroom to Gimp for external editing. (Note these instructions are for Mac OSX, but can be translated\u2026","rel":"","context":"With 5 comments","block_context":{"text":"With 5 comments","link":"https:\/\/mcclanahoochie.com\/blog\/2015\/06\/lightroom-export-to-gimp-plugin\/#comments"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/wwwimages2.adobe.com\/content\/dam\/Adobe\/images\/shared\/product_mnemonics\/50x50\/box-lightroom6-50x50.png?resize=350%2C200&ssl=1","width":350,"height":200},"classes":[]},{"id":516,"url":"https:\/\/mcclanahoochie.com\/blog\/2010\/08\/gimp-national-geographic-script\/","url_meta":{"origin":2998,"position":4},"title":"Awesome National Geographic Script in GIMP","author":"mcclanahoochie","date":"August 21, 2010","format":false,"excerpt":"After installing the new plug-in registry for GIMP, I stumbled upon the amazing National Geographic Script. It is incredible! This script simulates high quality, vivid photos - like the ones from the National Geographic magazine. It uses a configurable mixture of shadow recovery, sharpening, local contrast, and various color overlay\u2026","rel":"","context":"In \"gimp\"","block_context":{"text":"gimp","link":"https:\/\/mcclanahoochie.com\/blog\/tag\/gimp\/"},"img":{"alt_text":"Original Image - Driftwood","src":"https:\/\/i0.wp.com\/mcclanahoochie.com\/blog\/wp-content\/uploads\/2010\/08\/01540_driftwood_384x240.jpg?resize=350%2C200","width":350,"height":200},"classes":[]},{"id":2614,"url":"https:\/\/mcclanahoochie.com\/blog\/2012\/12\/last-post-of-2012\/","url_meta":{"origin":2998,"position":5},"title":"Last Post of 2012","author":"mcclanahoochie","date":"December 31, 2012","format":false,"excerpt":"Nothing important here, just a few highlights reflecting back on 2012... January\u00a0- Started my first 365 photo project February\u00a0- My photo on display in a random art show on campus March\u00a0- Went to SXSW in Austin TX April\u00a0- Upgraded to a Nikon D7000\u00a0\u00a0| \u00a0created PyrDetail May\u00a0- Finished\u00a0MSCS degree from GaTech\u2026","rel":"","context":"In \"life\"","block_context":{"text":"life","link":"https:\/\/mcclanahoochie.com\/blog\/tag\/life\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]}],"jetpack_likes_enabled":false,"_links":{"self":[{"href":"https:\/\/mcclanahoochie.com\/blog\/wp-json\/wp\/v2\/posts\/2998","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/mcclanahoochie.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/mcclanahoochie.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/mcclanahoochie.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/mcclanahoochie.com\/blog\/wp-json\/wp\/v2\/comments?post=2998"}],"version-history":[{"count":0,"href":"https:\/\/mcclanahoochie.com\/blog\/wp-json\/wp\/v2\/posts\/2998\/revisions"}],"wp:attachment":[{"href":"https:\/\/mcclanahoochie.com\/blog\/wp-json\/wp\/v2\/media?parent=2998"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/mcclanahoochie.com\/blog\/wp-json\/wp\/v2\/categories?post=2998"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/mcclanahoochie.com\/blog\/wp-json\/wp\/v2\/tags?post=2998"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}