ビューイングパイプラインでの変換

// ビューイングパイプラインが経由する座標系
type PipelineStage = "modeling" | "world" | "camera" | "projection" | "ndc"

// 文字を描いた canvas をテクスチャにして、常にカメラを向く板（Sprite）にする。
// 「モデリング座標系 → ワールド座標系」のような長いラベルもあるので、文字の幅を測って板の横幅を決める
const createLabel = (text: string, color: string, height: number) => {
  const canvas = document.createElement("canvas")
  const context = canvas.getContext("2d")

  let textWidth = LABEL_TEXTURE_HEIGHT
  if (context) {
    context.font = LABEL_FONT
    textWidth = context.measureText(text).width
  }

  canvas.width = Math.ceil(textWidth + LABEL_TEXTURE_PADDING * 2)
  canvas.height = LABEL_TEXTURE_HEIGHT

  if (context) {
    // canvas の大きさを変えると描画状態が初期化されるので、書体はここで指定し直す
    context.font = LABEL_FONT
    context.textAlign = "center"
    context.textBaseline = "middle"
    context.fillStyle = color
    context.fillText(text, canvas.width / 2, canvas.height / 2)
  }

  const texture = new CanvasTexture(canvas)
  texture.colorSpace = SRGBColorSpace
  // 透明な余白まで深度を書くと、あとから描く線がラベルの矩形の形に欠けてしまう
  const sprite = new Sprite(
    new SpriteMaterial({ map: texture, transparent: true, depthWrite: false })
  )
  // 高さを指定の値に揃え、幅は canvas の縦横比から決める
  sprite.scale.set((height * canvas.width) / canvas.height, height, 1)

  return sprite
}

// 1 本の軸を、原点をまたぐ直線・正の向きを指す矢印・軸名のラベルの 3 点セットで作る
const createAxis = (name: string, color: string, direction: Vector3) => {
  const group = new Group()

  const lineGeometry = new BufferGeometry().setFromPoints([
    direction.clone().multiplyScalar(-AXIS_LENGTH),
    direction.clone().multiplyScalar(AXIS_LENGTH)
  ])
  group.add(new LineSegments(lineGeometry, new LineBasicMaterial({ color })))

  // ConeGeometry は +y を向いているので、軸の正の向きへ回してから先端に置く
  const arrowGeometry = new ConeGeometry(ARROW_RADIUS, ARROW_HEIGHT, 16)
  const arrow = new Mesh(arrowGeometry, new MeshBasicMaterial({ color }))
  arrow.position.copy(direction).multiplyScalar(AXIS_LENGTH)
  arrow.quaternion.setFromUnitVectors(CONE_UP, direction)
  group.add(arrow)

  const label = createLabel(name, color, AXIS_LABEL_HEIGHT)
  label.position.copy(direction).multiplyScalar(AXIS_LENGTH + LABEL_OFFSET)
  group.add(label)

  return group
}

// モデリング変換行列。拡大/縮小と回転はどちらも原点を中心とする変換なので、
// 物体が原点にあるうちに大きさと向きを決め、最後の平行移動で置き場所へ運ぶ
const createModelingMatrix = ({ scale, rotationY, position }: Placement) =>
  new Matrix4()
    .makeTranslation(...position)
    .multiply(new Matrix4().makeRotationY(MathUtils.degToRad(rotationY)))
    .multiply(new Matrix4().makeScale(scale, scale, scale))

// 頂点に行列を掛けた位置を求める。
// applyMatrix4 は同次座標の w で割るので、投影行列を含む段では透視除算まで済んだ座標になる
const transformPoints = (vertices: Vector3[], matrix: Matrix4) =>
  vertices.map((vertex) => vertex.clone().applyMatrix4(matrix))

// 頂点位置を書き換えながら使う線。稜線のつなぎ方と色だけを先に決めておき、
// 位置は変換の進み具合に応じて入れ直す
const createMorphingWireframe = (vertexCount: number, edges: number[], color: string) => {
  const position = new Float32BufferAttribute(vertexCount * 3, 3)
  // 中身を何度も書き換えることを three.js に伝えておく
  position.setUsage(DynamicDrawUsage)

  const geometry = new BufferGeometry()
  geometry.setAttribute("position", position)
  geometry.setIndex(edges)

  const lines = new LineSegments(geometry, new LineBasicMaterial({ color }))
  // 頂点が動き回るので、生成時に求めた境界球で視錐台カリングを判断させない
  lines.frustumCulled = false

  return { lines, position }
}

// 変換前の位置と変換後の位置を、進み具合で混ぜて線に書き込む。
// 途中の位置は 2 つの座標系を見比べるための見せかけで、そこに座標系があるわけではない
const morphWireframe = (
  wireframe: MorphingWireframe,
  from: Vector3[],
  to: Vector3[],
  progress: number
) => {
  const point = new Vector3()
  from.forEach((start, i) => {
    point.lerpVectors(start, to[i], progress)
    wireframe.position.setXYZ(i, point.x, point.y, point.z)
  })
  wireframe.position.needsUpdate = true
}

// 3 本の軸は、いま見ている座標系そのものを表す。原点と向きが読み取れればよいので、
// 段ごとの表示倍率（content）の外に置き、長さは変えない
scene.add(
  createAxis("x", X_COLOR, new Vector3(1, 0, 0)),
  createAxis("y", Y_COLOR, new Vector3(0, 1, 0)),
  createAxis("z", Z_COLOR, new Vector3(0, 0, 1))
)

const content = new Group()
scene.add(content)

// 写す側のカメラ。ここでは置き方を固定し、そこから決まる行列だけを使う
const subject = new PerspectiveCamera(SUBJECT_FOV, SUBJECT_ASPECT, SUBJECT_NEAR, SUBJECT_FAR)
subject.position.set(...SUBJECT_POSITION)
subject.lookAt(...SUBJECT_TARGET)
subject.updateMatrixWorld()

// 視野変換。カメラを置くために行った回転と平行移動を、ちょうど打ち消す逆行列
const view = subject.matrixWorld.clone().invert()

// z 軸の反転。右手系のカメラ座標系を、視線が z 軸の正の向きになる左手系へ移す
const zFlip = new Matrix4().makeScale(1, 1, -1)

// 投影変換。three.js の投影行列は右手系のカメラ座標を前提にしているので、
// 左手系に直した分（z 軸の反転）を打ち消してから掛ける
const projection = new Matrix4().multiplyMatrices(subject.projectionMatrix, zFlip)

// ワールド座標を、それぞれの段の座標系へ移す行列。手前の段の行列に順に掛け合わせていく
const toCamera = view.clone()
const toProjection = new Matrix4().multiplyMatrices(zFlip, toCamera)
const toNdc = new Matrix4().multiplyMatrices(projection, toProjection)

// 3 体が共有する 1 つの頂点データと、体ごとに違うモデリング変換行列
const houseVertices = HOUSE_VERTICES.map(([x, y, z]) => new Vector3(x, y, z))
const modelingMatrices = PLACEMENTS.map(createModelingMatrix)

// カメラが写す範囲の 8 隅。正規化デバイス座標系の立方体の隅を逆投影すると、ワールド座標での隅になる
const frustumCorners = NDC_CORNERS.map(([x, y, z]) => new Vector3(x, y, z).unproject(subject))

// ワールド座標をその段の座標系へ移す行列から、その段での頂点位置を求める
const pointsAt = (stageMatrix: Matrix4) => ({
  houses: modelingMatrices.map((modeling) =>
    transformPoints(houseVertices, new Matrix4().multiplyMatrices(stageMatrix, modeling))
  ),
  frustum: transformPoints(frustumCorners, stageMatrix)
})

const stagePoints: Record<PipelineStage, StagePoints> = {
  // モデリング座標系にあるのは、3 体が共有している 1 つの形状データ。
  // カメラが写す範囲はワールド座標系のもので、モデリング変換では動かない（現れるだけ）
  modeling: {
    houses: modelingMatrices.map(() => houseVertices),
    frustum: frustumCorners
  },
  world: pointsAt(new Matrix4()),
  camera: pointsAt(toCamera),
  projection: pointsAt(toProjection),
  ndc: pointsAt(toNdc)
}

const houses = PLACEMENTS.map((placement) =>
  createMorphingWireframe(HOUSE_VERTICES.length, HOUSE_EDGES, placement.color)
)
const frustum = createMorphingWireframe(NDC_CORNERS.length, BOX_EDGES, FRUSTUM_COLOR)
// カメラが写す範囲は、モデリング変換のあいだに現れる
frustum.lines.material.transparent = true
content.add(...houses.map((house) => house.lines), frustum.lines)

// 形状データの色から各体の色へ移すために、色も混ぜられる形で持っておく
const shapeColor = new Color(SHAPE_COLOR)
const placementColors = PLACEMENTS.map((placement) => new Color(placement.color))

// 見ている変換。ここではモデリング変換（モデリング座標系 → ワールド座標系）と、
// その進み具合（0 で変換前の座標系、1 で変換後の座標系）
const from: PipelineStage = "modeling"
const to: PipelineStage = "world"
const progress = 0

const before = stagePoints[from]
const after = stagePoints[to]

// 表示倍率も、変換前の段と変換後の段のあいだを取る（座標値そのものは変えない）
content.scale.setScalar(MathUtils.lerp(VIEW_SCALE[from], VIEW_SCALE[to], progress))

houses.forEach((house, i) => {
  morphWireframe(house, before.houses[i], after.houses[i], progress)
  // モデリング座標系にあるのは 3 体に共有された 1 つの形状データなので、
  // 3 体に分かれていくにつれて、無彩色から体ごとの色へ移す
  const separation = from === "modeling" ? progress : 1
  house.lines.material.color.copy(shapeColor).lerp(placementColors[i], separation)
})

morphWireframe(frustum, before.frustum, after.frustum, progress)
frustum.lines.material.opacity = from === "modeling" ? progress : 1

// 変換の見出しを図の下に置く
const title = createLabel("モデリング座標系 → ワールド座標系", TITLE_COLOR, TITLE_HEIGHT)
title.position.y = TITLE_Y
scene.add(title)

// createLabel（文字を描いた板）・createModelingMatrix（モデリング変換行列）は、
// 座標系間の変換のデモと同じものを使う

// 頂点に行列を掛けた位置で、稜線を結んだ線を作る
const createWireframe = (vertices: Vector3[], matrix: Matrix4, edges: number[], color: string) => {
  const points = vertices.map((vertex) => vertex.clone().applyMatrix4(matrix))
  const geometry = new BufferGeometry().setFromPoints(points).setIndex(edges)
  return new LineSegments(geometry, new LineBasicMaterial({ color }))
}

// カメラの形。線だけで描く場面の物体と見分けがつくよう、レンズの付いた筐体として作る。
//
// カメラ座標系での形で、視点が原点、視線が z 軸の負の向き。
// レンズの先端が原点に来るように全体を +z へずらしてあるので、
// 視線の先（-z 側）には何も置かれず、カメラが場面を隠さない
const createCameraShape = () => {
  const bodyMaterial = new MeshStandardMaterial({ color: CAMERA_BODY_COLOR })
  const body = new Mesh(new BoxGeometry(1.2, 0.8, 0.7), bodyMaterial)
  body.position.z = 0.8

  const lensMaterial = new MeshStandardMaterial({ color: CAMERA_LENS_COLOR })
  const lens = new Mesh(new CylinderGeometry(0.25, 0.3, 0.5, 32), lensMaterial)
  // CylinderGeometry は y 軸方向に伸びるので、視線の向きへ倒す
  lens.rotation.x = Math.PI / 2
  lens.position.z = 0.25

  // 上に載せたビューファインダー。これが無いと、上下が引っくり返っても形が同じで分からない
  const finder = new Mesh(new BoxGeometry(0.5, 0.25, 0.4), bodyMaterial)
  finder.position.set(0, 0.52, 0.9)

  // 大きさを合わせる倍率は内側の群に持たせ、外側の群には置き方だけを持たせる
  const model = new Group()
  model.scale.setScalar(CAMERA_SCALE)
  model.add(body, lens, finder)

  const object = new Group()
  object.add(model)

  return object
}

// 枠に写る像。頂点をカメラで投影すると -1〜1 の正規化デバイス座標が返るので、
// それを枠の大きさに合わせて広げた位置が、この枠に写る像になる
const createImage = (camera: PerspectiveCamera, modeling: Matrix4, color: string) => {
  const points = houseVertices.map((vertex) => {
    const ndc = vertex.clone().applyMatrix4(modeling).project(camera)
    return new Vector3(ndc.x * PANEL_HALF_WIDTH, ndc.y * PANEL_HALF_HEIGHT, 0)
  })
  const geometry = new BufferGeometry().setFromPoints(points).setIndex(HOUSE_EDGES)
  return new LineSegments(geometry, new LineBasicMaterial({ color }))
}

const houseVertices = HOUSE_VERTICES.map(([x, y, z]) => new Vector3(x, y, z))
const frameCorners = FRAME_CORNERS.map(([x, y, z]) => new Vector3(x, y, z))

// 左に場面とカメラ、右に写る像の枠を並べる
const sceneGroup = new Group()
sceneGroup.position.x = SCENE_OFFSET
const panel = new Group()
panel.position.copy(PANEL_CENTER)
scene.add(sceneGroup, panel)

// 左右の見出し。同じ高さに揃えて置く
const sceneTitle = createLabel("カメラの置き方", TITLE_COLOR, TITLE_HEIGHT)
sceneTitle.position.set(SCENE_TITLE_X, TITLE_HEIGHT_Y, 0)
sceneGroup.add(sceneTitle)

const panelTitle = createLabel("写る像", TITLE_COLOR, TITLE_HEIGHT)
panelTitle.position.set(0, TITLE_HEIGHT_Y - PANEL_CENTER.y, 0)
panel.add(panelTitle)

// 場面に並ぶ 3 体
PLACEMENTS.forEach((placement) => {
  const modeling = createModelingMatrix(placement)
  sceneGroup.add(createWireframe(houseVertices, modeling, HOUSE_EDGES, placement.color))
})

// 像を写す枠。カメラの縦横比に合わせた長方形
panel.add(createWireframe(frameCorners, new Matrix4(), FRAME_EDGES, FRAME_COLOR))

// カメラの形だけが陰影の付く材質なので、光もカメラのためだけに置く
const keyLight = new DirectionalLight("#ffffff", KEY_LIGHT_INTENSITY)
keyLight.position.set(...KEY_LIGHT_POSITION)
scene.add(new AmbientLight("#ffffff", AMBIENT_INTENSITY), keyLight)

// 写す側のカメラ。カメラの置き方は、視点の位置・視線の向き・上方向の 3 つで決まる。
// ここでは位置と向きを固定し、上方向だけを視線のまわりに回す
const roll = 0
const forward = TARGET.clone().sub(CAMERA_POSITION).normalize()

const camera = new PerspectiveCamera(FOV, ASPECT, NEAR, FAR)
camera.position.copy(CAMERA_POSITION)
camera.up.set(0, 1, 0).applyAxisAngle(forward, MathUtils.degToRad(roll))
camera.lookAt(TARGET)
camera.updateMatrixWorld()

// カメラの置き方を表す行列（matrixWorld）を、位置・向き・大きさに分けてカメラの形へ反映する
const cameraShape = createCameraShape()
camera.matrixWorld.decompose(cameraShape.position, cameraShape.quaternion, cameraShape.scale)
sceneGroup.add(cameraShape)

// 枠に写る像。上方向を回すと、視点も視線の向きも変わらないのに、像だけが回る
PLACEMENTS.forEach((placement) => {
  panel.add(createImage(camera, createModelingMatrix(placement), placement.color))
})

// createLabel（文字を描いた板）・createAxis（軸の線・矢印・軸名のラベル）・
// createModelingMatrix（モデリング変換行列）は座標系間の変換のデモと、
// createWireframe（頂点に行列を掛けて線でつなぐ）・createCameraShape（レンズの付いたカメラの形）は
// カメラの置き方のデモと同じものを使う

// カメラの置き方を表す行列。視点の位置・視線の向き・上方向の 3 つから、
// カメラ座標系の 3 本の軸を組み立てる
const createPoseMatrix = ({ azimuth, elevation, distance, roll }: ViewTransformParams) => {
  const azimuthRad = MathUtils.degToRad(azimuth)
  const elevationRad = MathUtils.degToRad(elevation)

  // 視点の位置。注視点のまわりを、方位角・仰角・距離で回す
  const position = new Vector3(
    Math.cos(elevationRad) * Math.sin(azimuthRad),
    Math.sin(elevationRad),
    Math.cos(elevationRad) * Math.cos(azimuthRad)
  )
    .multiplyScalar(distance)
    .add(TARGET)

  // 右手系では視線が z 軸の負の向きになるので、視点から注視点へ向かう向きの逆を z 軸にとる
  const zAxis = position.clone().sub(TARGET).normalize()
  // 上方向。視線を軸に回すと、位置と向きが同じままでもカメラの置き方が変わる
  const up = new Vector3(0, 1, 0).applyAxisAngle(zAxis, MathUtils.degToRad(roll))
  // 上方向と z 軸の両方に直交する向きが x 軸で、そこから y 軸が決まる
  const xAxis = new Vector3().crossVectors(up, zAxis).normalize()
  const yAxis = new Vector3().crossVectors(zAxis, xAxis)

  // 3 本の軸を列に並べ、視点の位置を最後の列に置いたものが、カメラの置き方を表す行列になる
  return new Matrix4().makeBasis(xAxis, yAxis, zAxis).setPosition(position)
}

// 1 つの座標系を、3 本の軸・系の名前・3 体の物体・カメラの組で作る。
// systemMatrix はワールド座標をこの座標系へ移す行列、pose はカメラの置き方を表す行列
const createSystem = (title: string, offsetX: number, systemMatrix: Matrix4, pose: Matrix4) => {
  const group = new Group()
  group.position.x = offsetX

  group.add(
    createAxis("x", X_COLOR, new Vector3(1, 0, 0)),
    createAxis("y", Y_COLOR, new Vector3(0, 1, 0)),
    createAxis("z", Z_COLOR, new Vector3(0, 0, 1))
  )

  const label = createLabel(title, TITLE_COLOR, TITLE_HEIGHT)
  label.position.y = AXIS_LENGTH + TITLE_OFFSET
  group.add(label)

  // 物体はモデリング変換で場面の中に置かれている。そこへ、この座標系へ移す行列を掛ける
  PLACEMENTS.forEach((placement) => {
    const matrix = new Matrix4().multiplyMatrices(systemMatrix, createModelingMatrix(placement))
    group.add(createWireframe(houseVertices, matrix, HOUSE_EDGES, placement.color))
  })

  // カメラも同じで、置き方を表す行列に、この座標系へ移す行列を掛ける
  const cameraMatrix = new Matrix4().multiplyMatrices(systemMatrix, pose)
  const cameraShape = createCameraShape()
  cameraMatrix.decompose(cameraShape.position, cameraShape.quaternion, cameraShape.scale)
  group.add(cameraShape)

  return group
}

const houseVertices = HOUSE_VERTICES.map(([x, y, z]) => new Vector3(x, y, z))

// カメラの置き方（視点の位置・視線の向き・上方向）を表す行列
const pose = createPoseMatrix({ azimuth: 25, elevation: 18, distance: 2.1, roll: 0 })

// 視野変換行列。カメラを置くために行った回転と平行移動を、ちょうど打ち消す逆行列
const view = pose.clone().invert()

// 同じ中身を、ワールド座標系ではそのまま、カメラ座標系では視野変換を掛けて置く。
// ワールド座標系を左、カメラ座標系を右に並べる
scene.add(
  createSystem("ワールド座標系", -GROUP_OFFSET, new Matrix4(), pose),
  createSystem("カメラ座標系", GROUP_OFFSET, view, pose)
)

// カメラの形だけが陰影の付く材質なので、光もカメラのためだけに置く
const keyLight = new DirectionalLight("#ffffff", KEY_LIGHT_INTENSITY)
keyLight.position.set(...KEY_LIGHT_POSITION)
scene.add(new AmbientLight("#ffffff", AMBIENT_INTENSITY), keyLight)

// createLabel（文字を描いた板）・createModelingMatrix（モデリング変換行列）は座標系間の変換のデモと、
// createWireframe（頂点に行列を掛けて線でつなぐ）はカメラの置き方のデモと同じものを使う

// 原点から 1 方向だけへ伸ばす軸。
// 断面は中心が原点で y が上向き、画面は左上の隅が原点で y が下向きになる
const createArrow = (name: string, color: string, from: Vector3, to: Vector3) => {
  const group = new Group()
  const direction = to.clone().sub(from).normalize()

  const lineGeometry = new BufferGeometry().setFromPoints([from, to])
  group.add(new LineSegments(lineGeometry, new LineBasicMaterial({ color })))

  // ConeGeometry は +y を向いているので、軸の向きへ回してから先端に置く
  const arrow = new Mesh(
    new ConeGeometry(ARROW_RADIUS, ARROW_HEIGHT, 16),
    new MeshBasicMaterial({ color })
  )
  arrow.position.copy(to)
  arrow.quaternion.setFromUnitVectors(CONE_UP, direction)
  group.add(arrow)

  const label = createLabel(name, color, AXIS_LABEL_HEIGHT)
  label.position.copy(to).addScaledVector(direction, LABEL_OFFSET)
  group.add(label)

  return group
}

// ビューポート変換行列。正規化デバイス座標（-1〜1）を、ビューポートの中に収まる位置へ移す。
// 中身は、ビューポートの大きさに合わせた拡大/縮小と、
// ビューポートの位置（画面の左端・上端からの距離）への平行移動。
// y 軸を反転する環境では、拡大/縮小の y 方向の倍率が負になる
const createViewportMatrix = ({ width, height, flipY }: ViewportTransformParams) =>
  new Matrix4()
    .makeTranslation(VIEWPORT_X + width / 2, VIEWPORT_Y + height / 2, 0)
    .multiply(new Matrix4().makeScale(width / 2, flipY ? -height / 2 : height / 2, 1))

// 投影変換までを済ませた頂点を、正規化デバイス座標で求める。
// 画像の上での位置を決めるのに使うのは x 座標と y 座標だけなので、z は落としておく
const camera = new PerspectiveCamera(FOV, ASPECT, NEAR, FAR)
camera.position.copy(CAMERA_POSITION)
camera.lookAt(TARGET)
camera.updateMatrixWorld()

const ndcVertices = PLACEMENTS.map((placement) => {
  const modeling = createModelingMatrix(placement)
  return HOUSE_VERTICES.map(([x, y, z]) => {
    const ndc = new Vector3(x, y, z).applyMatrix4(modeling).project(camera)
    return new Vector3(ndc.x, ndc.y, 0)
  })
})

const squareCorners = SQUARE_CORNERS.map(([x, y, z]) => new Vector3(x, y, z))
const screenCorners = SCREEN_CORNERS.map(([x, y, z]) => new Vector3(x, y, z))

// 正規化デバイス座標系の断面を、左側に置いて描くための変換
const ndcDisplay = new Matrix4().makeTranslation(NDC_CENTER.x, NDC_CENTER.y, NDC_CENTER.z)

// デバイス座標系を、右側に画面として置いて描くための変換。
// デバイス座標系は y が下向きなので、描くときだけ y の向きを戻す（表示のための変換）
const screenDisplay = new Matrix4()
  .makeScale(DISPLAY_SCALE, -DISPLAY_SCALE, 1)
  .setPosition(SCREEN_ORIGIN)

// 左に正規化デバイス座標系の断面（上の辺だけ色を変える）と、そこに写っている像を置く
scene.add(
  createWireframe(squareCorners, ndcDisplay, SQUARE_EDGES, FRAME_COLOR),
  createWireframe(squareCorners, ndcDisplay, TOP_EDGE, TOP_EDGE_COLOR)
)
ndcVertices.forEach((vertices, i) => {
  scene.add(createWireframe(vertices, ndcDisplay, HOUSE_EDGES, PLACEMENTS[i].color))
})

// 右に画面を置く
scene.add(createWireframe(screenCorners, screenDisplay, RECT_EDGES, SCREEN_COLOR))

// 断面は中心が原点で y が上向き、画面は左上の隅が原点で y が下向き
const ndcAxisX = NDC_CENTER.clone().setX(NDC_CENTER.x + NDC_AXIS_LENGTH)
const ndcAxisY = NDC_CENTER.clone().setY(NDC_CENTER.y + NDC_AXIS_LENGTH)
const screenAxisX = SCREEN_ORIGIN.clone().setX(SCREEN_ORIGIN.x + SCREEN_AXIS_LENGTH)
const screenAxisY = SCREEN_ORIGIN.clone().setY(SCREEN_ORIGIN.y - SCREEN_AXIS_LENGTH)
scene.add(
  createArrow("x", X_COLOR, NDC_CENTER, ndcAxisX),
  createArrow("y", Y_COLOR, NDC_CENTER, ndcAxisY),
  createArrow("x", X_COLOR, SCREEN_ORIGIN, screenAxisX),
  createArrow("y", Y_COLOR, SCREEN_ORIGIN, screenAxisY)
)

// 左右の見出し。同じ高さに揃えて置く
const ndcTitle = createLabel("正規化デバイス座標系", TITLE_COLOR, TITLE_HEIGHT)
ndcTitle.position.set(NDC_CENTER.x, TITLE_HEIGHT_Y, 0)
const screenTitle = createLabel("デバイス座標系", TITLE_COLOR, TITLE_HEIGHT)
screenTitle.position.set(SCREEN_ORIGIN.x + (SCREEN_WIDTH * DISPLAY_SCALE) / 2, TITLE_HEIGHT_Y, 0)
scene.add(ndcTitle, screenTitle)

// ビューポート変換で移した先を、画面として描く位置に直す
const viewport = createViewportMatrix({ width: 300, height: 200, flipY: true })
const matrix = new Matrix4().multiplyMatrices(screenDisplay, viewport)

// ビューポートの枠と、その中に写る像。断面の上の辺が、枠のどちら側へ移るかが色で分かる
scene.add(
  createWireframe(squareCorners, matrix, SQUARE_EDGES, FRAME_COLOR),
  createWireframe(squareCorners, matrix, TOP_EDGE, TOP_EDGE_COLOR)
)
ndcVertices.forEach((vertices, i) => {
  scene.add(createWireframe(vertices, matrix, HOUSE_EDGES, PLACEMENTS[i].color))
})