I initially made this to experiment with 'faking' depth of field in CSS (check out my penultimate tweet for the demo vid and inspiration from shuding_, link at the bottom of the site).
But last night I remembered that ThreeJS exists, so rewrote it using react-three-fiber. This was my first time playing around with it and I'm super impressed, it's incredibly ergonomic.
Right-click to pan is how a lot of video games do it, if not left-click drags. Needing to also use a keyboard key at the same time wouldn't very ergonomic.
Here I was hoping this would be something that works with the OS to take pre-window-compositor “3D screenshots” of a desktop, and then assigns the windows Z depths so that they’re floating above the desktop + each-other. Looking at the rendering of such a “3D screenshot” (in orthogonal projection) would look exactly like a regular screenshot… until you added a depth-of-field effect.
But, of course, you could also look at it in other projections; tilting it around in 3D space (as done here); applying fog to shadow “distant” windows; lighting the scene from a point-source so as to make the windows cast real shadows on one-another (with more light let through translucent areas!); etc. I would imagine that the (ideally HTML5 embeddable) viewer for this “3D screenshot” format would do all those things.
(I do hope someone does try creating such a “3D screenshot” format and viewer, as IMHO it would have a fairly-obvious use-case: reproducing static “look-around-able” snapshots of the already-depth-mapped AR window layouts in visionOS. Being able to tack arbitrary depth-maps onto windows from a 2D desktop OS would just be a bonus.)
The closest thing I have seen to this (which isn't that close) is the UI debug viewer in Xcode. You can get an exploded-view diagram of all the UI elements that you can rotate in 3D space. No lighting or shadows though and its limited to apps you have debug access to.
I think the Amazon Fire phone also tried something similar in real time with several front facing eye tracking cameras and the gyro+accelerometer to shift the phone UI and simulate a 3D view with parallax. The old mobile Safari tab view also used to shift the tabs based on the phone's orientation.
I would love to see a "globally illuminated" UI someday, even if it's impractical. Something like all those Windows renders the Microsoft Design team put out, but in real time. Totally impractical and a poor use of electricity, but it would be cool to have path traced, soft drop-shadows.
>I would love to see a "globally illuminated" UI someday, even if it's impractical
Apple patented a ton of stuff for this probably a decade ago. It seemed at some point they were going to start procedurally rendering aqua materials and the like using recipes for lighting that could all be dynamic.
Limiting depth of field is a very useful way to emphasize specific elements of a photograph and for that reason it's almost always used for portraits.
It also compensates for portrait photos being best taken from a distance using a telephoto lens. The reason those are best is because it captures the face people remember instead of the face they actually see. The reason compensation is needed is because the same lens configuration will get a much smaller depth-of-field up close but a much higher one at a distance.
Difference being, the face is the content, the background is noise. Here, the screenshot is the content. Ex. The only physical feature of my face i like is my eyes. Yet, it'd be weird if I depth of field'd everything but my eyes.
I'm sure this has uses but it's hard to argue it does from fundamentals of photography
There are lots of cases, especially in say marketing images, where the entire screenshot is not the content. You may want to highlight a specific bit of UI while still keeping the general background context instead of cropping into a small image.
This lets you click a portion of the screenshot to bring into focus.
At the end of the day it's a fun toy web app, but I don't think the general concept is useless.
I hadn't actually seen the demo when I commented! I'd assumed it was using an AI model to estimate distance from camera of the elements of a photograph and then reproducing a shallower depth-of-field. So my comment isn't all that relevant.
Depth of Field being visible is an artifact of 2D screens & prints. Our eyes do have depth of field, but when we look straight at something they very quickly refocus onto that thing, so it's often very hard to perceive. With a static photograph or picture on a screen we can't refocus on what we're looking at within the picture automatically.
It's not that our eyes don't have depth of field, it's that they operate differently than fixed photos or pre-set DoF effects in a game.
Blur is completely natural to human vision, to any kind of vision. Look far away while bringing your hand close. Blur. Now look at your hand. Everything else goes blurry. You can even unfocus your eyes while looking at something. Now everything's blurry.
This is unnecessarily snarky. I would hate to use one of these depth-of-field screenshots for, say, an attachment to a bug report.
But it looks like a great visual effect to use on a marketing site, especially to highlight a specific part of a screenshot to get across whatever you want to emphasize.
Just to answer some questions I'm seeing from other comments, this is built with three.js. Think of it as a 3d scene with an image rendered on a 2d plane and the camera has certain gaussian blur applied to a section of it. He's using orbit controls for the zoom in/out and for the ability to pivot the image.
This is just a fancy way of saying "blur out everything else" in the screenshot? Personally I prefer to crop the unnecessary content out of the screenshot.
> This is just a fancy way of saying "blur out everything else" in the screenshot? Personally I prefer to crop the unnecessary content out of the screenshot.
Other threads have pointed out that it might be useful for a screenshot to be able to show somebody where to navigate in complicated UI, without cropping out the rest of the UI (and so removing the navigational cues) but without making the screenshot as hard to navigate as the UI itself.
Looks interesting. In the beginning I thought it would blur the part of the screenshot farthest away from you and keep the closest thing in focus. But that's not how it works.
I guess it could be useful for focusing on a particular part of the screenshot if you one could mark what the important part is.
Shallow depth of field is used in photography (and movies, sometimes) for exactly the purpose of focusing viewer attention on a specific element or elements.
EDIT: But now that I've looked at the demo...I am not sure what I would want this for.
This would be fun to use in the background of the thumbnail for a YouTube video (or something like that), although I certainly wouldn't want to see it used to convey actual information. It gets enough across, I think, to figure out what application is being used.
Please please please support pasting images! Any form field where I have to select a file from my filesystem instead of using my paste buffer increases the friction of using it like, 5x. (This applies to every image upload button I've ever used)
Very cool! Did you create this? What was the motivation? I'm just wondering if this is a common enough task that it's easier than doing it in Photoshop
You typed this just as I was posting my own response. Yes, it does work! I found out that using the right mouse button does the panning. Is there another method that you found?
Yes, I was trying it on a device with a touchscreen (an iPhone) and found that it was possible to pan with the usual touch gesture (moving two fingers together).
This is super cool! Huge upgrade to my product screenshots. Wondering if you're offering this as a react component - something I can embbed with a lead magnet or on a site.
Please don't use this. It might look nice, but as a user and potential client or customer, this is reducing the utility of your screenshots.
_You_ know what your screens look like, so you might enjoy seeing them blurred and tilted. But _I_ don't know, that's the information that I would be trying to get.
Turing completeness is about what computations can be expressed, not what user interactions can be performed. The lambda calculus is Turing complete, but, if I whip up a lambda calculus interpreter and don't give it a print statement, then you'll never know anything about the computations it's performing.
I initially made this to experiment with 'faking' depth of field in CSS (check out my penultimate tweet for the demo vid and inspiration from shuding_, link at the bottom of the site).
But last night I remembered that ThreeJS exists, so rewrote it using react-three-fiber. This was my first time playing around with it and I'm super impressed, it's incredibly ergonomic.
Edit: not documented, but right-click drag to pan
https://depth-of-field.vercel.app/
> Edit: not documented, but right-click drag to pan
Confirming undocumented feature. Scratching my head why ctrl-left-click on macOS doesn't enable panning, too.
Agreed. But maybe better awkward than non-existent? Otherwise, users with no right-click can’t pan.
Didn’t realize ctrl-click and right-click are not always functional equivalents.
"here's a nickle, kid. buy yourself a better computer."
But, of course, you could also look at it in other projections; tilting it around in 3D space (as done here); applying fog to shadow “distant” windows; lighting the scene from a point-source so as to make the windows cast real shadows on one-another (with more light let through translucent areas!); etc. I would imagine that the (ideally HTML5 embeddable) viewer for this “3D screenshot” format would do all those things.
(I do hope someone does try creating such a “3D screenshot” format and viewer, as IMHO it would have a fairly-obvious use-case: reproducing static “look-around-able” snapshots of the already-depth-mapped AR window layouts in visionOS. Being able to tack arbitrary depth-maps onto windows from a 2D desktop OS would just be a bonus.)
I think the Amazon Fire phone also tried something similar in real time with several front facing eye tracking cameras and the gyro+accelerometer to shift the phone UI and simulate a 3D view with parallax. The old mobile Safari tab view also used to shift the tabs based on the phone's orientation.
I would love to see a "globally illuminated" UI someday, even if it's impractical. Something like all those Windows renders the Microsoft Design team put out, but in real time. Totally impractical and a poor use of electricity, but it would be cool to have path traced, soft drop-shadows.
Apple patented a ton of stuff for this probably a decade ago. It seemed at some point they were going to start procedurally rendering aqua materials and the like using recipes for lighting that could all be dynamic.
Presuming some of it made it into VisionOS
It also compensates for portrait photos being best taken from a distance using a telephoto lens. The reason those are best is because it captures the face people remember instead of the face they actually see. The reason compensation is needed is because the same lens configuration will get a much smaller depth-of-field up close but a much higher one at a distance.
I'm sure this has uses but it's hard to argue it does from fundamentals of photography
This lets you click a portion of the screenshot to bring into focus.
At the end of the day it's a fun toy web app, but I don't think the general concept is useless.
Things like the modern Link's Awakening would have me projectile vomiting if I tried to play it.
There should never be blur, ever.
It's not that our eyes don't have depth of field, it's that they operate differently than fixed photos or pre-set DoF effects in a game.
But it looks like a great visual effect to use on a marketing site, especially to highlight a specific part of a screenshot to get across whatever you want to emphasize.
You think? I thought it was just a funny quip.
It's a joke, chill
[0] https://www.screenstab.com/editor/ [1] https://news.ycombinator.com/item?id=34729849
Other threads have pointed out that it might be useful for a screenshot to be able to show somebody where to navigate in complicated UI, without cropping out the rest of the UI (and so removing the navigational cues) but without making the screenshot as hard to navigate as the UI itself.
I guess it could be useful for focusing on a particular part of the screenshot if you one could mark what the important part is.
EDIT: But now that I've looked at the demo...I am not sure what I would want this for.
_You_ know what your screens look like, so you might enjoy seeing them blurred and tilted. But _I_ don't know, that's the information that I would be trying to get.
And this is why you write your websites HTML instead of javascript.
Technically html + css + user interaction can be turing complete: https://github.com/brandondong/css-turing-machine
Turing completeness is about what computations can be expressed, not what user interactions can be performed. The lambda calculus is Turing complete, but, if I whip up a lambda calculus interpreter and don't give it a print statement, then you'll never know anything about the computations it's performing.