shigureni.dev

smin — ブール合成が代数になる

形が距離で書けると、二つの形を合わせるのが集合演算でなく min / max で済む。二つの SDF を min で取れば和（union）、max で積（intersection）、片方を反転した max(a, -b) で差（subtraction）になる。形の集合を直接いじらず、距離関数の値だけを混ぜて合成する。

距離で形を持つと、ブール合成（和・積・差）が距離関数の代数演算になる。点 p から二つの形までの符号付き距離 a, b について、min(a, b) は「どちらか近いほうまでの距離」で和、max(a, b) は「両方の外に出るまでの距離」で積、max(a, -b) は二つ目だけ内外を反転した差。min を滑らかにした smin（smooth minimum）は、二つの距離が k より近づいた所で最小値から二次の項を差し引いて谷を丸める。Inigo Quilez が整理した式の一つが h = max(k − |a − b|, 0) / k; min(a, b) − h²·k·0.25 で、距離が離れていれば h = 0 で素の min に戻り、近いほど引く量が増える。

円を二つ動かして smin で合成する。中心からの距離から半径を引いた円の SDF を二枚作り、smin で混ぜる。素の min なら二円が触れる交点で角が立つところが、smin では触れる手前から谷が丸まり、水飴のように繋がる。

const smin = (a, b, k) => {
  const hh = Math.max(k - Math.abs(a - b), 0) / k
  return Math.min(a, b) - hh * hh * k * 0.25
}

export default (c) => {
  const w = c.canvas.width
  const h = c.canvas.height
  const n = 96
  const cellW = w / n
  const cellH = h / n
  const cx = w / 2
  const cy = h / 2
  const s = Math.min(w, h)
  const radius = s * 0.13
  const blend = s * 0.16 // smin の融合半径。0 に近づけると角が立つ
  let t = 0

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

return () => {
    t += 0.02
    const ox = Math.cos(t) * s * 0.18
    const oy = Math.sin(t * 0.9) * s * 0.12
    for (let gy = 0; gy < n; gy++) {
      for (let gx = 0; gx < n; gx++) {
        const x = (gx + 0.5) * cellW
        const y = (gy + 0.5) * cellH
        const dA = Math.hypot(x - cx + ox, y - cy) - radius
        const dB = Math.hypot(x - cx - ox, y - cy - oy) - radius
        const d = smin(dA, dB, blend)
        const band = Math.abs(Math.sin(d * 0.12))
        const v = d < 0 ? 0.15 : band
        c.fillStyle = colors.tint(8 + (1 - v) * 210)
        c.fillRect(gx * cellW, gy * cellH, cellW + 1, cellH + 1)
      }
    }
  }
}

smin の k（ここでは blend）が融合の半径。Math.max(k - Math.abs(a - b), 0) が二つの距離の差を測り、差が k より小さい所だけ hh が立って min から二次の項を引く。blend を 0.01 まで下げると素の min に戻り、二円がぶつかる瞬間に角ができる。上げるほど離れたうちから溶けはじめる。中（d < 0）は一律の濃さで塗り、外は sin(d * 0.12) で距離を縞に焼いて等値線にしている。合体も切り抜きも、距離関数を数行混ぜるだけで書ける。

work は円と矩形とリングを smin と差で組み合わせ、毎フレーム動かしている。合成する形の数が増えても、min / max / smin の組み合わせが一つずつ積み上がるだけになる。

metaballs は別ルートで同じ融合に届く。各点が r² / 距離² の影響を周りへ撒き、その合計があるしきい値を超えた所が「中」になる。近い点ほど強く効き、複数の影響が重なった谷間で合計が押し上がってしきい値を越えると橋がかかる。距離で形を組む発想と、影響を足して等値面を取る発想で、根は近い。ただし metaballs は境界までの符号付き距離を正確には持たない。