I've noticed Depthy (at depthy.stamina.pl) doesn't work with newer depth-enabled portrait-mode photos from the default Google camera app on Pixel phones.

As a work-around, I can get it to work by manually extracting the depth map with photopea.com and then loading it into Depthy separately, but I imagine this should just work out of the box on Depthy. Since Photopea is able to extract the depth map, this seems to be a limitation on Depthy's side, rather than a photo formatting/exif issue on Google's side.

Would it be possible to add compatibility for these photos?

We are producing depth images compatible with the Google depth format and have uploaded them to Depthy for viewing. Both our reference image and depthmap image are always generated in horizontal orientation based on the camera output and tagged in EXIF with the actual orientation so that any image viewer, browsers included, will display them correctly.

However, Depthy does not seem to apply the stated rotation, and so portrait and landscape images are always horizontal and often upside down. Both the reference JPEG and depthmap PNG need to be rotated according to the rotation tag specified in the JPEG.

Examples:
https://s3.amazonaws.com/crystalvista/demos/images/stanford.jpg
https://s3.amazonaws.com/crystalvista/demos/images/goldcamp.jpg
(never mind the large file sizes as there are other embedded data not specified by the file format)

It shows Extracted images, but Parallax picture is just black. Attached my test image, others do same.

Lens Blur photos are created by the G+ Camera, but if you upload a photo from the G+ Photos app, you'll get a "no XMP metadata found" error. The correct way to upload a photo is to

1. Visit the site on your Android
2. Tap the green Load Photo button
3. Select Documents as the upload picker
4. Choose Gallery in the sidebar
5. Tap the Camera folder
6. Select the photo you'd like to upload

This should be made more clear on the demo site.

Is there any way to export my picture as combined image + simple JS script to use on own web site?

Doesn't work at all.
Tried locally.
Tried through Apache.
Nothing.
The website and the code on GITHUB are different, it would seem.

After experimenting with taking a screen capture of the demos and converting them to GIFs and WebMs [1] it seemed like a ideal fit to have a feature to convert the 'Depthies' to animated formats to share them on blogs, etc.

Seeing as already many stereoscopic loops are manually created having the output automated would make the process easier for sharing the results.

Kudos for the superb work so far on the project, have been enjoying reading the feedback on HN and elsewhere.

[1] Corridor demo WebM
Lavender demo GIF (lacking a few frames)

Try to upload an image and this error appears in console:

Failed to load resource: the server responded with a status of 404 (Not Found) http://depthy.stamina.pl/styles/vendor.css
compoundFiles 3be9a114.scripts.js:1
2
Cross-origin image load denied by Cross-Origin Resource Sharing policy. depthy.stamina.pl/:1
2
WebGL: INVALID_VALUE: texImage2D: no image depthy.stamina.pl/:1
[.WebGLRenderingContext]RENDER WARNING: texture bound to texture unit 0 is not renderable. It maybe non-power-of-2 and have incompatible texture filtering or is not 'texture complete' depthy.stamina.pl/:1

The rest are other WebGL warnings probably because not texture loaded.

depthy.me doesn't recognize the depth information in the attached image. The metadata in this image is identical to an image I found that works with depthy with the exception that the XMP has been restructured to use long-hand format, and the order of some xmp properties has been changed. But neither of these changes should make a difference. Somehow it seems that depthy may incompatible with long-hand XMP format (which is written by many metadata apps).

Portrait photos taken by Google Camera 7.2 seems to have different format that the current version of depthy doesn't support : (

I tried to create videos and this option in the last few days doesn't work. It worked perfectly last week.
I'm using Chrome and i tried in a pc and also on my mobile phone. Also with different images. GIF option is working fine.
Awesome web app! Hope you can check this bug

I tried it from my Nexus 5, with 4.4.2 and the fresh Camera app, but:

• I can not upload an image, what I created earlier -> no depth map found (yes, I used Lens blur to take this photo)
• I can not take a new photo, I have 3 options to add a new photo: Camera/Camcorder/Document. The first is opening the Camera app, but not in Lens Blur mode and the option to change in not available.

Supporting the HTC Dual Lens format

The HTC One M8 has an extra camera that adds depth information to images. Unfortunately they don't seem to have used the same storage format as Google Lens Blur, so Depthy doesn't load them correctly. While this is clearly HTC's fault, not Depthy's, it would nevertheless be awesome if Depthy could support for depth images created with the HTC One M8.

Obstacles

1. HTC embeds their depth data in a non-standard way. Their API and SDK is written with the assumption that the images are being accessed via Android with the HTC Sense extensions. There is no API function to pull or dump the depth data from a dual lens image.
2. The actual depth map is not included in the image, just the offset image from the second camera.
3. HTC (may) be hiding the depth data from non-Sense apps, including MTP file copies. I cannot verify this right now, except to say that images I took with the HTC camera app do not appear to have embedded depth data. Since I have installed a custom ROM, however, I can't be sure the depth data is even being generated in the first place.

Resolutions

1. The offset image appears to be simply appended to the first image. It is easily isolated by splitting the file at the file's second JPEG (ÿØÿá) header. The second half of the split contains the offset image and its thumbnail. In the example file duallenssample.jpg, the second image starts at 0x1d4982.
2. While I know little of the actual processes involved, generating depth data from an offset image seems to be a well-explored bit of math, and there are several libraries around that appear to do this automatically.
3. The described method of extraction does work on the duallenssample.jpg sample image included in the HTC Dual View SDK, so the lack of depth data in my Dual Lens files may be a problem on my end.

Sample data

Here is the sample file included with the HTC Dual Lens SDK: http://i.imgur.com/8SWMXPb.jpg
And here is the offset image JPG I extracted from that file: http://i.imgur.com/Z8TvrUQ.jpg

This is all I have for this right now. I do not believe this is a duplicate of #9, as that was regarding Google Lens Blur images taken on the M7, not HTC Dual Lens images.

I accidentally shared my cat´s photo to DEPTHY, I thought it was facebook and I would like you to please put it down. I know there is nothing special in the photo but I do not want it to be of public use, so please take it from the page. I am sorry to bother you and thanks for the program.

Hi

I'm learning Docker and as I would like to test your project, I made a docker image of depthy.

docker run --rm -t -i -p 9000:9000 essembeh/depthy

Then go to http://localhost:9000

If you like this way of running depthy locally, you can add instructions to your documentation.
I will try to keep the docker image up to date, but it can be automated!

To automate building the docker image by docker.io when you commit on your github repository

• Add Dockerfile (https://github.com/essembeh/dockerfiles/blob/master/depthy/Dockerfile) to your repository
• Edit your github repository to enable Docker service (cf https://docs.docker.com/docker-hub/builds/)
• Configure the automated build on docker.io (if you like I can do it)

Edit: #17 is not blocking this issue anymore, locale has been set to utf8 in the docker image.

Hi,
following the documentation, I tried the following:
docker run --rm -t -i -p 9000:9000 essembeh/depthy
But I had an error "The system cannot find the file specified."
I'm not sure if it is due to my firewall at work so I need to try it at home.

HOWEVER I noticed on the docker hub that the image is not present when I search for 'essembeh'
https://hub.docker.com/search?q=essembeh&type=image
From what I understand of issue #18 it has been put online in 2014 by @essembeh but now it seems removed.
Please note that I'm a true beginner with docker so I may have missed something, in that case juste tell me where to look for the docker image.

Could it be possible to upload a JPG image which was not taken with the Google Camera App and a "hand made" map image?

What would be the constraints for the map image file? Same size? Grey levels?

Thanks

depthy / app / scripts / pixi / DepthFilter.js

offset: {type: '2f', value:{x:0, y:0}},

From a quick glance it seems that if you were to increase this offset here the effect would be smoother because the Accelerometer would be mapped at a greater scale so there wouldn't be as much jumping.

Will test on my fork later.

Hey guys, I'm sorry to bother with this question, but is there a way to use depthy as a single js library? I mean just by passing one picture, the depth of field picture and that's it, without the angular stuff behind?
If there is, just lemme know the basics and I'll study further.
Appreciate your help :)

Whenever I load an image with a depth map, the canvas doesn't display the parallax or the original image. Please see screenshots attached.

Application was working great until I upgraded to OS X El Capitan! Also no errors in the console.

its kinda hard to draw depth maps with only circles(add more shapes).....and also could you add an interactive line mesh with pushing and pulling

I'm trying to dockerize your app to easily test it without installing all the dependencies.

I have a strange error while running grunt serve

        Warning:  Use --force to continue.

        Aborted due to warnings.

When i fun it with --force, I can browse the server, but I get a CSS error:

Syntax error: Invalid US-ASCII  character "xE2"
 line 326 of /depthy/app/styles/_common.scss

I tried to remove the value of the content = '....' on line 326 and it seems to work.

As I don't understand CSS at all I won't send you a push request ;)

I'm looking for an app that supports Huawei P9 and P10 dual-camera jpg files. As somebody found out on XDA developers, the files are built up rather easy. They contain the blurred image, the original image and the depth map at the end of the file. As a photographer I'd love to have an app which could extract those images, especially the depth map.

Here's a test file:

Thank you for making Dephty available - works very well with files from my nexus 4 phone :-)

I was thinking, given that the depth map is available, perhaps it would be possible for you to offer the possibility to save results as a left-right image pair and/or a red/cyan anaglyph?

Secondly, sometimes, when looking at the depth map one can pretty easily see the major issues that are causing problems in a particular image. My own image http://depthy.me/#/ip/fji6xoK is an example of this. So I was thinking about an option that allowed the user to feed a jpg + a repaired depth map, processed in eg photoshop, back into dephty, and thus obtain an improved result?

Best regards
Karsten

Strange issue, the values seem to get reversed or change randomly when saving yet don't actually change the position on the meter. Example is when I go to the save image menu with the image set on or towards Near it suddenly acts like it's on Far yet the button is still displayed as if its on Near.

Hi,

I changed the depth map within the browser,
then I saved the edited picture as jpg

The new image works well with Android Lens Blur,
but makes 'Depth Photo 3D Live Wallpaper' crash

Simple stereoscopic output: side-by-side leftmost and rightmost images.

Will probably need an option to switch between left-right and right-left views for those who do cross-eye vs long-focus.

Could also do red-green ('greyscale') for color filter glasses, or maybe even html5 3d (youtube does this, maybe only supported by nvidia?)

I believe I am within inches of being able to run depthy (which is a cool tool!).

I am experiencing some issues when running grunt build, and I am not sure how to run it.

note two issues in the codepile... a typerror, and a fatal error related to gifsicle.

After I can fix it, then i need to know if I can run it with PM2 or?

The instructions aren't exactly precise and this error is not mentioned afaic.

root@zzzz:/var/www/html/apps/depthy/depthy# grunt build
Loading "grunt-karma.js" tasks...ERROR
>> TypeError: Cannot read property 'prototype' of undefined
(node:22328) [DEP0022] DeprecationWarning: os.tmpDir() is deprecated. Use os.tmpdir() instead.

Running "clean:dist" (clean) task

Running "useminPrepare:html" (useminPrepare) task
Going through app/index.html to update the config
Looking for build script HTML comment blocks

Configuration is now:

  concat:
  { generated:
   { files:
      [ { dest: '.tmp/concat/scripts/vendor.js',
          src:
           [ 'app/scripts/modernizr.js',
             'app/scripts/modernizr-platform.js',
             'app/bower_components/jquery/dist/jquery.min.js',
             'app/bower_components/angular/angular.js',
             'app/bower_components/angular-animate/angular-animate.min.js',
             'app/bower_components/angular-ui-router/release/angular-ui-router.min.js',
             'app/bower_components/lodash/dist/lodash.compat.js',
             'app/bower_components/pixi.js/bin/pixi.dev.js',
             'app/bower_components/angular-ga/ga.js',
             'app/bower_components/angular-ui-bootstrap/src/buttons/buttons.js',
             'app/bower_components/angular-ui-bootstrap/src/modal/modal.js',
             'app/bower_components/angular-ui-bootstrap/src/transition/transition.js',
             'app/bower_components/angular-ui-bootstrap/src/dropdown/dropdown.js',
             'app/bower_components/angular-touch/angular-touch.min.js',
             'app/bower_components/is-jpg/browser.js',
             'app/bower_components/is-png/browser.js',
             'app/scripts/vendor/LensBlurDepthExtractor.js',
             'app/scripts/vendor/md5.js',
             'app/scripts/classes/GDepthEncoder.js',
             'app/scripts/classes/dataURITools.js',
             'app/bower_components/promise/index.js',
             'app/bower_components/screenfull/dist/screenfull.js',
             'app/bower_components/iscroll/build/iscroll.js' ] },
        { dest: '.tmp/concat/scripts/scripts.js',
          src:
           [ '{.tmp,app}/scripts/app.js',
             '{.tmp,app}/scripts/services/depthy.js',
             '{.tmp,app}/scripts/controllers/main.js',
             '{.tmp,app}/scripts/controllers/draw.js',
             '{.tmp,app}/scripts/directives/fileselect.js',
             '{.tmp,app}/scripts/directives/pixi.js',
             '{.tmp,app}/scripts/directives/depthyViewer.js',
             '{.tmp,app}/scripts/directives/shareurls.js',
             '{.tmp,app}/scripts/directives/rangeStepper.js',
             '{.tmp,app}/scripts/pixi/ColorMatrixFilter2.js',
             '{.tmp,app}/scripts/pixi/DepthDisplacementFilter.js',
             '{.tmp,app}/scripts/pixi/DepthPerspectiveFilter.js',
             '{.tmp,app}/scripts/pixi/utils.js',
             '{.tmp,app}/scripts/templates.js',
             '{.tmp,app}/scripts/bs-templates.js',
             '{.tmp,app}/scripts/svg-templates.js',
             '{.tmp,app}/scripts/controllers/exportgifmodal.js',
             '{.tmp,app}/scripts/controllers/exportwebmmodal.js',
             '{.tmp,app}/scripts/controllers/imageinfomodal.js',
             '{.tmp,app}/scripts/controllers/sharepngmodal.js',
             '{.tmp,app}/scripts/controllers/exportpngmodal.js',
             '{.tmp,app}/scripts/controllers/exportjpgmodal.js',
             '{.tmp,app}/scripts/controllers/exportanaglyphmodal.js',
             '{.tmp,app}/scripts/classes/DepthyViewer.js',
             '{.tmp,app}/scripts/classes/DepthyDrawer.js',
             '{.tmp,app}/scripts/services/statemodal.js',
             '{.tmp,app}/scripts/services/UpdateCheck.js' ] } ] } }

  uglify:
  { options: {},
  generated:
   { files:
      [ { dest: 'dist/scripts/vendor.js',
          src: [ '.tmp/concat/scripts/vendor.js' ] },
        { dest: 'dist/scripts/scripts.js',
          src: [ '.tmp/concat/scripts/scripts.js' ] } ] } }

  cssmin:
  { generated:
   { files:
      [ { dest: 'dist/styles/main.css',
          src: [ '{.tmp,app}/styles/main.css' ] } ] } }

Running "concurrent:dist" (concurrent) task
>> Warning: There are more tasks than your concurrency limit. After this limit
>> is reached no further tasks will be run until the current tasks are
>> completed. You can adjust the limit in the concurrent task options
    Fatal error: Path must be a string. Received { url: 'https://raw.github.com/imagemin/gifsicle-bin/v0.1.7/vendor/linux/x64/gifsicle',
      name: 'gifsicle',
      os: 'linux',
      arch: 'x64' }


Execution Time (2019-08-17 22:25:22 UTC)
loading tasks         8ms  ▇▇ 1%
clean:dist           11ms  ▇▇ 2%
useminPrepare:html   31ms  ▇▇▇▇▇ 4%
concurrent:dist     663ms  ▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇ 92%
Total 721ms
`

Hi there! No idea if this is still being updated, or if there's any interest in doing so, but; The new Nokia 8 has support for Bokeh/Portrait Mode via its second rear lens capturing a monochrome image, which (assumedly) it uses as the depth map. However, depthy can't read them, claiming they're 'flat as a pancake'.

I've had a quick look into it (v. quick, like why-am-I-starting-this-at-2am quick), and from reading the file metadata it seems it does use Google's Camera setup, referencing the same GFocus/GDepth/GImage xml namespaces depthy uses in scripts/classes/GDepthEncoder.js (as well as GCamera, also). However, for some reason it references some different tags to Depthy, and seems to outright lack other tags that Depthy uses (as referenced in scripts/vendor/LensBlurDepthExtractor.js ).

The tags found in the metadata are:
GCamera:SpecialTypeID (of type DEPTH_TYPE, I guess just so you know it's extra depthy!)
GFocus:BlurAtInfinity
GFocus:FocusPointX
GFocus:FocusPointY (as opposed to focalPointX/Y perhaps?)
GDepth:Mime (AS/depthmap)
GDepth:Manufacturer (ArcSoft)
GDepth:Data
GImage:Mime
GImage:Data

It seems to outright lack GFocus:focalDistance/focalPoint, and GDepth:Format/Near/Far, plus has the focal/focusPoints differences. Amusingly, the rdf:about tag contains "EdgarTest:BasicDepthMapRDF", which honestly makes me wonder if it was a good old case of 'prototype becoming finished product', in this case by a dev at HMD Global named Edgar, haha.

I'll attach a sample image, unfortunately sizeable (as I don't want to mess with it and risk losing the metadata), and probably look into more later too, if that helps. Thanks!

Firefox, Linux (twice - one in Kubuntu, other in Ubuntu).
In Kubuntu, it looked fine momentarily then flipped to this X image. Couldn't return it to normal with hard refresh.
In Ubuntu, this X is the default.

I came across Depthy while experimenting with the new 3D Photos in Facebook. I love it! But... if only the saved jpg would work as a 3D Photo upload on Facebook. I can get the jpg from depthy into my Portraits folder on iOS, but when I try to upload as 3D Photo to Facebook app it says “3D Photo could not be created.” Looking at the exif info it seems that Depthy uses XMP, while 3D Photos on Facebook appear to use MPF for storing the depth. Any chance you could update to make it save a jpg that is compatible with the new Facebook 3D Photos? If so I know a lot of people who will want to use it, and will gladly refer them to Depthy.

I was trying out depthy.me with one of my personal image. i have accidently shared the image instead of saving it. Now I can't able to remove it from your site and imgur.

Please enable to option to remove shared images or delete this particular image ASAP http://depthy.me/#/ip/xuYYJvZ

run docker

Running "ngtemplates:html" (ngtemplates) task
File .tmp/scripts/templates.js created.

Running "ngtemplates:uibstemplates" (ngtemplates) task
File .tmp/scripts/bs-templates.js created.

Running "ngtemplates:svg" (ngtemplates) task
File .tmp/scripts/svg-templates.js created.

Running "autoprefixer:dist" (autoprefixer) task
File ".tmp/styles/main.css" prefixed.

Running "connect:livereload" (connect) task
Started connect web server on http://0.0.0.0:9000

Running "watch" task
Waiting...

it shows waiting, curl localhost:9000 fails, change ip setting, but remote access fails, so how to run in local machine to process images in batch?
any hints ? thank you!

Hi there, I changed some stuff from DepthyViewer class to make working with PIXI 4, but DepthPerspectiveFilter works unexpected, DepthDislacementFilter works as expected

Extracted and fixed depthy files here https://codepen.io/gorelics/project/editor/AdzvKm

Unable to get a proper video to export. The video that is downloaded has no image, and plays for half a second. Gif export works fine. Is this Web app still developed?

This is due to Whammy not writing a Cues element. I submitted a pull request to fix this in Whammy at antimatter15/whammy#22, so all that remains is to update the script on the site.

Possible hack on http://depthy.me/ or lost domain...

this http://depthy.me/ is in the instructions page

Takes you to website that asks for pop up permissions to verify not robot - don't do it.

Side by Side mode instead of Anaglyph only :) For viewing in VR headset.

hi panrafal, I noticed the depthy.me website has been down for a while. i tried making an Ubuntu virtual machine to install Docker so I could run the app with the instructions in the README.MD, but it says it can't find the app image.

anyway, I downloaded this repository and I've been trying a few things to run this app locally but I couldn't do it. I even installed xampp and put the "app" folder inside htdocs, but then it says my browser is outdated (even though I'm using Chrome and it always ran fine).

also, in the README.MD there are instructions to build the app:

• Install node + npm
• Run anywhere: npm install -g grunt-cli bower
• Run in project directory: npm install and bower install
• For local development server run: grunt serve
• For deployment: grunt build

but after building, what do we do to be able to run it locally?

thanks in advance!

On both the phone and the desktop, firefox doesn't even seem to attempt to load the image that you select.

Getting 404 for a few resources.

I have an app that lets me use depth photos as a 3D wallpaper in a way that looks a lot like Depthty. Could there be a link to download photos from Depthy so that I could use them for that?

How do I install this? I copied all the files to Apache and nothing worked. The index doesn't even work locally in Chrome. Do I need to compile something? I thought it was just JS and HTML.

https://github.com/brachna/DepthyOffline

Just in case, because people seem to still use Depthy.

Ubuntu 14.04. In a previous issue, Depthy would show either an X-image or a black screen when editing. This was fixed by clicking on the version number and selecting "1" under options.
When attempting to export as a gif, these same issues arise - I either get a completely black gif or a distorted X-image as a result, depending on the browser (Firefox, Chrome, Chromium). Wondering if the aforementioned fix can be applied to exporting.

Your website at depthy.me is currently redirecting to a lot of spam and malware. Just wanted to let you know so you can hopefully recover it and get it back online. I love using it - especially now with Google's updated camera app and the depth mapping on the Pixel 4.

Does anybody have any insight as to why this might be occurring?

When I click on non blurred image I get depthmap instead of non blurred image.

Windows 8.1 x64, Chrome 53.0.2785.89
node,js 4.5.0
npm 3.10.6
bower 1.7.9
grunt-cli 1.2.0
gem (ruby) 2.6.6
latest compass

A deployed offline version tested with "grunt serve" works fine, except for video export. Whenever I try to export video the progress bar doesn't move forward.
Site version however works great.
There were a lot of deprecation warnings when building, maybe something broke since then?

P.S. Also I think build instructions should mention Ruby and Compass installation since grunt was throwing errors at me without them.

Hello...Love the app or program (i dont know how to classify) :)
I would suggest you add ability to zoom images(so we can get edges/details right).
That would be great for both pc and fones :)