shigureni.dev

光を当てる — 法線と陰影

面の明度を、向きと光から決める。法線と光源方向の内積を明るさにすると、光のほうを向いた面が明るく、背いた面が暗い。固定の明度でなく、面の角度から物理的に明度が出る。

ランバートの余弦則では、拡散面の明るさは法線 n と光源方向 l の内積 max(0, n · l) に比例する。面が光に正対するとき最大、垂直になると 0。拡散反射（ディフューズ）で、面ごとに一つの明度を与えるのがフラットシェーディング。頂点ごとに法線を持って面内で補間するとなめらかになり（グーローシェーディング）、画素ごとに法線を補間するとさらに質が上がる（フォンシェーディング）。ここでは面ごと一定のフラットシェーディングで、立体の各面がくっきり分かれる。環境光の最小値を足しておくと、影の側が真っ黒に潰れない。

画家のソートに、法線と光の内積による陰影を足す。光は左上・手前に固定。面ごとの固定明度が、向きから決まる本物の陰影に変わる。

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.21
  const camZ = Math.min(w, h) * 0.85
  const focal = Math.min(w, h) * 0.95
  const ll = Math.hypot(0.45, 0.55, 0.7)
  const lx = -0.45 / ll
  const ly = 0.55 / ll
  const lz = -0.7 / ll
  let t = 0

const verts = []
  for (let i = 0; i < 8; i++) {
    verts.push([(i & 1) * 2 - 1, ((i >> 1) & 1) * 2 - 1, ((i >> 2) & 1) * 2 - 1])
  }
  const faces = [
    [1, 3, 7, 5],
    [0, 4, 6, 2],
    [2, 6, 7, 3],
    [0, 1, 5, 4],
    [4, 5, 7, 6],
    [0, 2, 3, 1],
  ]

const rot = (v, ca) => {
    const x = v[0] * r
    const y = v[1] * r
    const z = v[2] * r
    const x1 = x * ca.cy - z * ca.sy
    const z1 = x * ca.sy + z * ca.cy
    const y2 = y * ca.cx - z1 * ca.sx
    const z2 = y * ca.sx + z1 * ca.cx
    return [x1, y2, z2]
  }

return () => {
    t += 0.012
    const ca = { cy: Math.cos(t), sy: Math.sin(t), cx: Math.cos(t * 0.55), sx: Math.sin(t * 0.55) }
    const rv = verts.map((v) => rot(v, ca))
    const proj = rv.map((p) => {
      const s = focal / (camZ + p[2])
      return [cx + p[0] * s, cy - p[1] * s]
    })

const polys = faces.map((f) => {
      let zc = 0
      for (const i of f) zc += rv[i][2]
      zc /= f.length
      const a = rv[f[0]]
      const b = rv[f[1]]
      const d = rv[f[2]]
      let nx = (b[1] - a[1]) * (d[2] - a[2]) - (b[2] - a[2]) * (d[1] - a[1])
      let ny = (b[2] - a[2]) * (d[0] - a[0]) - (b[0] - a[0]) * (d[2] - a[2])
      let nz = (b[0] - a[0]) * (d[1] - a[1]) - (b[1] - a[1]) * (d[0] - a[0])
      const nl = Math.hypot(nx, ny, nz) + 1e-6
      nx /= nl
      ny /= nl
      nz /= nl
      if (nz > 0) {
        nx = -nx
        ny = -ny
        nz = -nz
      }
      const lit = Math.max(0.14, nx * lx + ny * ly + nz * lz)
      return { f, zc, lit }
    })
    polys.sort((p, q) => q.zc - p.zc)

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

for (const poly of polys) {
      c.beginPath()
      for (let i = 0; i < poly.f.length; i++) {
        const p = proj[poly.f[i]]
        if (i === 0) c.moveTo(p[0], p[1])
        else c.lineTo(p[0], p[1])
      }
      c.closePath()
      c.fillStyle = colors.tint(20 + poly.lit * 210)
      c.fill()
    }
  }
}

lit = max(0.14, n · l) が明るさで、法線をカメラ向き（nz < 0）に揃えてから光ベクトルとの内積を取る。0.14 の下限が環境光で、光に背いた面が真っ黒にならない。光の向き lx/ly/lz を回すと、明るい面が移る。エッジの stroke を外したので、面と面の境は明度差だけで分かれる——同じ立方体でも、向きから決まる陰影が乗ると、固定明度のときよりずっと立体に見える。

work は立方体と八面体を別々の軸で回し、面を画家のアルゴリズムで奥から塗って、法線と光の内積で sky 単色 LUT に陰影をつけている。三角の面（八面体）でも四角の面（立方体）でも、法線は外積一発で出るので、同じコードで陰影が乗る。