Oh hey, I made this a couple of days ago!<p>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).<p>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.<p>Edit: not documented, but right-click drag to pan
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.<p>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.<p>(I do hope someone <i>does</i> 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.)
Looks like Screenstab [0] which was a previous Show HN [1].<p>[0] <a href="https://www.screenstab.com/editor/" rel="nofollow">https://www.screenstab.com/editor/</a>
[1] <a href="https://news.ycombinator.com/item?id=34729849">https://news.ycombinator.com/item?id=34729849</a>
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.
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.<p>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.
You may add some RGB pixels for even more realism like i have done in Blender some years ago:
<a href="https://blenderartists.org/t/rgb-display-shader/684533" rel="nofollow">https://blenderartists.org/t/rgb-display-shader/684533</a>
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
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.
> Application error: a client-side exception has occurred (see the browser console for more information).<p>And this is why you write your websites HTML instead of javascript.