Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

Add Depth of Field to Screenshots

blurmatic.com

Post reply on HN
Print view View original

51–60 of 63 posts

Re: Add Depth of Field to Screenshots

#51

Post by lupusreal »

mistersquid wrote: post #38
probabletrain wrote: post #12

Oh hey, I made this a couple of days ago! 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: n…

Love the interactivity of the UI. Nicely done! > 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.

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.

Re: Add Depth of Field to Screenshots

#52

Post by hn_throwaway_99 »

tempaway3345751 wrote: post #24

Thats great I've often thought that screenshots aren't blurry enough these days

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.

Re: Add Depth of Field to Screenshots

#53

Post by kleiba »

hn_throwaway_99 wrote: post #52
tempaway3345751 wrote: post #24

Thats great I've often thought that screenshots aren't blurry enough these days

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.

> This is unnecessarily snarky.

You think? I thought it was just a funny quip.

Re: Add Depth of Field to Screenshots

#54

Post by mistersquid »

lupusreal wrote: post #51
mistersquid wrote: post #38

Earlier quoted context omitted.

Love the interactivity of the UI. Nicely done! > 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.

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.

> Needing to also use a keyboard key at the same time wouldn't very ergonomic.

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.

Re: Add Depth of Field to Screenshots

#55

Post by whywhywhywhy »

Pulcinella wrote: post #42
derefr wrote: post #36

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 loo…

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 sh…

>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.

Presuming some of it made it into VisionOS

Re: Add Depth of Field to Screenshots

#56

Post by mparnisari »

hn_throwaway_99 wrote: post #52
tempaway3345751 wrote: post #24

Thats great I've often thought that screenshots aren't blurry enough these days

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.

> This is unnecessarily snarky.

It's a joke, chill

Re: Add Depth of Field to Screenshots

#57

Post by JadeNB »

jandrese wrote: post #6

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.

Re: Add Depth of Field to Screenshots

#58

Post by JadeNB »

thih9 wrote: post #37
arcatech wrote: post #33

Earlier quoted context omitted.

But you can’t do this in HTML…

I hope someone takes this as a challenge. Technically html + css + user interaction can be turing complete: https://github.com/brandondong/css-turing-machine

> 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.

Re: Add Depth of Field to Screenshots

#59

Post by jhaenchen »

derefr wrote: post #36

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 loo…

You're getting very close to the motivation behind VisionOS, aka a 3D spatially oriented operating system.
Post reply on HN