shigureni.dev

頂点を回して投影する

立体は頂点の集まり。立方体なら八隅の (±1, ±1, ±1)。これを回転行列で回し、透視投影で画面へ落とす。回して投影する一手を project という関数にまとめておくと、辺を引くのも面を塗るのも、この関数の上に乗る。

立体のデータは頂点（座標の配列）と、それをどう繋ぐかの位相情報（辺や面のインデックス配列）に分かれる。座標を変換しても繋ぎ方は変わらないので、頂点だけを回して投影し、辺・面はインデックスで参照する。頂点バッファとインデックスバッファに対応し、GPU も同じ持ち方をする。頂点を一度変換すれば、その結果を複数の面が共有できる。

立方体の八頂点を回して投影し、点で打つ。各頂点を一度だけ project に通し、画面座標と奥行きを返す。

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])
  }

// 頂点を回して投影する。画面座標 [px, py] と奥行き z を返す
  const project = (v, ca) => {
    const x = v[0] * r
    const y = v[1] * r
    const z = v[2] * r
    const x1 = x * ca.cy - z * ca.sy
    const z1 = x * ca.sy + z * ca.cy
    const y2 = y * ca.cx - z1 * ca.sx
    const z2 = y * ca.sx + z1 * ca.cx
    const s = focal / (camZ + z2)
    return [cx + x1 * s, cy - y2 * s, z2]
  }

return () => {
    t += 0.014
    const ca = { cy: Math.cos(t), sy: Math.sin(t), cx: Math.cos(t * 0.55), sx: Math.sin(t * 0.55) }

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

for (const v of verts) {
      const p = project(v, ca)
      c.fillStyle = colors.tint(20)
      c.beginPath()
      c.arc(p[0], p[1], 5, 0, Math.PI * 2)
      c.fill()
    }
  }
}

project の中身は透視投影そのもの。ca に回転の cos / sin をまとめて渡し、y 軸・x 軸の二段回転をかけてから s = focal / (camZ + z2) で縮める。返り値の三つ目に奥行き z2 を持たせると、後で面を奥から並べるのに使える。いまは八つの点が宙で回っているだけで、どれが手前でどれが奥か分からない。