shigureni.dev

端から先 — 見えない方角

レイマーチで衝突点を見つけたあと、その点で SDF を四方に少しずらすと勾配が出る。勾配は形の表面が向いている方角で、勾配が法線になる。法線と光の向きの内積を明るさにすると、平らな塗りが陰影を持つ。

SDF f(x, y) の勾配 ∇f = (∂f/∂x, ∂f/∂y) は、距離がいちばん速く増える向きを指す。境界の上では、勾配が外向きの法線そのものになる。解析的に微分する代わりに、f(x+e, y) − f(x−e, y) の中心差分で近似できる。法線 n と光源方向 l の内積 max(0, n·l) が Lambert の拡散反射で、面が光のほうを向くほど明るい。二次元の n を三次元に起こし、視線方向まで足してカメラ基底に乗せると、レイマーチが立体の陰影を持つ。

二つの円を smin で融合した SDF を場にして、境界の内側だけ法線で陰影をつける。各セルで距離をまず測り、負（形の中）なら勾配を中心差分で取って光との内積を明るさに写す。正（外）は距離で薄く塗る。光源を左上に固定すると、左上を向いた面が明るく、右下に回った面が暗く沈む。

const sceneSDF = (x, y, cx, cy, s, t) => {
  const ax = cx + Math.cos(t) * s * 0.16
  const ay = cy + Math.sin(t * 0.9) * s * 0.12
  const bx = cx - Math.cos(t * 1.1) * s * 0.18
  const by = cy + Math.sin(t) * s * 0.14
  const dA = Math.hypot(x - ax, y - ay) - s * 0.16
  const dB = Math.hypot(x - bx, y - by) - s * 0.13
  const k = s * 0.12
  const hh = Math.max(k - Math.abs(dA - dB), 0) / k
  return Math.min(dA, dB) - hh * hh * k * 0.25
}

export default (c) => {
  const w = c.canvas.width
  const h = c.canvas.height
  const cell = Math.max(4, Math.round(w / 90))
  const cx = w / 2
  const cy = h / 2
  const s = Math.min(w, h)
  const lightX = -0.55
  const lightY = -0.83
  let t = 0

return () => {
    t += 0.02

for (let py = 0; py < h; py += cell) {
      for (let px = 0; px < w; px += cell) {
        const x = px + cell * 0.5
        const y = py + cell * 0.5
        const d = sceneSDF(x, y, cx, cy, s, t)

if (d > 0) {
          const v = Math.min(1, d / (s * 0.5))
          c.fillStyle = colors.tint(60 + v * 178)
          c.fillRect(px, py, cell + 1, cell + 1)
          continue
        }

const e = 1.5
        const gx = sceneSDF(x + e, y, cx, cy, s, t) - sceneSDF(x - e, y, cx, cy, s, t)
        const gy = sceneSDF(x, y + e, cx, cy, s, t) - sceneSDF(x, y - e, cx, cy, s, t)
        const glen = Math.hypot(gx, gy) + 0.0001
        const nx = gx / glen
        const ny = gy / glen
        const lit = Math.max(0, nx * lightX + ny * lightY)
        c.fillStyle = colors.tint(20 + lit * 200)
        c.fillRect(px, py, cell + 1, cell + 1)
      }
    }
  }
}

gx・gy の二行が勾配の中心差分で、両隣の距離の差をそのまま向きの成分にしている。glen で割って単位ベクトルにすると、形の境界に対する外向きの法線になる。左上に置いた光と内積を取るので、二つの塊が smin で溶け合う谷では法線が寝て暗く、盛り上がった面では立って明るい。e を大きくすると差分が粗くなって陰影が鈍り、光源の向き lightX・lightY を回すと明るい面が移る。ここで取っているのは二次元の法線で、これを三次元に起こして視線とカメラを足すと、平面の写経がレイマーチの立体に渡る。

本格的な流体（Navier–Stokes）は、反応拡散の次の到達点になる。拡散の枠はもう手元にあって、そこへ移流（場が自分自身に運ばれる）と圧力投影（非圧縮を保つ）を足せば届く。

GAN や拡散モデルは真の外縁になる。学習という別の道具立てが要る上に、色や質感が単色の濃淡では落ちる。ニューラル CA も畳み込みカーネルが重く、小さな格子と衝突する。このあたりは 2d context の写経では原理だけ抜く、というやり方が通じない。

端は、行ける所と行けない所の境目が見える場所でもある。距離・反転・拡散という素手の数学で、シェーダや学習モデルの核心の手前までは届く。