shigureni.dev

二つの向き — 形から画面か、画面から形か

順方向は、頂点と面を持って回し、画面へ投影して塗る。ループは「形」を回す——立体の数だけ仕事が増える。逆方向は、画面の画素ごとに光線を世界へ飛ばし、当たったものを調べる。ループは「画素」を回す——画面の解像度だけ仕事が増える。世界が複雑でも画面は一定なので、込み入った形ほど逆方向が向く。

同じ球を二つの向きで描く。左の発想（順方向）は、球面に撒いた点を回して投影する。形が主役で、点が画面に飛んでくる。

export default (c) => {
  const w = c.canvas.width
  const h = c.canvas.height
  const cx = w / 2
  const cy = h / 2
  const r = Math.min(w, h) * 0.32
  const camZ = Math.min(w, h) * 1.1
  const focal = Math.min(w, h) * 1.0
  const n = 260
  let t = 0

const pts = []
  for (let i = 0; i < n; i++) {
    const y = 1 - (i / (n - 1)) * 2
    const rad = Math.sqrt(Math.max(0, 1 - y * y))
    const phi = i * 2.399963
    pts.push([Math.cos(phi) * rad, y, Math.sin(phi) * rad])
  }

return () => {
    t += 0.012
    const cyA = Math.cos(t)
    const syA = Math.sin(t)

c.fillStyle = colors.paper
    c.fillRect(0, 0, w, h)

for (const p of pts) {
      const x = p[0] * r
      const y = p[1] * r
      const z = p[2] * r
      const x1 = x * cyA - z * syA
      const z1 = x * syA + z * cyA
      const s = focal / (camZ + z1)
      const depth = (z1 / r + 1) * 0.5
      c.fillStyle = colors.tintAlpha(20, 0.2 + depth * 0.7)
      c.beginPath()
      c.arc(cx + x1 * s, cy - y * s, 1 + depth * 3, 0, Math.PI * 2)
      c.fill()
    }
  }
}

右の発想（逆方向）は、画面の各画素から「ここに球があるか、どちらを向いているか」を問う。画素が主役で、球は距離の式として在る。円の内側で、その点の球面の高さ √(r² − dx² − dy²) を法線の奥行き成分にすると、平らな円が陰影を持った球になる。

export default (c) => {
  const w = c.canvas.width
  const h = c.canvas.height
  const cell = 4
  const cx = w / 2
  const cy = h / 2
  const r = Math.min(w, h) * 0.34
  const ll = Math.hypot(0.5, 0.6, 0.62)
  const lx = -0.5 / ll
  const ly = -0.6 / ll
  const lz = 0.62 / ll
  let t = 0

return () => {
    t += 0.02
    const lxr = lx * Math.cos(t) - lz * Math.sin(t)
    const lzr = lx * Math.sin(t) + lz * Math.cos(t)

c.fillStyle = colors.paper
    c.fillRect(0, 0, w, h)

for (let py = 0; py < h; py += cell) {
      for (let px = 0; px < w; px += cell) {
        const dx = px + cell / 2 - cx
        const dy = py + cell / 2 - cy
        const dd = dx * dx + dy * dy
        if (dd > r * r) continue
        const nz = Math.sqrt(r * r - dd)
        const nx = dx / r
        const ny = dy / r
        const nzn = nz / r
        const lit = Math.max(0.12, nx * lxr + ny * ly + nzn * lzr)
        c.fillStyle = colors.tint(Math.max(8, Math.min(238, (20 + lit * 210) | 0)))
        c.fillRect(px, py, cell + 0.6, cell + 0.6)
      }
    }
  }
}

左は点が動き、右は画素が球を測る。左は形の数で重くなり、右は画面の解像度で重くなる。√(r² − dd) の一行が球の表面の高さで、これを法線にして光を当てると、二次元の円が立体に見える。光源を回すと明るい面が動く。この逆方向を距離関数で一般化したのがレイマーチング。