by probabletrain on 4/19/24, 2:15 PM
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: not documented, but right-click drag to pan
by derefr on 4/19/24, 3:01 PM
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.)
by tempaway3345751 on 4/19/24, 2:29 PM
Thats great I've often thought that screenshots aren't blurry enough these days
by mprovost on 4/19/24, 2:09 PM
by daxaxelrod on 4/19/24, 2:33 PM
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.
by jandrese on 4/19/24, 2:07 PM
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.
by mastermedo on 4/19/24, 2:07 PM
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.
by ei23 on 4/20/24, 12:10 AM
by mondobe on 4/19/24, 3:13 PM
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.
by nightpool on 4/19/24, 3:26 PM
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)
by splatzone on 4/19/24, 1:59 PM
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
by lacoolj on 4/20/24, 12:18 AM
This is absolutely awesome. I wonder if this is the same concept that phones use to focus/blur elements of the photo in post
by mdrzn on 4/19/24, 2:01 PM
Fun to use, not sure where I would post a tilted screenshot with a grey background. Maybe if you can export it as .png?
by aquir on 4/19/24, 2:22 PM
I need this to be integrated w/ Shottr! That would be very cool!
Is there an API for this?
by DHPersonal on 4/19/24, 2:06 PM
Oh, and zooming works, too!
by StephTsimis on 4/19/24, 2:19 PM
Very cool!
by poulpy123 on 4/19/24, 2:41 PM
But why ?
by Shindi on 4/19/24, 2:08 PM
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.
by siadhal on 4/19/24, 2:24 PM
Holy f*ck! Is this AI?
by account42 on 4/19/24, 2:51 PM
> 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.