3D na web em 2026: por que voltei a usar profundidade sem derrubar o site

3D na web em 2026 finalmente virou uma decisão de projeto, e não uma aposta técnica. O WebGPU chegou a Baseline em janeiro de 2026, presente em Chrome, Edge, Firefox e Safari 26, e o Three.js já entrega o renderizador novo com queda automática para WebGL 2 nos aparelhos antigos. Na minha leitura, isso muda a pergunta: não é mais "dá para rodar?", é "vale a pena para esta marca?".

Eu passei anos evitando 3D em site de cliente. O motivo era simples e chato: quase sempre custava três segundos de carregamento para entregar um efeito que ninguém lembrava depois. Em 2026 eu voltei atrás, com regras.

O que realmente mudou no 3D na web em 2026

A virada não foi estética, foi de infraestrutura. Três coisas destravaram o assunto:

• WebGPU virou Baseline em janeiro de 2026. O caniuse ainda aponta algo perto de 83% de cobertura global, então eu trato como um ganho de qualidade para a maioria, não como garantia universal.
• O Three.js amadureceu o WebGPURenderer. Desde a versão r171, lançada em setembro de 2025, dá para trocar de renderizador praticamente mudando um import, e a biblioteca cuida do fallback para WebGL 2 sozinha.
• O TSL, Three Shader Language, acabou com a duplicação de shader. Você escreve uma vez e ele compila para WGSL e para GLSL. Isso é menos glamouroso do que uma cena bonita, mas é o que torna o 3D sustentável em um estúdio pequeno como o meu.

Tem também o efeito colateral divertido: com compute shaders, sistemas de partículas passaram da casa das 50 mil unidades típicas do WebGL para mais de um milhão. Eu uso pouco isso, para ser honesto. A maioria dos projetos de marca não precisa de um milhão de partículas, precisa de um produto que gire bem no celular.

Como eu decido se um projeto leva 3D

Aqui no Studio Seu eu costumo fazer três perguntas antes de abrir qualquer software de modelagem. Se a resposta for não em qualquer uma delas, o projeto sai em 2D e fica melhor assim.

1. O 3D responde a uma dúvida real de compra?

Girar um produto só faz sentido quando o cliente precisa ver o que a foto esconde: a textura, a espessura, o encaixe, o verso. Nike e IKEA fazem isso há anos porque tamanho e caimento são objeções concretas. Se a dúvida do seu público é preço ou prazo, 3D não resolve nada.

2. O modelo cabe no orçamento de performance?

Minha régua prática em 2026 é manter o modelo abaixo de 10 MB, e de preferência bem abaixo. Se o asset não cabe, eu não corto qualidade no final: eu corto o 3D do escopo no começo.

3. A página funciona inteira sem o 3D?

Essa é inegociável. A cena entra depois do conteúdo, nunca na frente dele. Se o WebGPU falhar, se a conexão cair, se a pessoa estiver com movimento reduzido ligado, a página continua vendendo.

O stack leve que eu uso hoje

Eu divido em dois caminhos, e escolher o caminho errado é o erro mais caro do projeto.

• Precisa só mostrar um objeto? Uso o model-viewer, o web component aberto do Google. Ele carrega glTF ou GLB, é acessível por padrão e abre realidade aumentada nativa no celular. Para e-commerce, é quase sempre a resposta certa.
• Precisa de cena, câmera e comportamento? Aí vou de Three.js, com o WebGPURenderer e TSL. Custa tempo real de desenvolvimento, então só entra quando a experiência é o argumento de venda.
• Precisa de uma cena decorativa rápida? O Spline resolve, com edição visual no navegador e embed simples. Eu gosto dele para hero e para prototipar direção de arte, mas sempre exporto pensando em peso.
• Formato: glTF ou GLB para a web, USDZ para a AR do iOS. Essa dupla cobre os dois ecossistemas sem gambiarra.

Os erros que eu mais vejo em 2026

O primeiro é confundir 3D com movimento. Muita gente coloca uma cena girando sozinha no topo do site, o que só rouba bateria e atenção. Profundidade é linguagem visual, não animação automática.

O segundo é modelar bonito e exportar mal. Um modelo de portfólio de arquitetura não vira asset de web só porque foi comprimido. Malha, textura e número de materiais precisam ser pensados desde o início.

O terceiro é esquecer que WebGPU ainda não é 100% do mercado. Eu testo sempre em um aparelho Android intermediário, não no meu computador, porque é lá que a decisão de compra acontece.

Perguntas frequentes

WebGPU já pode ser usado em produção em 2026?

Pode, com fallback. Ele é Baseline desde janeiro de 2026 nos principais navegadores, mas a cobertura global gira em torno de 83%, então o WebGL 2 continua sendo o plano B obrigatório.

3D deixa o site lento?

Deixa quando o 3D carrega antes do conteúdo. Se a cena entra sob demanda, com o modelo abaixo de 10 MB e carregamento adiado, o impacto em velocidade é controlável.

Preciso de Three.js para colocar um produto em 3D?

Na maioria dos casos, não. O model-viewer resolve visualização de produto e realidade aumentada com muito menos código. Three.js entra quando você precisa de interação personalizada de verdade.

Spline serve para projeto profissional?

Serve, principalmente para cenas decorativas e protótipos de direção de arte. Para configurador de produto ou performance apertada, eu prefiro controlar tudo no Three.js.

O que eu levo dessa mudança

Na minha experiência, o 3D só funciona quando ele é a forma mais curta de explicar alguma coisa. Em 2026 a tecnologia parou de ser o obstáculo, e isso jogou a responsabilidade de volta para o design: agora a pergunta é editorial, não técnica. Se a profundidade não ajuda a pessoa a entender ou a decidir, ela é peso.

Se você está avaliando colocar 3D no seu site e não sabe se o caso justifica, me chame para conversar. Eu prefiro dizer que não vale a pena do que entregar uma cena bonita que ninguém usa.