shigureni.dev

距離で陰影をつける

明るさを距離で落とす。近い壁を明るく、遠い壁を暗くすると、奥行きが強まって霧の中のように見える。面の向きも組み合わせると、壁の角がはっきり分かれる。

const MAP = [
  "##########",
  "#........#",
  "#..####..#",
  "#..#..#..#",
  "#..#..#..#",
  "#........#",
  "#..##.##.#",
  "#..#...#.#",
  "#......#.#",
  "##########",
]

const mw = MAP[0].length
const mh = MAP.length
const isWall = (x, y) => x < 0 || y < 0 || x >= mw || y >= mh || MAP[y | 0][x | 0] === "#"

export default (c) => {
  const w = c.canvas.width
  const h = c.canvas.height
  const colW = 2
  const cols = Math.ceil(w / colW)
  const tanHalf = Math.tan(Math.PI / 6)
  const maxDist = 9
  const posX = 1.6
  const posY = 1.6
  let t = 0

return () => {
    t += 0.01
    const ang = 0.6 + Math.sin(t) * 0.5
    const dirX = Math.cos(ang)
    const dirY = Math.sin(ang)
    const planeX = -dirY * tanHalf
    const planeY = dirX * tanHalf

c.fillStyle = colors.tint(150)
    c.fillRect(0, 0, w, h / 2)
    c.fillStyle = colors.tint(40)
    c.fillRect(0, h / 2, w, h / 2)

for (let col = 0; col < cols; col++) {
      const cameraX = (2 * col) / cols - 1
      const rayX = dirX + planeX * cameraX
      const rayY = dirY + planeY * cameraX
      let mapX = posX | 0
      let mapY = posY | 0
      const deltaX = Math.abs(1 / rayX)
      const deltaY = Math.abs(1 / rayY)
      let stepX
      let stepY
      let sideDistX
      let sideDistY
      if (rayX < 0) {
        stepX = -1
        sideDistX = (posX - mapX) * deltaX
      } else {
        stepX = 1
        sideDistX = (mapX + 1 - posX) * deltaX
      }
      if (rayY < 0) {
        stepY = -1
        sideDistY = (posY - mapY) * deltaY
      } else {
        stepY = 1
        sideDistY = (mapY + 1 - posY) * deltaY
      }
      let side = 0
      for (let k = 0; k < 32; k++) {
        if (sideDistX < sideDistY) {
          sideDistX += deltaX
          mapX += stepX
          side = 0
        } else {
          sideDistY += deltaY
          mapY += stepY
          side = 1
        }
        if (isWall(mapX, mapY)) break
      }
      const perp = side === 0 ? sideDistX - deltaX : sideDistY - deltaY
      const lineH = h / Math.max(perp, 0.1)
      const far = Math.min(1, perp / maxDist)
      const base = (1 - far) * (side === 1 ? 0.6 : 1)
      const g = Math.max(8, Math.min(238, (20 + base * 210) | 0))
      c.fillStyle = colors.tint(g)
      c.fillRect(col * colW, h / 2 - lineH / 2, colW + 0.6, lineH)
    }
  }
}

far = perp / maxDist で距離を 0..1 に正規化し、(1 − far) を明るさにして遠い壁を暗く沈める。side === 1 の面をさらに 0.6 倍して、向きの違う面を一段暗くする。距離と向きの二つを掛けると、同じ高さの壁でも遠近と角が読めて、廊下の奥行きが立つ。maxDist を下げると暗くなるのが早く、霧が濃くなる。