J’ai fait ça il y a quelques jours
Au départ, je voulais essayer de « simuler » la profondeur de champ en CSS ; la vidéo de démo et l’inspiration venue de shuding_ se trouvent dans l’avant-dernier tweet des liens en bas du site
Mais hier soir, je me suis souvenu de l’existence de ThreeJS, alors je l’ai réécrit avec react-three-fiber. C’était ma première utilisation, et j’ai été impressionné par son ergonomie
Ce n’est pas documenté, mais on peut déplacer la vue avec un glisser au clic droit
J’aime l’interactivité de l’UI. Beau travail
J’ai aussi repéré la fonctionnalité non documentée. Je trouve juste un peu curieux que ctrl+clic gauche ne permette pas aussi de se déplacer sur macOS
Je m’attendais à une intégration avec l’OS pour prendre une capture d’écran 3D avant l’étape du compositeur de fenêtres, en donnant à chaque fenêtre une profondeur Z, comme si elles flottaient au-dessus du bureau et les unes des autres
Une telle « capture d’écran 3D », vue en projection orthographique, ressemblerait exactement à une capture classique, puis la différence apparaîtrait dès qu’on appliquerait un effet de profondeur de champ
Bien sûr, on pourrait aussi la voir avec une autre projection, l’incliner dans l’espace 3D comme ici, appliquer du brouillard aux fenêtres lointaines, ou utiliser une source ponctuelle pour que les fenêtres projettent de vraies ombres les unes sur les autres. Les zones translucides pourraient laisser passer davantage de lumière, et idéalement un visualiseur intégrable en HTML5 gérerait tout cela
Ce format et ce visualiseur auraient un usage assez évident pour recréer, sous forme d’instantané statique « explorable », la disposition des fenêtres AR avec carte de profondeur de visionOS. Et si l’on pouvait associer des cartes de profondeur arbitraires aux fenêtres d’un OS de bureau 2D, ce serait un bonus
Ce que j’ai vu de plus proche, c’est le visualiseur de débogage d’UI de Xcode. On peut faire pivoter tous les éléments d’UI dans l’espace 3D, comme une vue éclatée
Il n’y a toutefois ni éclairage ni ombres, et c’est limité aux apps auxquelles on a un accès de débogage
L’Amazon Fire Phone, avec plusieurs caméras frontales de suivi des yeux et un gyroscope + accéléromètre, essayait aussi, il me semble, de déplacer l’UI du téléphone et de simuler en temps réel une vue 3D avec parallaxe. Dans l’ancien affichage des onglets de Safari mobile aussi, les onglets bougeaient selon l’orientation de l’appareil
J’aimerais voir un jour une UI à illumination globale. Même si ce n’est pas pratique, ce serait chouette si cela donnait l’impression de voir en temps réel les rendus Windows que produisait l’équipe Microsoft Design. Ce serait un énorme gaspillage d’énergie, mais des ombres douces en path tracing seraient superbes
On se rapproche presque de la motivation de VisionOS, c’est-à-dire d’un système d’exploitation orienté espace 3D
Je me disais souvent ces temps-ci que les captures d’écran n’étaient pas assez floues ; parfait
Limiter la profondeur de champ est très utile en photographie pour mettre en avant certains éléments, et c’est pour cela qu’on l’utilise presque toujours en portrait
Par ailleurs, il est préférable de prendre les portraits d’assez loin avec un téléobjectif, car cela capture le visage dont les gens se souviennent, plutôt que le visage tel qu’on le voit réellement. Une correction est nécessaire parce qu’à configuration d’objectif identique, photographier de près donne une profondeur de champ beaucoup plus faible, tandis que photographier de loin la rend beaucoup plus grande
C’est inutilement sarcastique. Je n’aimerais pas utiliser ce genre de capture avec profondeur de champ en pièce jointe d’un rapport de bug
Mais comme effet visuel sur un site marketing, pour attirer l’attention sur une partie précise d’une capture d’écran et faire passer un message, ça me paraît bien
Exactement, rendons d’abord la capture floue, puis rendons-la à nouveau nette avec un écran HiDPI /s
Existe-t-il un outil similaire qui crée un montage vidéo avec profondeur de champ et rotation lente à partir d’un ensemble de captures d’écran et de légendes ?
Pour répondre à la question vue dans d’autres commentaires, c’est fait avec three.js
On peut le voir comme une scène 3D où l’image est rendue sur un plan 2D, et où la caméra applique un flou gaussien spécifique à certaines parties. Les contrôles orbit sont utilisés pour le zoom/dézoom et la rotation de l’image
Est-ce simplement une façon élégante de dire « flouter tout le reste » dans une capture d’écran ? Personnellement, je préfère recadrer ce qui est inutile
Dans une UI complexe, il peut être utile que la capture conserve le reste de l’interface pour montrer où aller
Le recadrage supprime les repères de navigation, mais tout garder net peut rendre l’image aussi difficile à lire que l’UI réelle ; le flou peut donc être un compromis
Ça a l’air intéressant. Au début, je pensais que les parties les plus éloignées de moi dans la capture seraient floutées et que les plus proches seraient nettes, mais ce n’est pas comme ça que ça fonctionne
Si l’on pouvait indiquer la partie importante, cela pourrait servir à mettre le focus sur une zone précise d’une capture d’écran
Cliquer sur une partie de l’image fait la mise au point dessus
Une faible profondeur de champ sert précisément à cela en photographie, et parfois au cinéma : attirer l’attention du spectateur sur un élément particulier
Cela dit, après avoir vu la démo, je ne sais pas trop à quoi j’aurais envie de l’utiliser
Ce serait amusant à utiliser en arrière-plan pour des choses comme des miniatures de vidéos YouTube
Je ne voudrais pas m’en servir pour transmettre de vraies informations, mais on distingue quand même assez bien quelle application est utilisée
J’aimerais vraiment que le collage d’image soit pris en charge
Les champs d’entrée qui obligent à choisir un fichier dans le système de fichiers au lieu d’utiliser le presse-papiers ajoutent, à mon ressenti, environ 5 fois plus de friction. C’est valable pour tous les boutons d’upload d’image que j’ai utilisés jusqu’ici
1 commentaires
Avis sur Hacker News
J’ai fait ça il y a quelques jours
Au départ, je voulais essayer de « simuler » la profondeur de champ en CSS ; la vidéo de démo et l’inspiration venue de shuding_ se trouvent dans l’avant-dernier tweet des liens en bas du site
Mais hier soir, je me suis souvenu de l’existence de ThreeJS, alors je l’ai réécrit avec react-three-fiber. C’était ma première utilisation, et j’ai été impressionné par son ergonomie
Ce n’est pas documenté, mais on peut déplacer la vue avec un glisser au clic droit
https://depth-of-field.vercel.app/
J’ai aussi repéré la fonctionnalité non documentée. Je trouve juste un peu curieux que ctrl+clic gauche ne permette pas aussi de se déplacer sur macOS
Je m’attendais à une intégration avec l’OS pour prendre une capture d’écran 3D avant l’étape du compositeur de fenêtres, en donnant à chaque fenêtre une profondeur Z, comme si elles flottaient au-dessus du bureau et les unes des autres
Une telle « capture d’écran 3D », vue en projection orthographique, ressemblerait exactement à une capture classique, puis la différence apparaîtrait dès qu’on appliquerait un effet de profondeur de champ
Bien sûr, on pourrait aussi la voir avec une autre projection, l’incliner dans l’espace 3D comme ici, appliquer du brouillard aux fenêtres lointaines, ou utiliser une source ponctuelle pour que les fenêtres projettent de vraies ombres les unes sur les autres. Les zones translucides pourraient laisser passer davantage de lumière, et idéalement un visualiseur intégrable en HTML5 gérerait tout cela
Ce format et ce visualiseur auraient un usage assez évident pour recréer, sous forme d’instantané statique « explorable », la disposition des fenêtres AR avec carte de profondeur de visionOS. Et si l’on pouvait associer des cartes de profondeur arbitraires aux fenêtres d’un OS de bureau 2D, ce serait un bonus
Il n’y a toutefois ni éclairage ni ombres, et c’est limité aux apps auxquelles on a un accès de débogage
L’Amazon Fire Phone, avec plusieurs caméras frontales de suivi des yeux et un gyroscope + accéléromètre, essayait aussi, il me semble, de déplacer l’UI du téléphone et de simuler en temps réel une vue 3D avec parallaxe. Dans l’ancien affichage des onglets de Safari mobile aussi, les onglets bougeaient selon l’orientation de l’appareil
J’aimerais voir un jour une UI à illumination globale. Même si ce n’est pas pratique, ce serait chouette si cela donnait l’impression de voir en temps réel les rendus Windows que produisait l’équipe Microsoft Design. Ce serait un énorme gaspillage d’énergie, mais des ombres douces en path tracing seraient superbes
Je me disais souvent ces temps-ci que les captures d’écran n’étaient pas assez floues ; parfait
Par ailleurs, il est préférable de prendre les portraits d’assez loin avec un téléobjectif, car cela capture le visage dont les gens se souviennent, plutôt que le visage tel qu’on le voit réellement. Une correction est nécessaire parce qu’à configuration d’objectif identique, photographier de près donne une profondeur de champ beaucoup plus faible, tandis que photographier de loin la rend beaucoup plus grande
Mais comme effet visuel sur un site marketing, pour attirer l’attention sur une partie précise d’une capture d’écran et faire passer un message, ça me paraît bien
Ça ressemble à Screenstab [0], un ancien Show HN
[0] https://www.screenstab.com/editor/
[1] https://news.ycombinator.com/item?id=34729849
Pour répondre à la question vue dans d’autres commentaires, c’est fait avec three.js
On peut le voir comme une scène 3D où l’image est rendue sur un plan 2D, et où la caméra applique un flou gaussien spécifique à certaines parties. Les contrôles orbit sont utilisés pour le zoom/dézoom et la rotation de l’image
Est-ce simplement une façon élégante de dire « flouter tout le reste » dans une capture d’écran ? Personnellement, je préfère recadrer ce qui est inutile
Le recadrage supprime les repères de navigation, mais tout garder net peut rendre l’image aussi difficile à lire que l’UI réelle ; le flou peut donc être un compromis
Ça a l’air intéressant. Au début, je pensais que les parties les plus éloignées de moi dans la capture seraient floutées et que les plus proches seraient nettes, mais ce n’est pas comme ça que ça fonctionne
Si l’on pouvait indiquer la partie importante, cela pourrait servir à mettre le focus sur une zone précise d’une capture d’écran
Cela dit, après avoir vu la démo, je ne sais pas trop à quoi j’aurais envie de l’utiliser
Comme je l’avais fait dans Blender il y a quelques années, ce serait bien d’ajouter des pixels RGB pour un rendu plus réaliste
https://blenderartists.org/t/rgb-display-shader/684533
Ce serait amusant à utiliser en arrière-plan pour des choses comme des miniatures de vidéos YouTube
Je ne voudrais pas m’en servir pour transmettre de vraies informations, mais on distingue quand même assez bien quelle application est utilisée
J’aimerais vraiment que le collage d’image soit pris en charge
Les champs d’entrée qui obligent à choisir un fichier dans le système de fichiers au lieu d’utiliser le presse-papiers ajoutent, à mon ressenti, environ 5 fois plus de friction. C’est valable pour tous les boutons d’upload d’image que j’ai utilisés jusqu’ici