Portfólio 3D premiado feito só com geometria plana e texturas manuais
Aprofundamento CEVIU
Aprofundamento
O portfólio de Tomasz Szmajda não é só uma ilusão 3D, é um manifesto de design digital que coloca limites técnicos no centro da experiência. Ele rejeita a modelagem 3D tradicional não por falta de habilidade, mas como escolha conceitual: cada porta inclinada, cada parede serrilhada, cada nuvem que você voa no About room nasce de planos 2D com texturas manuais (ou geradas por IA com controle rigoroso de estilo), projetados para parecerem desenhos feitos à mão em papel. Isso muda o contrato com o usuário: em vez de oferecer realismo fotográfico, ele entrega *autoria visível*, o traço, a imperfeição, o tempo gasto. A interação não é neutra: o efeito de pintura ao passar o mouse não é só um detalhe, é um sistema de feedback tátil traduzido em código, um shader GLSL personalizado que usa ruído procedural para simular tinta se espalhando, não um wipe limpo. É UX feita com pincel, não com wireframe.
A arquitetura do projeto reflete essa ética. O corredor infinito não é um truque de scroll, mas um sistema de gerenciamento ativo: apenas três segmentos estão renderizados a qualquer momento, com visibilidade calculada em tempo real via useFrame. A entrada não é estática, ela esconde portas de segmentos invisíveis até o usuário atravessar a porta principal, evitando clipping visual. Isso não é otimização genérica; é design espacial pensado para um corpo que caminha, não um dedo que rola.
O que mudou
Na cobertura CEVIU de 6 de junho sobre o agente que construiu uma galeria 3D de Paris com dois Hugging Face Spaces, a IA era orquestradora de fluxo: texto → imagem → modelo 3D. Aqui, a IA é coadjuvante artesanal, usada só para gerar centenas de texturas em estilo consistente, mas com revisão humana implacável (20 versões descartadas por não combinarem). Também mudou o papel do Three.js: em abril de 2026, a CEVIU destacou sua adoção massiva (2,7M downloads/semana), mas Szmajda vai além, ele explora o risco de otimizações 'padrão', como KTX2, e descarta tudo que prejudica a intenção estética, mesmo que tecnicamente correto. E o mais claro: em maio, a CEVIU mostrou designers usando IA para acelerar prototipagem (Cursor, Claude Code); Szmajda mostra que IA pode ser usada para *expandir a linguagem visual*, não substituir o gesto humano.
Por que isso importa
Isso importa porque quebra a armadilha do '3D na web' como cópia de ferramentas profissionais. Em vez de replicar Blender no navegador, Szmajda reinventa a gramática: profundidade vem de projeção, não de mesh; realismo vem de textura, não de PBR; navegação vem de espaço, não de scroll. Para designers, é um lembrete de que acessibilidade visual não é só contraste ou leitura em voz alta, é também a clareza de intenção. Um botão que 'pinta' ao passar o mouse não é só bonito: é um sinal inequívoco de interatividade, sem depender de ícones ou labels. Para devs, é uma prova de que performance não é só sobre FPS, é sobre manter a coerência entre o que o usuário vê, o que sente e o que o código permite.
Linha do tempo
Início do desenvolvimento do portfólio 3D de Tomasz Szmajda
Reconhecimento como CSS Winner Site of the Day
Awwwards Honorable Mention
Lançamento oficial e cobertura internacional ampla do portfólio premiado
Perguntas frequentes
Como ele conseguiu evitar o 'stutter' ao entrar nas salas?
Usando um componente chamado RoomWarmup: durante o pré-carregamento, as quatro salas são montadas 500 unidades abaixo da cena e forçadas a compilar seus shaders via gl.compileAsync(). Isso elimina o travamento inicial, mas só em dispositivos potentes. Em celulares mais fracos, o warmup é pulado para evitar perda de contexto WebGL.
Por que ele não usou KTX2, se é a 'melhor prática' para texturas 3D?
Testou e falhou: as texturas KTX2 distorciam linhas finas e degradavam gradientes sutis essenciais para o estilo 'desenho à mão'. O WebP, apesar de menos eficiente teoricamente, manteve 60 FPS em celulares e preservou a integridade visual, uma decisão técnica guiada pela experiência real do usuário, não por benchmarks.
O que torna o sistema de câmera diferente de um scroll comum?
Não é scroll. É navegação espacial: paralaxe por mouse (desktop), giroscópio (móvel), auto-glance suave ao se aproximar de portas, e navegação por teclado para acessibilidade. A câmera 'nota' os elementos, não só segue um eixo Y. Cada movimento tem intenção física, não apenas funcional.
Como o som foi integrado sem prejudicar o desempenho?
Cada ambiente tem uma trilha leve e loops curtos (vento, zumbido de monitor, rangido de porta), todos em formato Web Audio API com pré-carregamento seletivo. Nada é carregado antes do necessário, e sons de interação (como o clique da porta) usam buffers curtos e cacheados, sem dependência de bibliotecas pesadas.
Fontes
- tympanus.netfonte original
- Categoria
- CEVIU Design
- Publicado
- 15 de junho de 2026
- Editoria
- CEVIU Design
