Diorama: um quarto 3D feito de primitivas, não de modelos

Acabámos de publicar uma nova peça no Lab — Diorama, um quarto em corte isométrico que podes reorganizar, recolorir e revestir directamente no browser. Parece um render de design. Não é. Não há um único ficheiro de modelo nem imagem de textura por trás. Cada objecto é construído em código, e eis porque o fizemos assim.

Sem pipeline de assets, de propósito

A forma habitual de pôr mobília numa cena 3D é modelá-la (ou comprá-la), exportar ficheiros .glb, carregá-los em runtime e gerir um conjunto de texturas. Isso é uma pipeline: ficheiros para alojar, licenças para acompanhar, tempo de carregamento a pagar, e um acoplamento rígido entre a arte e o código. Para uma experiência pequena e autónoma, não queríamos nada disso.

Por isso cada peça — o sofá, a estante, a secretária, a planta — é um THREE.Group montado a partir de primitivas de caixa arredondada (RoundedBoxGeometry) mais alguns cilindros e icosaedros. Um sofá é uma base, dois braços, um encosto, almofadas e quatro pés. Uma estante é um painel de fundo, laterais, prateleiras horizontais e alguns sólidos decorativos. É Lego, em código. Todo o catálogo tem algumas centenas de linhas e carrega instantaneamente porque não há nada para descarregar.

Fazer primitivas parecerem caras

Caixas low-poly podem parecer baratas, ou podem parecer um render de estúdio. A diferença é quase toda iluminação e composição.

• Câmara ortográfica num ângulo isométrico. Aquele corte plano de casa de bonecas vem de uma projecção ortográfica, não de perspectiva. Duas paredes formam um L; o canto aberto fica virado para o observador. Limitamos a órbita para o corte funcionar sempre.
• Uma luz principal quente com sombras suaves. Uma única luz direccional com um mapa de sombras PCF-soft de 2K faz a maior parte do trabalho, mais um preenchimento de hemisfério frio para as sombras não serem preto morto.
• Arestas arredondadas em tudo. RoundedBoxGeometry em vez de um BoxGeometry duro capta a luz em cada bisel. É o maior salto de "arte de programador" para "desenhado".
• Uma cadeia de pós-processamento contida. Bloom nos ecrãs e no candeeiro, um passe de contorno para a selecção, tone mapping ACES. Nada pesado.

Texturas desenhadas em runtime

A única coisa que não se faz com geometria é um chão de madeira ou um tapete com padrão. Também não enviámos imagens para isso — são pintadas num <canvas> quando a página carrega (tábuas com veio, um tapete axadrezado) e usadas como CanvasTexture. Muda-se o tom do chão e basta redesenhar o canvas. Sem ficheiros, e como cada material é gerado, recolorir seja o que for é uma linha a definir a cor.

A parte interactiva vem de graça

Como a mobília é código com metadados, as funcionalidades de edição quase surgem sozinhas. Cada peça sabe a sua área e que materiais são pintáveis. Arrastar faz raycast sobre o plano do chão e encaixa numa grelha. Recolorir escreve nas instâncias de material da própria peça — clonadas por colocação, para nada contaminar entre cópias. Os temas definem paredes, chão, tapete e sofá numa só chamada. O arranjo persiste em localStorage, e a parte de que mais gostamos: o quarto inteiro codifica-se num link partilhável. Esse truque merece o seu próprio artigo.

Experimenta

Vai mexer na mobília: o Diorama ao vivo. É open source — está todo no GitHub, sem build, Three.js directamente de um CDN. Abre o catalog.js e encontras todo o conjunto de mobília num só sítio.