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

31–40 of 63 posts

Re: Add Depth of Field to Screenshots

#31

Post by probabletrain »

refulgentis wrote: post #30
jprete wrote: post #26

Earlier quoted context omitted.

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…

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

Its real use is the few hours of fun I had making it, this is really a toy

Re: Add Depth of Field to Screenshots

#34

Post by jprete »

refulgentis wrote: post #30
jprete wrote: post #26

Earlier quoted context omitted.

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…

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

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.

Re: Add Depth of Field to Screenshots

#35

Post by AlecSchueler »

refulgentis wrote: post #30
jprete wrote: post #26

Earlier quoted context omitted.

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…

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

You can highlight certain elements of a screenshot.

Re: Add Depth of Field to Screenshots

#36

Post by derefr »

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

Re: Add Depth of Field to Screenshots

#37

Post by thih9 »

arcatech wrote: post #33
account42 wrote: post #32

> Application error: a client-side exception has occurred (see the browser console for more information). And this is why you write your websites HTML instead of javascript.

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

Re: Add Depth of Field to Screenshots

#38

Post by mistersquid »

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.

Re: Add Depth of Field to Screenshots

#39

Post by mondobe »

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.

Re: Add Depth of Field to Screenshots

#40

Post by javierbyte »

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…

Very cool! I also made a CSS based fake depth of field inspired by Shuding :)

https://depth-of-field.vercel.app/

Post reply on HN