shigureni.dev

bloom — 明部を滲ませて足す

明るい部分だけを抜き出して、それをぼかして、元の絵に足し戻す。明部の周りに淡い暈（halo）が広がって、発光しているように出る。

bloom は明部抽出・ぼかし・加算合成の三段で組む。光は重なるほど明るくなるので、halo を元の絵に混ぜるのでなく足す。ぼかしは中心が重く外が軽い釣鐘型のガウシアンが使われ、横方向の 1×n と縦方向の n×1 の二段に分けて適用できる（分離可能フィルタ）ので、3×3 平均を何回か重ねても軽い。HDR レンダリングでは輝度がしきい値を超えた成分だけを bloom に回す。

動く塊で明るさの場を作る。各塊は中心ほど明るく、外へ向かって減衰する。その明るさが 0.6 を超えたセルだけを 1 に倒したのが明部マスクで、下では塊の芯を ink で、背景の明るさをそのまま濃淡で重ねている。

export default (c) => {
  const w = c.canvas.width
  const h = c.canvas.height
  const n = 64
  const cellW = w / n
  const cellH = h / n
  const source = new Float32Array(n * n)
  const mask = new Float32Array(n * n)
  let t = 0

const blobs = [
    { px: 0, py: 0, sx: 0.7, sy: 0.5, rx: 0.3, ry: 0.26 },
    { px: 2, py: 1, sx: 0.5, sy: 0.9, rx: 0.28, ry: 0.3 },
    { px: 4, py: 3, sx: 0.9, sy: 0.6, rx: 0.32, ry: 0.24 },
  ]

return () => {
    t += 0.01

source.fill(0)
    for (const b of blobs) {
      const cx = (w * 0.5 + Math.sin(t * b.sx + b.px) * w * b.rx) / cellW
      const cy = (h * 0.5 + Math.cos(t * b.sy + b.py) * h * b.ry) / cellH
      for (let y = 0; y < n; y++) {
        for (let x = 0; x < n; x++) {
          const dx = x - cx
          const dy = y - cy
          const d = Math.sqrt(dx * dx + dy * dy)
          const v = Math.max(0, 1 - d / 9)
          if (v > source[y * n + x]) source[y * n + x] = v
        }
      }
    }

// 明るさが 0.6 を超えたところだけ 1 に倒す
    for (let i = 0; i < mask.length; i++) mask[i] = source[i] > 0.6 ? 1 : 0

for (let y = 0; y < n; y++) {
      for (let x = 0; x < n; x++) {
        const v = source[y * n + x] * 0.5
        c.fillStyle = mask[y * n + x] > 0 ? colors.ink : colors.tint(238 - v * 230)
        c.fillRect(x * cellW, y * cellH, cellW + 1, cellH + 1)
      }
    }
  }
}

0.6 のしきい値が明部の輪郭を切る。上げると芯が痩せ、下げると塊全体が芯に飲まれる。塊が動くと芯の位置も場の上を移る。

この芯のマスクをぼかすと halo になる。3×3 の平均を横一回・縦一回の二段に分けて、passes の回数だけ重ねる。一回の平均で輪郭が一マスぶん滲み、繰り返すほど暈が広がる。下はぼかした halo だけを濃淡に塗っている。

export default (c) => {
  const w = c.canvas.width
  const h = c.canvas.height
  const n = 64
  const cellW = w / n
  const cellH = h / n
  const mask = new Float32Array(n * n)
  const glow = new Float32Array(n * n)
  const scratch = new Float32Array(n * n)
  const passes = 3
  let t = 0

const blobs = [
    { px: 0, py: 0, sx: 0.7, sy: 0.5, rx: 0.3, ry: 0.26 },
    { px: 2, py: 1, sx: 0.5, sy: 0.9, rx: 0.28, ry: 0.3 },
    { px: 4, py: 3, sx: 0.9, sy: 0.6, rx: 0.32, ry: 0.24 },
  ]

return () => {
    t += 0.01

mask.fill(0)
    for (const b of blobs) {
      const cx = (w * 0.5 + Math.sin(t * b.sx + b.px) * w * b.rx) / cellW
      const cy = (h * 0.5 + Math.cos(t * b.sy + b.py) * h * b.ry) / cellH
      const gr = 5
      for (let y = 0; y < n; y++) {
        for (let x = 0; x < n; x++) {
          const dx = x - cx
          const dy = y - cy
          if (dx * dx + dy * dy <= gr * gr) mask[y * n + x] = 1
        }
      }
    }

// 明部マスクを横・縦の二段で平均し、passes 回重ねる
    glow.set(mask)
    for (let p = 0; p < passes; p++) {
      blurX(glow, scratch, n)
      blurY(scratch, glow, n)
    }

for (let y = 0; y < n; y++) {
      for (let x = 0; x < n; x++) {
        const v = glow[y * n + x]
        c.fillStyle = colors.tint(238 - v * 230)
        c.fillRect(x * cellW, y * cellH, cellW + 1, cellH + 1)
      }
    }
  }
}

passes を 1 にすると暈が芯のすぐ際までしか広がらず、3、5 と上げるほど淡く遠くまで滲む。芯のあった所がいちばん明るく、外へ向かって連続して暗くなる。

halo を元の絵に足し戻すと bloom になる。暗い背景に halo を加算で重ね、芯は ink のまま上に置く。芯が明るいぶんだけ周囲が押し上がって、塊が発光しているように出る。

const blobs = [
    { px: 0, py: 0, sx: 0.7, sy: 0.5, rx: 0.3, ry: 0.26 },
    { px: 2, py: 1, sx: 0.5, sy: 0.9, rx: 0.28, ry: 0.3 },
    { px: 4, py: 3, sx: 0.9, sy: 0.6, rx: 0.32, ry: 0.24 },
  ]

return () => {
    t += 0.01

glow.set(mask)
    for (let p = 0; p < passes; p++) {
      blurX(glow, scratch, n)
      blurY(scratch, glow, n)
    }

for (let y = 0; y < n; y++) {
      for (let x = 0; x < n; x++) {
        const i = y * n + x
        // 暗い背景に、ぼかした明部を足し戻す
        const lit = 238 - Math.min(0.7, glow[i] * 0.9) * 230
        c.fillStyle = mask[i] > 0 ? colors.ink : colors.tint(lit)
        c.fillRect(x * cellW, y * cellH, cellW + 1, cellH + 1)
      }
    }
  }
}

芯の周りに淡い暈がにじみ、塊どうしが近づくと halo が重なってその間がいっそう明るい。glow[i] * 0.9 の係数を上げると発光が強まり、Math.min(0.7, ...) の上限が halo の明るさの天井を決める。明部抽出・ぼかし・加算という三つの部品の合成で発光が立つ。