Hice esto hace unos días.
Al principio lo hice para intentar implementar “falsamente” la profundidad de campo en CSS, y la inspiración que recibí del video de demo y de shuding_ está en el penúltimo tuit del enlace al final del sitio.
Pero anoche recordé que existía ThreeJS, así que lo reescribí con react-three-fiber. Fue la primera vez que lo usé y me impresionó lo ergonómico que está.
No está documentado, pero se puede desplazar la vista arrastrando con clic derecho.
Me gusta la interactividad de la UI. Está bien hecho.
También confirmé la función no documentada. Me intriga un poco por qué en macOS tampoco se puede desplazar con ctrl+clic izquierdo.
Esperaba que se integrara con el SO para tomar una captura 3D antes de la etapa del compositor de ventanas, asignándole a cada ventana una profundidad Z para que pareciera flotar sobre el escritorio y sobre las demás.
Una “captura 3D” así, vista con proyección ortográfica, se vería igual que una captura normal, pero en el momento de aplicar un efecto de profundidad de campo se notaría la diferencia.
Claro que también se podría verla con otra proyección, inclinarla en un espacio 3D como aquí, aplicar niebla a las ventanas lejanas o hacer que las ventanas proyecten sombras reales entre sí con una luz puntual. Las zonas translúcidas podrían dejar pasar más luz y, en el caso ideal, un visor embebible en HTML5 se encargaría de todo eso.
Un formato y un visor así parecen tener un uso bastante claro para recrear la disposición de ventanas AR con mapeo de profundidad de visionOS como una instantánea estática que se pueda “recorrer”. Si se pudieran agregar mapas de profundidad arbitrarios a las ventanas de un SO de escritorio 2D, sería un extra.
Lo más parecido que he visto es el visor de depuración de UI de Xcode. Permite descomponer todos los elementos de la UI y rotarlos en un espacio 3D como si fuera una vista explotada.
Eso sí, no tiene iluminación ni sombras, y está limitado a apps para las que se tiene acceso de depuración.
Creo que el Amazon Fire Phone también intentaba usar varias cámaras frontales de seguimiento ocular junto con giroscopio y acelerómetro para mover la UI del teléfono y simular en tiempo real una vista 3D con paralaje. En la antigua vista de pestañas de Safari móvil, las pestañas también se movían según la orientación del dispositivo.
Algún día me gustaría ver una UI con iluminación global. Aunque no sea práctica, sería lindo que se sintiera como ver en tiempo real esos renders de Windows que solía publicar el equipo de Microsoft Design. Sería un gran desperdicio de energía, pero las sombras suaves con path tracing se verían geniales.
Se está acercando bastante a la motivación de VisionOS, es decir, un sistema operativo orientado al espacio 3D.
Últimamente pensaba seguido que las capturas de pantalla no estaban lo suficientemente borrosas, así que esto viene perfecto.
Limitar la profundidad de campo es muy útil en fotografía para destacar elementos específicos, y por eso se usa casi siempre en retratos.
Además, conviene tomar retratos desde cierta distancia con un teleobjetivo, porque captura no el rostro tal como se ve en realidad, sino el rostro como la gente lo recuerda. La razón por la que hace falta corrección es que, con la misma configuración de lentes, al fotografiar de cerca la profundidad de campo se vuelve mucho más reducida, y al fotografiar de lejos se vuelve mucho más amplia.
Eso es sarcasmo innecesario. No me gustaría usar una captura con esta profundidad de campo como adjunto para un reporte de bugs.
Pero como efecto visual en un sitio de marketing, para resaltar una parte específica de una captura y mostrar lo que se quiere comunicar, me parece bien.
Exacto, primero hagamos borrosas las capturas y luego volvamos a hacerlas nítidas con una pantalla HiDPI /s
¿Habrá alguna herramienta parecida que genere un montaje de video con profundidad de campo y rotación lenta a partir de un conjunto de capturas y captions?
Para responder a la pregunta que aparece en otros comentarios: esto está hecho con three.js.
Se puede pensar como una escena 3D que renderiza una imagen en un plano 2D, y una cámara que aplica un desenfoque gaussiano específico a algunas partes. Para el zoom y la rotación de la imagen usa orbit controls.
¿Esto es solo una forma elegante de decir “desenfocar todo lo demás” en una captura? Personalmente, prefiero recortar el contenido innecesario.
Cuando se quiere mostrar hacia dónde ir en una UI compleja, puede ser útil que la captura mantenga el resto de la interfaz.
Si recortas, desaparecen las pistas de navegación; pero si dejas todo nítido, puede volverse tan difícil de leer como la UI real, así que el desenfoque puede ser un punto medio.
Se ve interesante. Al principio pensé que la parte de la captura más alejada de mí se desenfocaría y que la parte más cercana quedaría enfocada, pero no fue así como funcionó.
Si se pudiera marcar la parte importante, podría servir para poner el foco en una zona específica de la captura.
Si haces clic en una parte de la imagen, se enfoca ahí.
La profundidad de campo reducida se usa en fotografía, y a veces en cine, precisamente con ese propósito: dirigir la atención de la persona a un elemento específico.
Dicho eso, después de ver la demo, no tengo muy claro para qué querría usar esto.
Sería divertido usarlo como fondo para cosas como miniaturas de videos de YouTube.
No me gustaría que se usara para transmitir información real, pero parece que alcanza para comunicar qué aplicación se está usando.
Ojalá por favor admitiera pegar imágenes.
Los campos de entrada que obligan a elegir un archivo del sistema de archivos en vez de usar el portapapeles aumentan la fricción de uso como unas 5 veces, según se siente. Esto aplica a todos los botones de subida de imágenes que he usado hasta ahora.
1 comentarios
Opiniones en Hacker News
Hice esto hace unos días.
Al principio lo hice para intentar implementar “falsamente” la profundidad de campo en CSS, y la inspiración que recibí del video de demo y de shuding_ está en el penúltimo tuit del enlace al final del sitio.
Pero anoche recordé que existía ThreeJS, así que lo reescribí con react-three-fiber. Fue la primera vez que lo usé y me impresionó lo ergonómico que está.
No está documentado, pero se puede desplazar la vista arrastrando con clic derecho.
https://depth-of-field.vercel.app/
También confirmé la función no documentada. Me intriga un poco por qué en macOS tampoco se puede desplazar con ctrl+clic izquierdo.
Esperaba que se integrara con el SO para tomar una captura 3D antes de la etapa del compositor de ventanas, asignándole a cada ventana una profundidad Z para que pareciera flotar sobre el escritorio y sobre las demás.
Una “captura 3D” así, vista con proyección ortográfica, se vería igual que una captura normal, pero en el momento de aplicar un efecto de profundidad de campo se notaría la diferencia.
Claro que también se podría verla con otra proyección, inclinarla en un espacio 3D como aquí, aplicar niebla a las ventanas lejanas o hacer que las ventanas proyecten sombras reales entre sí con una luz puntual. Las zonas translúcidas podrían dejar pasar más luz y, en el caso ideal, un visor embebible en HTML5 se encargaría de todo eso.
Un formato y un visor así parecen tener un uso bastante claro para recrear la disposición de ventanas AR con mapeo de profundidad de visionOS como una instantánea estática que se pueda “recorrer”. Si se pudieran agregar mapas de profundidad arbitrarios a las ventanas de un SO de escritorio 2D, sería un extra.
Eso sí, no tiene iluminación ni sombras, y está limitado a apps para las que se tiene acceso de depuración.
Creo que el Amazon Fire Phone también intentaba usar varias cámaras frontales de seguimiento ocular junto con giroscopio y acelerómetro para mover la UI del teléfono y simular en tiempo real una vista 3D con paralaje. En la antigua vista de pestañas de Safari móvil, las pestañas también se movían según la orientación del dispositivo.
Algún día me gustaría ver una UI con iluminación global. Aunque no sea práctica, sería lindo que se sintiera como ver en tiempo real esos renders de Windows que solía publicar el equipo de Microsoft Design. Sería un gran desperdicio de energía, pero las sombras suaves con path tracing se verían geniales.
Últimamente pensaba seguido que las capturas de pantalla no estaban lo suficientemente borrosas, así que esto viene perfecto.
Además, conviene tomar retratos desde cierta distancia con un teleobjetivo, porque captura no el rostro tal como se ve en realidad, sino el rostro como la gente lo recuerda. La razón por la que hace falta corrección es que, con la misma configuración de lentes, al fotografiar de cerca la profundidad de campo se vuelve mucho más reducida, y al fotografiar de lejos se vuelve mucho más amplia.
Pero como efecto visual en un sitio de marketing, para resaltar una parte específica de una captura y mostrar lo que se quiere comunicar, me parece bien.
Se parece a Screenstab [0], que antes fue un Show HN.
[0] https://www.screenstab.com/editor/
[1] https://news.ycombinator.com/item?id=34729849
Para responder a la pregunta que aparece en otros comentarios: esto está hecho con three.js.
Se puede pensar como una escena 3D que renderiza una imagen en un plano 2D, y una cámara que aplica un desenfoque gaussiano específico a algunas partes. Para el zoom y la rotación de la imagen usa orbit controls.
¿Esto es solo una forma elegante de decir “desenfocar todo lo demás” en una captura? Personalmente, prefiero recortar el contenido innecesario.
Si recortas, desaparecen las pistas de navegación; pero si dejas todo nítido, puede volverse tan difícil de leer como la UI real, así que el desenfoque puede ser un punto medio.
Se ve interesante. Al principio pensé que la parte de la captura más alejada de mí se desenfocaría y que la parte más cercana quedaría enfocada, pero no fue así como funcionó.
Si se pudiera marcar la parte importante, podría servir para poner el foco en una zona específica de la captura.
Dicho eso, después de ver la demo, no tengo muy claro para qué querría usar esto.
Podría estar bueno agregar píxeles RGB para que se vea más realista, como algo que probé en Blender hace unos años.
https://blenderartists.org/t/rgb-display-shader/684533
Sería divertido usarlo como fondo para cosas como miniaturas de videos de YouTube.
No me gustaría que se usara para transmitir información real, pero parece que alcanza para comunicar qué aplicación se está usando.
Ojalá por favor admitiera pegar imágenes.
Los campos de entrada que obligan a elegir un archivo del sistema de archivos en vez de usar el portapapeles aumentan la fricción de uso como unas 5 veces, según se siente. Esto aplica a todos los botones de subida de imágenes que he usado hasta ahora.