E1 · Medir
5 minRode o bloco "medir a cena e o peso".
Pronto quando: A linha começa com OK: parado 0 · rolando (o número de desenhos ao rolar varia com a máquina), termina com fora da tela 0 · reduzir 1 · DPR 1,5, e vem saída: 0.
Aula 4 · 15 min
Profundidade com Three.js sem travar a página
Quadros de vídeo dão o filme; Three.js dá uma cena desenhada em código, que muda de ângulo conforme a rolagem. O risco é a cena desenhar sem parar, mesmo parada ou fora da tela, e esquentar o celular. Aqui você mede, num Chromium sem tela, quantas vezes a cena desenha em cada situação, e vê o erro comum falhar.
Começar a aula
Nesta aula você vai
- 1Desenhar sob demanda: só quando o progresso da rolagem mudou
- 2Teto de densidade (1,5) e pausa fora da tela com IntersectionObserver
- 3Contar os desenhos com Playwright: parado, rolando, fora da tela e reduzir movimento
- 4Quanto o Three.js pesa na página
Objetivo: medir uma cena Three.js que só desenha quando a rolagem muda, para fora da tela e respeita reduzir movimento.
01Quando a cena desenha
Desenho sob demanda: cada pergunta é um motivo para NÃO desenhar. Clique em cada etapa.
Clique em cada bloco do diagrama para ver o que ele faz.
O erro comum é o laço do tutorial: requestAnimationFrame chamando render() 60 vezes por segundo, para sempre.
02O coração da cena do kit
Página kit/site-three/index.html: quatro anéis em profundidades diferentes; a câmera anda com a rolagem. Three.js 0.186.1 (npm, 19/10/2026), copiado em vendor/.
Trecho · kit/site-three/index.html
// Sob demanda: só desenha quando a rolagem mudou o progresso e a cena está na tela.
const talvez = () => {
pedido = false;
if (!visivel) return;
const p = progresso();
if (Math.abs(p - ultimo) < 1e-4) return;
ultimo = p; desenhar(p);
};
const agendar = () => { if (!pedido) { pedido = true; requestAnimationFrame(talvez); } };03Medir os desenhos
O three-medir.mjs rola a página num Chromium sem tela e lê window.__renders em cada situação.
Terminal · medir a cena e o peso
K=~/projetos/formacao-cinema-ia-sites-v72/kit
E=${TMPDIR:-/tmp}/ensaio-sites/a4; rm -rf "$E"; mkdir -p "$E"
node "$K/scripts/servir.mjs" "$K/site-three" > "$E/url.txt" & S=$!
until U=$(cat "$E/url.txt") && [ -n "$U" ] && curl -s -o /dev/null "$U"; do sleep 0.3; done
node "$K/scripts/three-medir.mjs" "$U"; echo "saída: $?"
kill $S
python3 "$K/scripts/peso.py" "$K/site-three" | head -1
echo "three.js com gzip -9: $(cat "$K"/site-three/vendor/*.js | gzip -9 | wc -c) bytes"Terminal · erro comum: desenhar sempre
K=~/projetos/formacao-cinema-ia-sites-v72/kit
E=${TMPDIR:-/tmp}/ensaio-sites/a4; mkdir -p "$E"
node "$K/scripts/servir.mjs" "$K/site-three" > "$E/url.txt" & S=$!
until U=$(cat "$E/url.txt") && [ -n "$U" ] && curl -s -o /dev/null "$U"; do sleep 0.3; done
node "$K/scripts/three-medir.mjs" "${U}?sempre=1" | grep "^FALHA"; echo "saída: ${PIPESTATUS[0]}"
kill $SExemplo do repositório
Chromium 156.0.8078.4 (Playwright 1.64.0) parado 0 · rolando 30 · fora da tela 0 · reduzir 1 · DPR 1,5 (tela com densidade 3) OK: parado 0 · rolando 30 · fora da tela 0 · reduzir 1 · DPR 1,5 saída: 0 PESO: js 2,12 · html/css 0,00 (MB) three.js com gzip -9: 415205 bytes
Parado e fora da tela: zero. Com reduzir movimento: um quadro só. As duas últimas linhas são o peso: 2,12 MB brutos (sem minificar), 0,42 MB com gzip -9. Servidores costumam comprimir JS; JPEG quase não comprime. Meça o que vai trafegar antes de comparar com o filme.
FALHA: desenhou 103 vezes parado (devia ser 0) FALHA: desenhou 81 vezes fora da tela (devia ser 0) FALHA: com reduzir movimento desenhou 83 vezes (devia ser 1) saída: 1
Com ?sempre=1 a página liga o laço do tutorial. Os números variam a cada execução; o que não varia é a falha.
04Quadros de vídeo ou Three.js?
Os dois cabem na mesma página; cada um faz uma coisa bem.
1. Quadros
Foto real, material, luz difícil: o que um gerador ou uma câmera fazem melhor que código.
O peso cresce com a duração do filme.
2. Three.js
Formas, diagramas, partículas, peças que reagem ao mouse ou mudam de cor: tudo desenhado na hora.
O peso é a biblioteca (2,12 MB brutos, 0,42 MB com gzip aqui) e o trabalho da placa a cada desenho.
3. Juntos
Filme de quadros na abertura e uma peça Three.js numa seção abaixo. Cada um com a sua regra: quadros na janela de bitmaps, cena sob demanda.
A biblioteca certa para cada peça de motion está no curso 3 (aula 6).
05Prática
Medir, quebrar e consertar.
E2 · O erro
5 minRode o mesmo medidor com ?sempre=1 no fim da URL (bloco "erro comum: desenhar sempre").
Pronto quando: Três linhas FALHA: desenhou … e saída: 1.
E3 · Sua cena
20 minCopie kit/site-three para uma pasta sua e troque os anéis por outra forma (TorusKnotGeometry, por exemplo) e a cor do material. Mantenha a função talvez e o teto de densidade. Sirva a pasta e meça.
Pronto quando: O three-medir.mjs na sua pasta responde OK: parado 0 … reduzir 1 com saída: 0.
06Teste da aula
A explicação aparece depois da sua resposta.
Pergunta 1 de 4
A página está parada, com a cena Three.js na tela. Quantas vezes por segundo ela deve desenhar?
Correto
Desenho sob demanda: só quando o progresso da rolagem mudou. Desenhar a mesma imagem 60 vezes por segundo gasta bateria e esquenta o celular.Não é essa
Desenho sob demanda: só quando o progresso da rolagem mudou. Desenhar a mesma imagem 60 vezes por segundo gasta bateria e esquenta o celular.Rever: Quando a cena desenhaPergunta 2 de 4
Num celular com devicePixelRatio 3, o kit desenha com densidade 1,5. Por quê?
Correto
O trabalho da placa cresce com o quadrado da densidade: (3 ÷ 1,5)² = 4. O teto é escolha de engenharia, não limite da biblioteca.Não é essa
O trabalho da placa cresce com o quadrado da densidade: (3 ÷ 1,5)² = 4. O teto é escolha de engenharia, não limite da biblioteca.Rever: Quando a cena desenhaPergunta 3 de 4
O medidor mostra "fora da tela 85". O que falta na página?
Correto
Fora da tela ninguém vê o desenho. O observador diz quando o canvas saiu, e a checagem para antes do render.Não é essa
Fora da tela ninguém vê o desenho. O observador diz quando o canvas saiu, e a checagem para antes do render.Rever: Quando a cena desenhaPergunta 4 de 4
O que a página do kit faz com "reduzir movimento" ligado?
Correto
Quem pediu menos movimento recebe a cena parada, inteira. O medidor confere: reduzir 1.Não é essa
Quem pediu menos movimento recebe a cena parada, inteira. O medidor confere: reduzir 1.Rever: O coração da cena do kitTeste concluído
Você acertou {a} de {n}. Acertando todas, a aula é marcada como concluída.Escolha uma alternativa. A explicação aparece depois da sua tentativa.
07Em três frases
Sob demandaDesenha só quando o progresso mudou e a cena está na tela.
TetoDensidade até 1,5; reduzir movimento = um quadro.
Medirwindow.__renders contado pelo three-medir.mjs, e o peso da biblioteca no peso.py.