Várias esferas na cena

Várias esferas + chão enorme. Lambert simples: luz · normal.

Trabalhe sobre uma cópia da pasta inicio do exemplo correspondente. Leia, digite, mude uma coisa, preveja, recarregue e confira. A referência completa fica na raiz da pasta do exemplo, no pacote anexo.

O que você pratica

• best.t menor?
• chão r=100?
• light = max(0, dot)?

Mini cena

Três esferas e um planeta-chão.

Erro comum: não testar t>epsilon — auto-hit.

Lambert

No início light=1. Use o produto com a luz.

const light = Math.max(0, dot(hit.n, norm(vec(1,1,1))));

Pare e experimente. Sombras suaves relativas.

Cor por objeto

Cada esfera carrega seu col.

Não publique exercícios com dados reais. Conteúdo fictício de Recife.

Como o exemplo desta etapa funciona

A referência desta etapa reúne app.js, index.html, styles.css. Abra o resultado pronto, localize o trecho que produz varias esferas na cena e só então compare com inicio. Os dois diretórios são independentes: você pode errar, restaurar e repetir sem buscar arquivos de outro capítulo.

Leitura do resultado

Observe primeiro o que permanece parado e o que responde a uma ação. Depois altere um único número, cor, coordenada ou condição. Antes de recarregar, escreva o efeito esperado. Essa previsão separa uma mudança compreendida de uma tentativa ao acaso.

Diagnóstico guiado

Se a cena sumir, confira a primeira mensagem do Console e o caminho dos arquivos. Em SVG, revise viewBox, atributos e ordem das formas. Em p5.js, confirme a biblioteca local e se setup e draw foram escritos corretamente. Em Canvas ou WebGL, verifique o contexto e os limites numéricos antes de mudar outra coisa.

Critério de avanço

Avance quando conseguir descrever a cena, modificar um parâmetro com previsão e restaurar a referência sem copiar arquivos de uma etapa posterior.

Atividades

1. Por que max 0?
2. hitWorld escolhe?
3. Ambiente 0.2?

Respostas comentadas

Só abra depois de tentar.

Atividade 1. Evita luz negativa nas costas.

Atividade 2. O menor t positivo.

Atividade 3. Evita preto absoluto.

Exemplo deste capítulo: pacote de exemplos/29-cenas/.

O arquivo completo

Referência do exemplo 29-cenas, reproduzida aqui para que você possa conferir sem sair da página.

index.html

<!DOCTYPE html>
<html lang="pt-BR">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Cenas — Laboratório da Luz</title>
  <link rel="stylesheet" href="styles.css">

</head>
<body>
  <a class="skip" href="#conteudo">Ir ao conteúdo</a>
  <header>
    <p class="tag">Laboratório da Luz · Recife</p>
    <h1>Cenas</h1>
  </header>
  <main id="conteudo">
<p class="dica">Cenas</p>
<div class="stage"><canvas id="view" width="480" height="270" aria-label="Imagem renderizada"></canvas></div>
<div class="controles">
  <label>Amostras <input id="samples" type="number" min="1" max="16" value="4"></label>
  <button type="button" id="run">Renderizar</button>
  <span id="status" class="dica"></span>
</div>
  </main>
  <footer>
    <p>Conteúdo fictício para estudo local. Não publique dados reais.</p>
  </footer>
  <script src="app.js"></script>
</body>
</html>