Catedral VO₂

Esta página conta como e por que a Catedral VO₂ foi construída — as decisões criativas, o motor 3D escrito do zero em canvas 2D, o modelo por trás dos números (fictícios) e o que qualquer pessoa pode reaproveitar. É o making-of de uma peça que tenta provar um ponto: dá para explicar fisiologia com a força de um edifício.

01A ideia

O VO₂max — o volume máximo de oxigênio que o corpo consegue captar, transportar e usar por minuto — é um dos preditores de mortalidade mais fortes que a medicina conhece. O problema é que ele quase sempre é mostrado do jeito mais esquecível possível: uma linha que desce com a idade, ou um velocímetro com uma agulha. Nenhum dos dois gruda na memória de um paciente.

A aposta desta peça: e se o VO₂max fosse um lugar? Um edifício que a pessoa pudesse orbitar e habitar? A catedral gótica é a metáfora perfeita — ela existe para ser monumental, para elevar o olhar, e sua estrutura é literalmente uma máquina de sustentar altura e luz. É exatamente o que o condicionamento aeróbico faz pelo corpo.

Os dois filtros da Vitrine

• Novidade formal. A estrutura precisa parecer nova — não pode ser a versão bonita de um gráfico. Aqui, o dado vira construção: um edifício que sobe bay a bay e rui de trás para frente, em tempo real.
• Desejo profissional. Um médico ou nutricionista tem que pensar "quero isso na minha consulta". Por isso a peça ancora na idade e no treino do paciente e projeta o futuro em dois cenários — manter × parar.

02A catedral é o corpo

Cada sistema que sustenta o VO₂max virou um elemento da arquitetura. Não é decoração: é um mapa que o profissional pode percorrer com o paciente.

Quando o condicionamento cai, não é só a altura que se perde: a luz se apaga (menos mitocôndrias ativas), a nave encurta (menos capacidade), a rede de contrafortes some. A ruína é fisiológica.

03O motor 3D, sem 3D

Não há Three.js aqui, nem WebGL, nem uma única imagem importada. A catedral inteira é desenhada num <canvas> 2D, com um motor de projeção escrito à mão. A escolha foi deliberada: um arquivo que abre em qualquer lugar, sem CDN, sem dependência que possa quebrar.

Pipeline por quadro

1. Câmera orbital em coordenadas esféricas (azimute, elevação, raio) apontando para um alvo. Uma base lookAt (forward/right/up) transforma cada ponto do mundo para o espaço da câmera.
2. Projeção em perspectiva: sx = cx·f/cz, sy = cy·f/cz, com distância focal derivada do campo de visão.
3. Ordenação (painter's algorithm): as faces são ordenadas da mais distante para a mais próxima e pintadas nessa ordem.
4. Sombreamento por normal × direção de luz, com um termo hemisférico (faces para cima recebem "céu") e névoa que dissolve a pedra distante no fundo.
5. Luz aditiva: num segundo passo com globalCompositeOperation='lighter', entram os vitrais (halos radiais), os feixes de luz, a poeira e a rosácea de 12 pétalas.

Geometria procedural

A catedral não é um modelo salvo — ela é reconstruída a cada quadro a partir de um único número: v, o VO₂max normalizado entre 0 e 1. A "completude" de cada bay da nave é:

c_i = clamp(v · N − i, 0, 1)   // i = índice do bay, N = total de bays

Isso é o coração do truque. Com v alto, todos os bays têm c_i = 1: paredes cheias, telhado, vitrais, ábside. Com v baixo, os bays do fundo caem para c_i = 0 (ruína, só fundações), o bay de transição fica a meio caminho — parede com crista denteada, sem telhado, sem luz. Como v é interpolado suavemente entre o valor atual e o alvo, a catedral sobe e rui em movimento contínuo quando você mexe nos controles.

As torres (o coração) escalam a altura diretamente com v — daí a sensação de que o edifício cresce quando o paciente treina. Fundações permanecem mesmo na ruína: a base do que já foi construído nunca desaparece por completo.

04Os números (fictícios)

O VO₂max exibido vem de um modelo ilustrativo, calibrado apenas para se comportar de forma plausível — não para diagnosticar ninguém:

t    = 1 − e^(−anos_treino / 6,5)          // fração de condicionamento (0..1)
vo2  = base(sexo) + 10·t − (idade−25)·(0,52 − 0,22·t)

A leitura fisiológica embutida: o treino adiciona capacidade (o +10·t) e ainda desacelera o declínio ligado à idade (o termo 0,52 − 0,22·t: quem treina perde menos por ano). É por isso que a projeção "manter × parar" abre um abismo tão grande em 10 anos — o mesmo mecanismo que torna o VO₂max um marcador tão poderoso na vida real. Os percentis mostrados são uma aproximação logística sobre uma referência sedentária por idade/sexo. Tudo ilustrativo.

05À beira do leito

A afordância de consulta é o que separa uma demo bonita de uma ferramenta. Três controles bastam:

• Idade e anos de treino aeróbico (0 = sedentário → 20 = atleta master) e sexo biológico — a catedral responde na hora.
• Entrar na nave desce a câmera ao chão, na direção da rosácea: o gesto de "vamos ver por dentro".
• Projeção em 10 anos é o momento clínico. Um clique em parar de treinar e o paciente vê a própria catedral recuar. É o argumento sem precisar de palavra.

06Acessível e responsivo

• Teclado: setas orbitam a câmera, +/− aproximam; foco visível em todos os controles; o slider continua respondendo às setas quando focado.
• prefers-reduced-motion: congela a deriva da câmera, a poeira e a rotação da rosácea; as transições viram instantâneas.
• Mobile: testado a 390px e 414px. Elementos absolutos centralizados com left:50%; transform:translateX(-50%), linhas de controle flex-wrap:nowrap, overflow-x:hidden no corpo — sem cortes nem deslocamentos.

07Deploy

Arquivos estáticos, repositório público no GitHub, publicação no Cloudflare Pages via wrangler. Sem servidor, sem banco, sem etapa de build — a peça inteira é uma pasta.

git init -b main
gh repo create pmf-labs/catedral-vo2 --public --source . --push
wrangler pages deploy . --project-name catedral-vo2

O que dá para reaproveitar

• O projetor 3D em canvas 2D (câmera orbital + painter + sombreamento + névoa) é genérico: serve para qualquer massa arquitetônica ou dado volumétrico.
• O padrão "um número → geometria procedural reconstruída por quadro" vale para qualquer biomarcador que você queira ver crescer e decair.
• A luz aditiva (halos + feixes + poeira) é o que faz canvas 2D parecer volumétrico sem custo de shaders.

Catedral VO₂ · Vitrine Fable #06 · © 2026 Paulo Melo Franco (pmf-labs) · MIT
Feito com um motor 3D escrito à mão · Co-Authored-By: Claude Opus 4.8 (1M context)