Ich habe das vor ein paar Tagen gebaut.
Ursprünglich wollte ich damit Tiefenschärfe in CSS „faken“; das Demo-Video und die Inspiration von shuding_ finden sich im vorletzten Tweet unten auf der Website.
Gestern Abend fiel mir dann aber ein, dass es ThreeJS gibt, also habe ich es mit react-three-fiber neu geschrieben. Ich habe es zum ersten Mal benutzt und war beeindruckt, wie ergonomisch es ist.
Nicht dokumentiert, aber per Rechtsklick-Ziehen kann man die Ansicht verschieben.
Cool. Ich habe mich auch von Shuding inspirieren lassen und eine CSS-basierte Fake-Tiefenschärfe gebaut :) https://depth-of-field.vercel.app/
Mir gefällt die Interaktivität der UI. Gut gemacht.
Habe auch das undokumentierte Feature gefunden. Etwas seltsam, dass Verschieben unter macOS mit Ctrl+Linksklick nicht funktioniert.
Ich hatte erwartet, dass es mit dem OS integriert ist, um 3D-Screenshots in einer Phase vor dem Window Compositor aufzunehmen und jedem Fenster eine Z-Tiefe zu geben, sodass sie über dem Desktop und übereinander schweben.
So ein „3D-Screenshot“ würde in orthografischer Projektion genauso aussehen wie ein normaler Screenshot, aber sobald man einen Tiefenschärfe-Effekt hinzufügt, würde der Unterschied sichtbar.
Natürlich könnte man ihn auch mit anderen Projektionen betrachten, ihn wie hier im 3D-Raum kippen, Nebel auf weiter entfernte Fenster anwenden oder Fenster mit Punktlichtquellen echte Schatten aufeinander werfen lassen. Halbtransparente Bereiche könnten mehr Licht durchlassen; idealerweise würde ein in HTML5 einbettbarer Viewer all das unterstützen.
Für dieses Format und so einen Viewer scheint es einen ziemlich offensichtlichen Anwendungsfall zu geben: tiefengemapptes AR-Fenster-Layout in visionOS als statischen, „umschaubaren“ Snapshot nachzubilden. Wenn man Fenstern in einem 2D-Desktop-OS beliebige Tiefenkarten zuweisen könnte, wäre das ein Bonus.
Das Nächste, was ich dazu gesehen habe, ist der UI-Debug-Viewer von Xcode. Man kann alle UI-Elemente wie eine Explosionszeichnung im 3D-Raum drehen.
Allerdings gibt es weder Beleuchtung noch Schatten, und es ist auf Apps beschränkt, für die man Debug-Zugriff hat.
Auch das Amazon Fire Phone hat, glaube ich, mehrere nach vorn gerichtete Eye-Tracking-Kameras sowie Gyro- und Beschleunigungssensor genutzt, um die Phone-UI zu bewegen und in Echtzeit eine 3D-Ansicht mit Parallaxe zu simulieren. In der alten Tab-Ansicht von Mobile Safari bewegten sich die Tabs ebenfalls je nach Geräteausrichtung.
Irgendwann möchte ich eine Global-Illumination-UI sehen. Selbst wenn sie unpraktisch ist, wäre es schön, Windows-Renderings des Microsoft-Design-Teams in Echtzeit zu sehen. Das wäre massive Energieverschwendung, aber weich schattierte, path-traced Schatten wären toll.
Das nähert sich fast der Motivation von VisionOS an, also einem auf 3D-Raum ausgerichteten Betriebssystem.
Ich habe in letzter Zeit oft gedacht, dass Screenshots nicht verschwommen genug sind; passt also perfekt.
Eine begrenzte Tiefenschärfe ist in der Fotografie sehr nützlich, um bestimmte Elemente hervorzuheben, und wird deshalb bei Porträtfotos fast immer eingesetzt.
Außerdem macht man Porträts idealerweise mit einem Teleobjektiv aus etwas Entfernung, weil sie nicht das Gesicht zeigen, das man tatsächlich sieht, sondern das Gesicht, an das sich Menschen erinnern. Der Grund, warum Korrektur nötig ist: Bei gleicher Objektivkonfiguration ist die Tiefenschärfe aus der Nähe viel geringer, aus größerer Entfernung dagegen viel größer.
Das ist unnötig sarkastisch. Für Screenshots als Anhang zu Bug-Reports würde ich solche Tiefenschärfe-Screenshots nicht verwenden wollen.
Aber als visueller Effekt auf Marketing-Websites, um einen bestimmten Teil eines Screenshots hervorzuheben und die gewünschte Aussage zu vermitteln, sieht es gut aus.
Genau, machen wir Screenshots erst unscharf und dann mit HiDPI-Displays wieder scharf /s
Gibt es ein ähnliches Tool, das aus einem Bündel von Screenshots und Captions eine Video-Montage mit Tiefenschärfe und langsamer Rotation erstellt?
Um die Frage zu beantworten, die in anderen Kommentaren auftaucht: Das ist mit three.js gebaut.
Man kann es sich als 3D-Szene vorstellen, in der ein Bild auf eine 2D-Ebene gerendert wird, und die Kamera wendet auf Teile davon eine bestimmte Gaußsche Unschärfe an. Für Zoom und Rotation des Bildes werden Orbit Controls verwendet.
Ist das nur eine schicke Umschreibung dafür, dass man in einem Screenshot „alles andere unscharf macht“? Persönlich schneide ich unnötige Inhalte lieber weg.
Wenn man in einer komplexen UI zeigen will, wohin man navigieren muss, kann es nützlich sein, den Rest der UI im Screenshot sichtbar zu lassen.
Zuschneiden entfernt Navigationshinweise, aber alles scharf zu lassen kann es so schwer lesbar machen wie die echte UI; Unschärfe kann daher ein guter Kompromiss sein.
Sieht interessant aus. Anfangs dachte ich, dass der Teil des Screenshots, der am weitesten von mir entfernt ist, unscharf wird und der nächstgelegene Teil im Fokus ist, aber so funktioniert es tatsächlich nicht.
Wenn man wichtige Bereiche markieren kann, ließe es sich nutzen, um den Fokus auf bestimmte Teile eines Screenshots zu legen.
Wenn man auf einen Teil des Bildes klickt, wird darauf fokussiert.
Eine geringe Tiefenschärfe wird in der Fotografie und gelegentlich im Film genau zu diesem Zweck eingesetzt: die Aufmerksamkeit auf ein bestimmtes Element zu lenken.
Nach der Demo bin ich mir allerdings nicht sicher, wofür ich das verwenden wollen würde.
Als Hintergrund für so etwas wie YouTube-Video-Thumbnails könnte das interessant sein.
Für die Vermittlung tatsächlicher Informationen würde ich es nicht verwenden wollen, aber es vermittelt offenbar noch genug, um zu erkennen, welche Anwendung genutzt wird.
Bitte unterstützt das Einfügen von Bildern.
Eingabefelder, bei denen man eine Datei aus dem Dateisystem auswählen muss, statt den Paste-Buffer zu nutzen, erhöhen die gefühlte Reibung um etwa das Fünffache. Das gilt für jeden Bild-Upload-Button, den ich bisher benutzt habe.
1 Kommentare
Meinungen auf Hacker News
Ich habe das vor ein paar Tagen gebaut.
Ursprünglich wollte ich damit Tiefenschärfe in CSS „faken“; das Demo-Video und die Inspiration von shuding_ finden sich im vorletzten Tweet unten auf der Website.
Gestern Abend fiel mir dann aber ein, dass es ThreeJS gibt, also habe ich es mit react-three-fiber neu geschrieben. Ich habe es zum ersten Mal benutzt und war beeindruckt, wie ergonomisch es ist.
Nicht dokumentiert, aber per Rechtsklick-Ziehen kann man die Ansicht verschieben.
https://depth-of-field.vercel.app/
Habe auch das undokumentierte Feature gefunden. Etwas seltsam, dass Verschieben unter macOS mit Ctrl+Linksklick nicht funktioniert.
Ich hatte erwartet, dass es mit dem OS integriert ist, um 3D-Screenshots in einer Phase vor dem Window Compositor aufzunehmen und jedem Fenster eine Z-Tiefe zu geben, sodass sie über dem Desktop und übereinander schweben.
So ein „3D-Screenshot“ würde in orthografischer Projektion genauso aussehen wie ein normaler Screenshot, aber sobald man einen Tiefenschärfe-Effekt hinzufügt, würde der Unterschied sichtbar.
Natürlich könnte man ihn auch mit anderen Projektionen betrachten, ihn wie hier im 3D-Raum kippen, Nebel auf weiter entfernte Fenster anwenden oder Fenster mit Punktlichtquellen echte Schatten aufeinander werfen lassen. Halbtransparente Bereiche könnten mehr Licht durchlassen; idealerweise würde ein in HTML5 einbettbarer Viewer all das unterstützen.
Für dieses Format und so einen Viewer scheint es einen ziemlich offensichtlichen Anwendungsfall zu geben: tiefengemapptes AR-Fenster-Layout in visionOS als statischen, „umschaubaren“ Snapshot nachzubilden. Wenn man Fenstern in einem 2D-Desktop-OS beliebige Tiefenkarten zuweisen könnte, wäre das ein Bonus.
Allerdings gibt es weder Beleuchtung noch Schatten, und es ist auf Apps beschränkt, für die man Debug-Zugriff hat.
Auch das Amazon Fire Phone hat, glaube ich, mehrere nach vorn gerichtete Eye-Tracking-Kameras sowie Gyro- und Beschleunigungssensor genutzt, um die Phone-UI zu bewegen und in Echtzeit eine 3D-Ansicht mit Parallaxe zu simulieren. In der alten Tab-Ansicht von Mobile Safari bewegten sich die Tabs ebenfalls je nach Geräteausrichtung.
Irgendwann möchte ich eine Global-Illumination-UI sehen. Selbst wenn sie unpraktisch ist, wäre es schön, Windows-Renderings des Microsoft-Design-Teams in Echtzeit zu sehen. Das wäre massive Energieverschwendung, aber weich schattierte, path-traced Schatten wären toll.
Ich habe in letzter Zeit oft gedacht, dass Screenshots nicht verschwommen genug sind; passt also perfekt.
Außerdem macht man Porträts idealerweise mit einem Teleobjektiv aus etwas Entfernung, weil sie nicht das Gesicht zeigen, das man tatsächlich sieht, sondern das Gesicht, an das sich Menschen erinnern. Der Grund, warum Korrektur nötig ist: Bei gleicher Objektivkonfiguration ist die Tiefenschärfe aus der Nähe viel geringer, aus größerer Entfernung dagegen viel größer.
Aber als visueller Effekt auf Marketing-Websites, um einen bestimmten Teil eines Screenshots hervorzuheben und die gewünschte Aussage zu vermitteln, sieht es gut aus.
Sieht aus wie das frühere Show HN Screenstab [0].
[0] https://www.screenstab.com/editor/
[1] https://news.ycombinator.com/item?id=34729849
Um die Frage zu beantworten, die in anderen Kommentaren auftaucht: Das ist mit three.js gebaut.
Man kann es sich als 3D-Szene vorstellen, in der ein Bild auf eine 2D-Ebene gerendert wird, und die Kamera wendet auf Teile davon eine bestimmte Gaußsche Unschärfe an. Für Zoom und Rotation des Bildes werden Orbit Controls verwendet.
Ist das nur eine schicke Umschreibung dafür, dass man in einem Screenshot „alles andere unscharf macht“? Persönlich schneide ich unnötige Inhalte lieber weg.
Zuschneiden entfernt Navigationshinweise, aber alles scharf zu lassen kann es so schwer lesbar machen wie die echte UI; Unschärfe kann daher ein guter Kompromiss sein.
Sieht interessant aus. Anfangs dachte ich, dass der Teil des Screenshots, der am weitesten von mir entfernt ist, unscharf wird und der nächstgelegene Teil im Fokus ist, aber so funktioniert es tatsächlich nicht.
Wenn man wichtige Bereiche markieren kann, ließe es sich nutzen, um den Fokus auf bestimmte Teile eines Screenshots zu legen.
Nach der Demo bin ich mir allerdings nicht sicher, wofür ich das verwenden wollen würde.
Man könnte noch RGB-Pixel hinzufügen, damit es realistischer aussieht, so wie ich es vor ein paar Jahren in Blender ausprobiert habe.
https://blenderartists.org/t/rgb-display-shader/684533
Als Hintergrund für so etwas wie YouTube-Video-Thumbnails könnte das interessant sein.
Für die Vermittlung tatsächlicher Informationen würde ich es nicht verwenden wollen, aber es vermittelt offenbar noch genug, um zu erkennen, welche Anwendung genutzt wird.
Bitte unterstützt das Einfügen von Bildern.
Eingabefelder, bei denen man eine Datei aus dem Dateisystem auswählen muss, statt den Paste-Buffer zu nutzen, erhöhen die gefühlte Reibung um etwa das Fünffache. Das gilt für jeden Bild-Upload-Button, den ich bisher benutzt habe.