10 de dezembro de 2025

Apresentamos o 3D no Hana

Unindo o 3D e o 2D

Por muito tempo, a maior parte do "processo" de design aconteceu num canvas 2D.

A divisão histórica entre 2D e 3D tem raízes em complexidades técnicas. As ferramentas de design 2D evoluíram para ser ao mesmo tempo em tempo real e de alta qualidade (o que você vê é o que você tem), mas o 3D exige muito mais poder de processamento, o que tornava o trabalho em tempo real possível apenas com qualidade mais baixa.

Mas a tecnologia avançou muito (tanto o hardware quanto o software), e nossa equipe fez grandes progressos nos últimos anos, o que nos permitiu alcançar um marco fundamental: combinar 3D e 2D no mesmo canvas, em tempo real.

Mova o mouse ou toque para interagir (experiência feita com o Hana)

A convergência entre 3D e 2D

Acreditamos que um canvas de design deve aproveitar todas as dimensões disponíveis e que quem o usa (uma pessoa ou um agente de IA) deve poder decidir o que é melhor para a solução em questão.

Infelizmente, embora isso funcione na teoria, implementar qualquer coisa em 3D é um pesadelo técnico, e combinar esses dois sistemas deixa tudo ainda pior.

A maioria das ferramentas de design atuais, ou tradicionais, foi construída com uma abordagem parecida: você trabalha numa prévia, depois aperta "renderizar" ou faz o "handoff" do trabalho, e alguém implementa a versão de verdade com outra stack.

Em outras palavras, quase todas as ferramentas de design atuais não são em tempo real, então o 3D costuma exigir ferramentas especializadas cujo resultado acaba sendo usado ou incorporado como imagens ou vídeos planos: nada editável e nada interativo. É um processo lento, que não combina com os padrões atuais de fluxo de design.

É preciso uma nova abordagem para mudar isso.

Experiências feitas com o Hana

O tempo real é a base

Quando criamos o Hana, nós o fizemos para ser em tempo real e, ao mesmo tempo, capaz de renderizar qualquer coisa que dá para renderizar em 2D. Isso significa que o renderizador do Hana lida com todo tipo de efeito com precisão de pixel (como sombras, desfoque etc.), formas vetoriais, booleanas e muito mais, tudo em tempo real.

Com isso, podemos aproveitar o pipeline de efeitos do Hana para renderizar gráficos 3D em tempo real também.

Basicamente, o Hana consegue combinar 3D e 2D.

Vetores transformados em 3D em tempo real com o Hana

A jornada para unir dois mundos

Adicionar 3D a um canvas 2D parece uma tarefa fácil, mas, na prática, os desafios são inúmeros. Na maioria das vezes, é preciso rodar dois renderizadores ao mesmo tempo ou combinar vários runtimes, o que resulta em downloads longos, nada ideais.

O Hana usa o mesmo runtime para 3D e 2D, o que é mais eficiente e muito mais flexível.

Outro problema central é a qualidade, ou melhor, a falta dela.

Combinar os dois sistemas num só mantendo o mesmo nível de qualidade é difícil, porque a qualidade em 3D envolve vários fatores: anti-aliasing, resolução, número de polígonos (ou alta densidade de voxels), quantidade de objetos e mais.

No Hana, você pode criar qualquer forma 2D e convertê-la num objeto 3D, mantendo uma conexão em tempo real com a forma original.

Ou seja, a qualquer momento você pode modificar a forma original, e o objeto 3D será regenerado em tempo real a partir dela.

Isso traz um ganho enorme de produtividade na criação 3D dentro de uma composição 2D. Por exemplo, você pode criar facilmente um texto 3D e mudar sua cor, fonte ou outras propriedades, preservando toda a flexibilidade do texto num fluxo não destrutivo.

Os layouts podem se atualizar dinamicamente, e os objetos 3D seguem as regras da composição 2D.

Experiências feitas com as 3D Shapes do Hana

O 3D segue o 2D

No Hana, cada objeto 3D tem seu próprio sistema de coordenadas. Mas ele continua seguindo as regras e o comportamento do canvas 2D, o que significa que você pode aplicar aos objetos 3D tudo o que usaria normalmente em objetos 2D.

Isso abre caminho para uma grande variedade de possibilidades de design.