3D & Web Interativa · Em profundidade
A maioria dos sites é plana. O seu não tem de ser.
Para produtos que precisam de ser vistos a funcionar e para marcas que precisam de parecer trabalhadas, não saídas de um modelo. Construímos 3D em tempo real e movimento interativo diretamente no browser: rápido o suficiente para um telemóvel, sem plugins para instalar.
Quando é que o 3D vale a pena?
Quando transporta significado. Um configurador que permite ao cliente rodar o produto antes de o comprar faz um trabalho que nenhuma fotografia consegue. Uma cena que mostra como algo funciona, ao ritmo do próprio visitante, explica mais do que uma página de texto. É esse o 3D a merecer o seu lugar: mostrar a própria coisa, e não decorar a página à sua volta.
E quando não transporta significado, dir-lhe-emos isso mesmo. O movimento pelo movimento é a forma mais rápida de fazer um site sério parecer um truque, e custa velocidade, que é credibilidade. A nossa própria regra de design aplica-se também ao trabalho para clientes: cada efeito tem de evocar profundidade ou ofício reais e, se não acrescentar significado, cortamo-lo.
O que exige um 3D com bom desempenho na web?
Um orçamento para cada dispositivo
Uma cena fluida numa workstation e aos solavancos num telemóvel é uma cena falhada. Construímos primeiro para o telemóvel modesto: modelos glTF comprimidos, e cenas dimensionadas para um orçamento por dispositivo, para que a experiência se aguente onde os seus visitantes realmente estão.
Animação apenas no compositor
O browser consegue mover e desvanecer elementos na GPU sem refazer o layout, e é esse o único tipo de animação que entregamos. Transformações e opacidade, nunca propriedades de layout. É a diferença entre movimento que desliza e movimento que engasga.
Melhoria progressiva
A camada 3D é acrescentada por cima de uma página que já funciona. O conteúdo é gerado estaticamente e servido a partir da edge; se um dispositivo não conseguir correr a cena, o visitante recebe na mesma um site rápido e completo, em vez de um palco vazio.
Respeito pelo movimento reduzido
Alguns visitantes pedem ao dispositivo menos movimento, e o site deve ouvir. Com movimento reduzido, as nossas cenas e revelações dão lugar a alternativas estáticas e calmas, tal como o shader de água ao vivo de um projeto recente recua para um gradiente fixo. Nada depende do movimento para ser legível.
Onde é que isto se pode ver a correr?
A prova mais clara é um trabalho recente: um site 3D em tempo real com sete cenas temáticas, cada uma com a sua paleta e o seu ambiente, a correr com fluidez em desktop e telemóvel. Construído com Three.js e modelos glTF comprimidos, traduzido para cinco línguas por um modelo a correr localmente através do Ollama, com custo de API zero, e servido estaticamente a partir da edge.
Ler o caso de estudoO toque 3D também serve um pequeno negócio. Para uma empresa de manutenção de piscinas da Grande Lisboa, abrimos o site submerso num hero de cáusticas de água de piscina renderizadas ao vivo, usado com contenção: impacto nas zonas imersivas, legibilidade em todo o lado e uma alternativa estática com movimento reduzido.
Ver o projetoÀ escala de produto, o mesmo ofício sustenta uma aplicação web: um jogo de adivinhação Pokémon com 39 modos, envolto numa estética de consola portátil, com desafios diários, conteúdo por geração e temas alternáveis. Rápido, e genuinamente divertido de voltar a abrir.
Ver o rayquizzE este site faz parte da prova: o indicador de profundidade ao lado do hero da nossa página inicial é um instrumento vivo, não uma imagem, construído com a mesma disciplina que vendemos.
Vê-lo na página inicialFAQ
Perguntas frequentes.
O 3D torna um site lento?
Só quando é construído sem cuidado. Comprimimos os modelos, dimensionamos cada cena para um orçamento por dispositivo, animamos apenas no compositor e servimos a página estaticamente a partir da edge, para que o 3D assente num site que já é rápido. O objetivo é simples: fluidez num telemóvel, sem plugins para instalar.
Com que tecnologias constroem 3D interativo?
O 3D em tempo real corre em Three.js e WebGL, diretamente no browser. À volta, usamos a mesma stack do resto do nosso trabalho: frameworks como Nuxt ou Astro, geração estática e a edge da Cloudflare para a entrega. Nada para instalar, e nada que prenda a experiência a uma única plataforma.
E os visitantes que preferem menos movimento?
O dispositivo diz-nos, e o site ouve. Com movimento reduzido, as cenas e as revelações ao scroll dão lugar a alternativas estáticas e calmas, e nenhum conteúdo depende do movimento para ser legível. A acessibilidade faz parte do ofício, não é uma exceção.