shigureni.dev

透視投影 — 焦点距離とカメラ

回転で向きを決め、奥行きの割り算で縮める。二つを繋ぐのがカメラ。視点を立体から camZ だけ手前に引き、回転後の z を足した camZ + z で割る。奥の頂点はすぼまり、手前の頂点は膨らむ。

回転だけだと立体は平行投影（正射影）で、奥行きによる大小がつかず製図のように見える。視点を有限の距離 camZ に置いて focal / (camZ + z) で割ると透視投影になり、消失点が生まれる。camZ は視点と立体の距離、focal はレンズの焦点距離にあたる。camZ を小さくすると広角レンズのように遠近が誇張され、大きくすると望遠のように平行投影へ近づく。射影変換は同次座標の 4×4 行列一つにまとまり、GPU はこの行列を頂点ごとに掛けてから w（ここでの camZ + z）で割っている。

さっきの立方体に透視投影を入れ、八頂点を線で結ぶ。s = focal / (camZ + z) を画面座標の倍率にすると、手前の面が大きく、奥の面が小さい台形になって、箱の奥行きが出る。

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.2
  const camZ = Math.min(w, h) * 0.85 // 視点から立体までの距離。小さいほど遠近が強い
  const focal = Math.min(w, h) * 0.95
  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 edges = [
    [0, 1],
    [1, 3],
    [3, 2],
    [2, 0],
    [4, 5],
    [5, 7],
    [7, 6],
    [6, 4],
    [0, 4],
    [1, 5],
    [2, 6],
    [3, 7],
  ]

return () => {
    t += 0.014
    const cyA = Math.cos(t)
    const syA = Math.sin(t)
    const cxA = Math.cos(t * 0.55)
    const sxA = Math.sin(t * 0.55)

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

const proj = verts.map((v) => {
      const x = v[0] * r
      const y = v[1] * r
      const z = v[2] * r
      const x1 = x * cyA - z * syA
      const z1 = x * syA + z * cyA
      const y2 = y * cxA - z1 * sxA
      const z2 = y * sxA + z1 * cxA
      const s = focal / (camZ + z2)
      return [cx + x1 * s, cy - y2 * s]
    })

c.strokeStyle = colors.tint(20)
    c.lineWidth = 2
    c.beginPath()
    for (const e of edges) {
      const a = proj[e[0]]
      const b = proj[e[1]]
      c.moveTo(a[0], a[1])
      c.lineTo(b[0], b[1])
    }
    c.stroke()
  }
}

s = focal / (camZ + z2) が透視で、回転後の奥行き z2 を視点距離に足して割っている。手前へ来た頂点は camZ + z2 が小さく s が大きいので画面で大きく、奥へ回ると小さくなる。回るたびに正方形が台形へ歪み、立体の角が見える。camZ を r の二倍くらいまで下げると遠近が強烈になって箱が誇張され、十倍に上げると歪みが消えて平行投影（製図）に近づく。cy - y2 * s と y を引いているのは、画面の y が下向きで数学の y が上向きだから。