Acabei de colocar uma sala neste site. É um escritório em uma casa que não existe, numa colina acima do oceano, e você pode andar por ele, sentar e pegar objetos. A casa é imaginária. Tudo o que você pode pegar nela é real: meus livros, os cursos que fiz, os produtos que construí, os parques que visitei e as recomendações que colegas escreveram para mim no LinkedIn.
Foram quatro tentativas até chegar aqui, e as três primeiras falharam. Acho que a maneira como falharam é mais útil do que a sala em si, então é disso que trata este post.
Por que three.js, afinal
Tudo começou no X (Twitter). Eu via ali, o tempo todo, trabalhos incríveis em 3D, coisas que as pessoas construíram para rodar no navegador com three.js, e queria tentar por conta própria. Na verdade, essa foi a única razão. Quando anotamos o objetivo da primeira tentativa, era simplesmente que o ponto é construir algo em three.js. Eu estava curioso.
Tentativa um: dez visuais para a mesma ideia
No fim de setembro, comecei com o arquivo do meu blog como tema: 523 posts, organizados no espaço por tempo e assunto. Construímos seis conceitos como renders de verdade: uma paisagem de colunas, uma impressão em risografia de duas tintas, um mapa de estrelas, uma tempestade de papel, um relevo de terreno e um pequeno diorama de mesa. Mais quatro ideias (um livro, uma árvore, uma sala de impressão, tinta na água) chegaram só até rascunhos. Nove das dez estão abaixo. A paisagem de colunas nunca foi salva.
Rejeitei as dez. Quando anotamos o motivo, a conclusão foi simples. Toda tentativa era a mesma ideia, pontos feitos dos mesmos posts, com um renderizador diferente. Mudar a técnica dez vezes não resolvia o fato de que a peça não tinha um assunto de verdade. Também desenhamos os mesmos dados como um gráfico 2D simples, como a régua que a versão em 3D precisava superar, o que é um bom teste que recomendo a qualquer pessoa tentada a usar 3D só pelo 3D.
Tentativas dois e três: um assunto de verdade, e a briga errada
No início de outubro tentei de novo, agora com assuntos de verdade: como o Ask Sydney encontra as fontes por trás de uma resposta, e como um dos meus produtos funciona por dentro. As primeiras versões eram simples e feitas, na prática, para gente como eu, que já se importa com o funcionamento de um pipeline.
Então fizemos uma direção de arte de verdade nas duas. Modelos feitos no Blender, um ambiente iluminado, bloom, profundidade de campo, névoa e sombras suaves. As peças foram testadas, eram acessíveis e estavam prontas para tradução. Mesmo assim, continuei achando que não eram boas o bastante, porque eu as comparava com o concept art que tinha gerado com um modelo de imagem antes de começarmos, e ao lado dele elas perdiam todas as vezes.
Aqui está cada peça em três etapas: a primeira versão, a versão com direção de arte e o concept art com o qual eu a comparava. Primeiro, como o Ask Sydney encontra suas fontes:
E como o DIALØGUE produz um episódio:
A lição que anotamos foi que o three.js em tempo real não consegue igualar um render offline fotorrealista. Uma imagem estática pode gastar minutos em um único quadro, acertando a iluminação, a profundidade de campo e cada textura. Um navegador tem alguns milissegundos por quadro. Então a regra para a tentativa seguinte passou a ser: o 3D em tempo real nunca compete em realismo. Ele vence ao responder à pessoa que está diante dele, e se um vídeo pudesse substituir a peça, a peça está errada.
Tentativa quatro, e ainda muito não
Aquelas três tentativas usaram modelos e ferramentas diferentes, incluindo DeepSeek e o GPT da OpenAI. Nenhuma delas chegou ao meu padrão de qualidade. A quarta tentativa, no início de novembro, foi com o Claude Opus 5.5 no Claude Code.
Eu adoraria dizer que funcionou de primeira. Não funcionou. Antes da sala, disse não a um conjunto de copos de água mostrando como dividir um orçamento de mídia (tático demais), uma peça de tinta, uma paisagem de papel recortado para sobrevoar (sem graça demais), quatro esboços de outros mundos, um museu da minha carreira para percorrer a pé e um estúdio com seis mesas, uma para cada disciplina de marketing. Minha anotação sobre o estúdio foi que estava "muito longe do fator uau" que eu procurava e que "as seis mesas são horríveis". E eram.
A ideia que funcionou veio de mim, não do modelo. E se o visitante fosse um convidado na casa dos meus sonhos, e eu mostrasse a ele o meu escritório? Descrevi a sala como a imagino: a mesa com as minhas costas para a janela, a estante de livros, um sofá comprido e uma mesa para sentar em volta, tomar café e conversar, uma lareira e, lá fora, árvores e ondas do oceano, como em Big Sur. Quando vi a primeira versão rodando, disse "sim, é por aqui".
Depois vieram os detalhes. Rejeitei os sofás volumosos demais, uma mesa genérica, uma porta feia, um abajur de chão e árvores que não pareciam de Big Sur. O que pedi foi uma "sala de estudo de classe mundial, de luxo discreto". Antes, no projeto, eu tinha tentado descrever a sensação com o saguão de um bom hotel, onde o cheiro e as flores fazem você se sentir seguro e bem cuidado, e com uma tigela de ramen, que "parece simples, mas é muito difícil acertar". Essa continua sendo a melhor descrição que tenho.
À esquerda está uma versão inicial da sala, e à direita, a sala hoje.
Como ela é feita
O Blender constrói a sala e fixa a luz nela, usando o renderizador Cycles, para que o navegador não precise calcular como a luz do sol cai sobre o piso. O three.js então desenha a sala ao vivo e cuida de tudo o que responde a você: andar, sentar, pegar objetos, ficar até o entardecer.
Há uma regra de honestidade. A casa é imaginária e diz isso, mas tudo o que um convidado pega é real e tem uma fonte. As palavras em cada objeto são curtas, porque minha regra para a sala era mostrá-la em 3D, com uma linha curta e sem um muro de texto.
A sala também funciona em 13 idiomas e tem uma versão escrita para leitores de tela e para quem usa um navegador que não consegue desenhá-la.
Os primeiros dez segundos
Antes do lançamento, testamos a sala em um build de desenvolvimento, que é mais lento que o site de verdade, com três visitantes simulados, cada um com um papel, um dispositivo e uma velocidade de conexão diferentes, e sem nenhuma explicação sobre a página. Eram agentes de IA, não pessoas reais, então trato isso como um teste rápido e não como pesquisa. Mesmo assim, o resultado foi claro. O mais rápido viu uma tela preta com "Bem-vindo, leve o tempo que precisar." por cerca de oito segundos. Os outros dois viram preto pelos dez segundos inteiros. Dois deles disseram que teriam ido embora por conta própria. "Leve o tempo que precisar" soou como "espere", e nada dizia o que era a página.
Por isso, agora uma imagem estática da sala aparece desde o primeiro segundo, com o meu nome e uma linha embaixo, e as fotos dos parques só carregam depois que a sala está pronta. Ainda não tenho dados de visitantes reais.
Depois do lançamento continuei, porque um celular lento simulado ainda levava cerca de 8 segundos para entrar no ar. Agora o navegador começa a baixar a sala junto com a página, em vez de depois que o código dela carregou, a vista do oceano chega pela metade do tamanho e ganha nitidez um instante depois, e o próprio modelo 3D passou de 2,8 MB para 0,81 MB, sem nenhuma diferença que eu consiga ver. Em um celular lento simulado, a sala agora entra no ar em cerca de 4,5 segundos. No meu celular, ela roda de forma fluida.
O que aprendi
Bom gosto importa mais do que nunca. Você precisa ter o bom gosto, e também o vocabulário, para pedir à máquina que crie o que você tem em mente. Do começo ao fim, as ideias e os nãos foram meus, e os modelos de IA fizeram a construção. O que decidiu se ficaria bom foi se eu conseguia dizer o que estava errado (volumoso demais, genérico, sem graça, não parecia Big Sur) e o que eu queria no lugar. Quando não conseguia descrever, recebia uma versão muito bem feita da coisa errada.
Um produto é um meio para um fim, não o fim em si. Você precisa entender por que está construindo, a quem ele serve e que conclusões ou impressões quer deixar nas pessoas. As primeiras tentativas partiram de uma técnica. A sala partiu de um visitante que nunca me conheceu: o que ele pega e o que pensa quando vai embora. Quando isso ficou claro, muitas decisões se tomaram sozinhas.
O modelo importou? Acho que sim. Foi o primeiro que levou a sala além do meu padrão. Porém, quando releio as anotações das quatro tentativas, o assunto e o propósito mudaram tanto quanto o modelo, e sinceramente não consigo separar os dois.
A sala está em chandlernguyen.com/study. Ela funciona também no celular, eu conferi o meu. Se você já construiu algo em 3D com IA, ou tentou e desistiu, o que o impediu? Tenho curiosidade em saber se foram as ferramentas ou a ideia.