Autor: 希彼赫
Experimente ao vivo Sobre este projeto
Bloom é um campo de flores em tempo real que roda no navegador: deslize o mouse pelo campo, ou ligue a câmera e faça o gesto de pinça com as duas mãos, e ondas de flores desabrocham ao longo do seu caminho.
As flores são renderizadas em tempo real a partir de modelos 3D carregados remotamente, com raio de influência, velocidade de floração, brilho, tamanho das flores, densidade e velocidade das ondas ajustáveis — uma peça interativa jogável e um campo de testes de como os ativos 3D se comportam em tempo real.
Destaques
- Deslize o mouse pelo campo e ondas de flores desabrocham ao longo do seu caminho
- Arraste para orbitar a câmera e role para dar zoom — enquadre o campo de qualquer ângulo
- Ligue a câmera e faça o gesto de pinça duas vezes para fazer o campo inteiro florescer de uma vez
- Brilho, densidade e velocidade das ondas, além do tamanho e da saturação de cada flor, são ajustáveis; pressione H para ocultar a interface e gravar uma tomada limpa
Análise técnica
Recursos 3D · Tripo text-to-3D
As seis flores do campo — branca, amarela, margarida, roxa, azul e vermelha — saem direto do Tripo text-to-3D: você escreve um prompt e recebe um GLB com materiais PBR. Cada flor fica entre 2.000 e 8.000 triângulos — não por perfeccionismo visual, mas porque o campo planta quase cinco mil de uma vez: quanto mais leves os modelos, mais estável o frame rate.
Todos os modelos seguem a mesma convenção: frente para +Z, base na origem, cerca de uma unidade de altura. O código nunca precisa de caso especial para nenhuma flor — troque por uma nova e simplesmente funciona.
Milhares na tela · InstancedMesh
Fazer alguns milhares de flores desabrocharem ao mesmo tempo no navegador é obra do InstancedMesh do Three.js: cada espécie mantém uma única geometria e um único material, e o instancing cuida das cópias — cerca de 4.900 flores por padrão, um draw call por espécie, bem menos peso do que se imagina.
A animação de floração também não mexe nos modelos: basta atualizar a escala de cada instância na instanceMatrix e cada flor cresce de um broto rente ao chão até abrir por completo.
Ondas de floração · raycasting + frente de onda radial
Quando o mouse passa, um Raycaster projeta o cursor sobre o campo e o ponto de impacto vira a origem da onda; cada flor olha a que distância está desse ponto para decidir quando abrir — as próximas primeiro, as distantes depois, espalhando-se anel por anel. Parece complexo, mas o núcleo é um simples cálculo de distância.
Controle por gestos · MediaPipe Hands
Com a câmera ligada, o MediaPipe Hands acompanha em tempo real 21 pontos da mão. O código observa uma única coisa: se o polegar e o indicador se juntam — dois beliscões e o campo inteiro floresce a partir de onde a ponta do seu dedo aponta. Para evitar disparos falsos, só a mão direita conta.
Brilho · pós-processamento bloom
Aquele halo onírico sobre a cena vem do pós-processamento UnrealBloomPass: o brilho global fica em 0,46 por padrão — luminoso sem estourar. Cada espécie de flor ainda guarda seus próprios controles de brilho e saturação, então dá para levar a atmosfera ao máximo sem apagar a cor própria de nenhuma flor.
