Fiz isso há alguns dias
No começo, eu tinha feito para tentar implementar “de mentirinha” profundidade de campo em CSS, e a inspiração veio do vídeo demo e do shuding_; está no penúltimo tweet entre os links no rodapé do site
Mas ontem à noite lembrei que o ThreeJS existia, então reescrevi com react-three-fiber; foi minha primeira vez usando, e fiquei impressionado com o quanto ele é ergonomicamente bem feito
Não documentei, mas dá para mover a tela arrastando com o botão direito
Gosto da interatividade da UI. Ficou bem feito
Também vi o recurso não documentado. Acho meio estranho que, no macOS, ctrl+clique esquerdo também não permita mover
Eu esperava algo integrado ao SO, que tirasse uma captura de tela 3D antes do compositor de janelas, atribuindo profundidade Z a cada janela, como se elas flutuassem acima da área de trabalho e umas sobre as outras
Uma “captura de tela 3D” desse tipo pareceria idêntica a uma captura normal quando vista em projeção ortográfica, mas a diferença apareceria no momento em que se adicionasse o efeito de profundidade de campo
Claro, também seria possível ver por outra projeção, inclinar no espaço 3D como aqui, aplicar neblina às janelas mais distantes ou fazer com que as janelas projetem sombras reais umas sobre as outras com uma luz pontual. Áreas translúcidas poderiam deixar passar mais luz e, idealmente, um visualizador embutível em HTML5 faria tudo isso
Esse formato e esse visualizador parecem ter um uso bastante evidente para recriar o arranjo de janelas AR com mapeamento de profundidade do visionOS como um snapshot estático que dá para “explorar ao redor”. Se desse para anexar mapas de profundidade arbitrários às janelas de um SO desktop 2D, seria um bônus
O mais parecido que já vi com isso é o visualizador de depuração de UI do Xcode. Dá para ver todos os elementos da UI em 3D, como uma vista explodida, e girá-los no espaço
Mas não há iluminação nem sombras, e fica limitado a apps aos quais você tem acesso de depuração
Acho que o Amazon Fire Phone também tentou simular em tempo real uma visualização 3D com paralaxe, movendo a UI do telefone usando várias câmeras frontais de rastreamento ocular e giroscópio+acelerômetro. A visualização de abas do antigo Safari móvel também fazia as abas se moverem de acordo com a orientação do dispositivo
Um dia quero ver uma UI com iluminação global. Mesmo que não seja prática, seria legal se parecesse ver em tempo real aqueles renders de Windows que a equipe de Microsoft Design publicava. Seria um grande desperdício de energia, mas sombras suaves com path tracing ficariam incríveis
Está chegando muito perto da motivação do VisionOS, isto é, de um sistema operacional orientado a espaço 3D
Eu vivia pensando ultimamente que as capturas de tela não estavam borradas o suficiente, então isso caiu como uma luva
Limitar a profundidade de campo é muito útil em fotografia para destacar um elemento específico, e por isso é usado quase sempre em retratos
Além disso, retratos ficam melhores quando tirados a certa distância com uma lente teleobjetiva, porque capturam não o rosto como ele é visto de fato, mas o rosto de que as pessoas se lembram. A correção é necessária porque, com a mesma configuração de lente, fotografar de perto deixa a profundidade de campo muito mais rasa, enquanto fotografar de longe a deixa muito mais profunda
Isso é sarcasmo desnecessário. Eu não gostaria de usar capturas de tela com esse tipo de profundidade de campo como anexo de relatório de bug
Mas, em um site de marketing, parece um bom efeito visual para destacar uma parte específica da captura de tela e mostrar a mensagem que se quer transmitir
Exato, primeiro deixamos a captura de tela borrada e depois a tornamos nítida de novo com uma tela HiDPI /s
Será que existe uma ferramenta parecida que crie uma montagem em vídeo com profundidade de campo e rotação lenta a partir de um conjunto de capturas de tela e legendas?
Para responder à pergunta que aparece em outros comentários: isso foi feito com three.js
É uma cena 3D que renderiza imagens em planos 2D, e a câmera aplica um desfoque gaussiano específico a algumas partes deles. Estão usando orbit controls para zoom e rotação da imagem
Isso é só uma forma sofisticada de dizer “borrar todo o resto” em uma captura de tela? Pessoalmente, prefiro recortar o que é desnecessário
Em uma UI complexa, ao mostrar para onde se deve navegar, pode ser útil que a captura de tela ainda mantenha o restante da UI
Recortar remove as pistas de navegação, mas deixar tudo nítido pode torná-la tão difícil de entender quanto a UI real; então o desfoque pode ser um meio-termo
Parece interessante. No começo, achei que a parte da captura de tela mais distante de mim ficaria borrada e a parte mais próxima ficaria em foco, mas não foi assim que funcionou
Se for possível marcar a parte importante, parece que poderia servir para dar foco a uma parte específica da captura de tela
Se você clicar em uma parte da imagem, ela fica em foco
Profundidade de campo rasa é usada em fotografia, e às vezes em cinema, exatamente para esse fim: direcionar a atenção da pessoa para um elemento específico
Mas, depois de ver a demo, não tenho muita certeza de onde eu gostaria de usar isso
Seria interessante usar como fundo para coisas como thumbnails de vídeos do YouTube
Eu não gostaria que fosse usado para transmitir informações de verdade, mas parece comunicar o suficiente para reconhecer qual aplicativo está sendo usado
Por favor, espero que deem suporte a colar imagens
Campos de entrada que obrigam a escolher um arquivo no sistema de arquivos, em vez de usar o buffer de colagem, aumentam o atrito de uso em algo como 5 vezes, na minha percepção. Isso vale para todos os botões de upload de imagem que já usei
1 comentários
Opiniões no Hacker News
Fiz isso há alguns dias
No começo, eu tinha feito para tentar implementar “de mentirinha” profundidade de campo em CSS, e a inspiração veio do vídeo demo e do shuding_; está no penúltimo tweet entre os links no rodapé do site
Mas ontem à noite lembrei que o ThreeJS existia, então reescrevi com react-three-fiber; foi minha primeira vez usando, e fiquei impressionado com o quanto ele é ergonomicamente bem feito
Não documentei, mas dá para mover a tela arrastando com o botão direito
https://depth-of-field.vercel.app/
Também vi o recurso não documentado. Acho meio estranho que, no macOS, ctrl+clique esquerdo também não permita mover
Eu esperava algo integrado ao SO, que tirasse uma captura de tela 3D antes do compositor de janelas, atribuindo profundidade Z a cada janela, como se elas flutuassem acima da área de trabalho e umas sobre as outras
Uma “captura de tela 3D” desse tipo pareceria idêntica a uma captura normal quando vista em projeção ortográfica, mas a diferença apareceria no momento em que se adicionasse o efeito de profundidade de campo
Claro, também seria possível ver por outra projeção, inclinar no espaço 3D como aqui, aplicar neblina às janelas mais distantes ou fazer com que as janelas projetem sombras reais umas sobre as outras com uma luz pontual. Áreas translúcidas poderiam deixar passar mais luz e, idealmente, um visualizador embutível em HTML5 faria tudo isso
Esse formato e esse visualizador parecem ter um uso bastante evidente para recriar o arranjo de janelas AR com mapeamento de profundidade do visionOS como um snapshot estático que dá para “explorar ao redor”. Se desse para anexar mapas de profundidade arbitrários às janelas de um SO desktop 2D, seria um bônus
Mas não há iluminação nem sombras, e fica limitado a apps aos quais você tem acesso de depuração
Acho que o Amazon Fire Phone também tentou simular em tempo real uma visualização 3D com paralaxe, movendo a UI do telefone usando várias câmeras frontais de rastreamento ocular e giroscópio+acelerômetro. A visualização de abas do antigo Safari móvel também fazia as abas se moverem de acordo com a orientação do dispositivo
Um dia quero ver uma UI com iluminação global. Mesmo que não seja prática, seria legal se parecesse ver em tempo real aqueles renders de Windows que a equipe de Microsoft Design publicava. Seria um grande desperdício de energia, mas sombras suaves com path tracing ficariam incríveis
Eu vivia pensando ultimamente que as capturas de tela não estavam borradas o suficiente, então isso caiu como uma luva
Além disso, retratos ficam melhores quando tirados a certa distância com uma lente teleobjetiva, porque capturam não o rosto como ele é visto de fato, mas o rosto de que as pessoas se lembram. A correção é necessária porque, com a mesma configuração de lente, fotografar de perto deixa a profundidade de campo muito mais rasa, enquanto fotografar de longe a deixa muito mais profunda
Mas, em um site de marketing, parece um bom efeito visual para destacar uma parte específica da captura de tela e mostrar a mensagem que se quer transmitir
Parece o Screenstab [0], que foi um Show HN anterior
[0] https://www.screenstab.com/editor/
[1] https://news.ycombinator.com/item?id=34729849
Para responder à pergunta que aparece em outros comentários: isso foi feito com three.js
É uma cena 3D que renderiza imagens em planos 2D, e a câmera aplica um desfoque gaussiano específico a algumas partes deles. Estão usando orbit controls para zoom e rotação da imagem
Isso é só uma forma sofisticada de dizer “borrar todo o resto” em uma captura de tela? Pessoalmente, prefiro recortar o que é desnecessário
Recortar remove as pistas de navegação, mas deixar tudo nítido pode torná-la tão difícil de entender quanto a UI real; então o desfoque pode ser um meio-termo
Parece interessante. No começo, achei que a parte da captura de tela mais distante de mim ficaria borrada e a parte mais próxima ficaria em foco, mas não foi assim que funcionou
Se for possível marcar a parte importante, parece que poderia servir para dar foco a uma parte específica da captura de tela
Mas, depois de ver a demo, não tenho muita certeza de onde eu gostaria de usar isso
Como fiz no Blender alguns anos atrás, talvez fosse bom adicionar pixels RGB para parecer mais realista
https://blenderartists.org/t/rgb-display-shader/684533
Seria interessante usar como fundo para coisas como thumbnails de vídeos do YouTube
Eu não gostaria que fosse usado para transmitir informações de verdade, mas parece comunicar o suficiente para reconhecer qual aplicativo está sendo usado
Por favor, espero que deem suporte a colar imagens
Campos de entrada que obrigam a escolher um arquivo no sistema de arquivos, em vez de usar o buffer de colagem, aumentam o atrito de uso em algo como 5 vezes, na minha percepção. Isso vale para todos os botões de upload de imagem que já usei