ビュー変換行列を求める

前回、こちらの記事（新しいタブで開く）では、カメラを定義する要素の1つとして、Projection Matrix（射影行列）を求めました。

今回は、もう1つの要素である View Matrix（ビュー変換行列）を扱いたいと思います。

pos_clip = projectionMatrix * viewMatrix * modelMatrix * vec4f(position, 1);

ビュー変換行列は、カメラの位置と向きに基づいて、ワールド座標をカメラから見た座標系（ビュー座標系）へ変換する行列です。

前回求めた射影行列では、カメラは原点に固定され、視線の方向も一方向（OpenGL系では −Z 方向）に決まっていました。 そのため、オブジェクトを画面に映すには、Near クリップ面から Far クリップ面の間で、かつ視野角の範囲内（視錐台の内側）にオブジェクトを配置する必要がありました。

この状態では、「もう少し右から見たい」「上から見下ろしたい」と思っても、カメラは動かせません。 見え方を変えるたびに、各オブジェクトの配置を一つひとつ調整し直すことになります。

ビュー変換行列を使うと、カメラをワールド空間内の好きな位置に置き、好きな方向へ向けられるようになります。 各オブジェクトのワールド空間での配置はそのままに、カメラの位置と向きを指定するだけで、シーン全体の見え方を変えられます。

ただし、ビュー変換行列の計算の内部では、実はカメラではなくオブジェクトのほうを動かしています。ビュー変換行列は、すべてのオブジェクトをまとめて同じように動かすことで、あたかもカメラが動いたかのように見せる行列です。 この仕組みは次の章から詳しく見ていきます。

カメラの考え方

現実世界と 3DCG の世界のカメラの違い

現実世界でオブジェクトを撮影するときは、撮りたいものに合わせてカメラを動かします。

一方、3DCG では、カメラは原点に固定したまま（−Z 方向を向いたまま）にし、代わりにシーン内のすべてのオブジェクトをカメラとは逆向きに動かします。

たとえば、カメラを右に 1 動かしたいなら、すべてのオブジェクトを左に 1 動かします。カメラを右に 30° 回したいなら、シーン全体を左に 30° 回します。 こうしてもカメラとオブジェクトの相対的な位置関係は変わらないため、画面上の見え方も同じになります。つまり、あたかもカメラが移動したかのように見ることができます。

この考え方の利点は、前回求めた射影行列をそのまま使えることです。 射影行列は「カメラが原点にあり、−Z 方向を向いている」ことを前提としていました。シーンのほうをこの前提に合わせて動かせば、射影行列には手を加えずに済みます。

相対的な移動と逆行列

では、「オブジェクトをカメラとは逆向きに動かす」変換は、どのように表せばよいでしょうか。ここで登場するのが 逆行列 です。

この記事では、次の 2 つの行列を区別して扱います。

• cameraAim行列：カメラをワールド空間内の好きな位置・向きに実際に移動させる行列
• ビュー変換行列：カメラから見た座標系（ビュー座標系）へ、オブジェクトを相対的に移動させる行列

cameraAim 行列は、原点で −Z 方向を向いているカメラを、好きな位置・向きへ動かす行列です。
一方、ビュー変換行列はその逆で、好きな位置・向きにあるカメラを、原点で −Z 方向を向いた状態へ戻したときに、オブジェクトがどこに来るかを求める行列です。 そのため、ビュー変換行列は cameraAim 行列の逆行列として求められます。

cameraAim 行列を求める

cameraAim 行列は、原点で −Z 方向を向いているカメラを、ワールド空間内の指定した位置へ移動させ、指定した方向へ向ける行列です。

求めるために、次の2つの情報を使います。

• eye：カメラの位置
• target：カメラで見たいもの・狙いたいものの位置

カメラの3軸を求める

カメラの向きを決めるには、カメラ自身の X 軸・Y 軸・Z 軸が、ワールド空間でそれぞれどの方向を向いているかを求めます。 以降、ワールド座標で表したカメラの X 軸・Y 軸・Z 軸を、それぞれ $\mathbf{x}_{\mathrm{cam}}$、$\mathbf{y}_{\mathrm{cam}}$、$\mathbf{z}_{\mathrm{cam}}$ と書きます。

Z 軸

前回の射影行列は、カメラが −Z 方向を向いていることを前提に作りました。 つまり、カメラ（eye）から見たいもの（target）へ向かう方向が、カメラの −Z 軸になります。 したがって、+Z 軸はその逆向き、target から eye へ向かう方向です。

この軸は、後で座標系の基底として使います。大きさが 1 でないと、回転だけでなく拡大・縮小まで入ってしまうので、正規化しておきます。

これで Z 軸は求まりましたが、まだカメラの姿勢は決まりません。 同じ方向を向いたままでも、カメラを Z 軸まわりに傾ける余地が残っているからです。 そこで、X 軸と Y 軸も求めます。

X 軸

X 軸を求めるために、カメラの「おおよその上方向」を表すベクトル up を用意します。 今回はカメラを真上や真下に向けることは考えないものとして、ワールド空間の上方向 $\mathbf{up} = (0, 1, 0)$ を使います。

外積は、2つのベクトルの両方に直交するベクトルを返します。 $\mathbf{up}$ と $\mathbf{z}_{\mathrm{cam}}$ の外積をとることで、両方に直交する X 軸が得られます。

外積は順序を入れ替えると向きが反転するので注意します。 たとえば $\mathbf{z}_{\mathrm{cam}} = (0, 0, 1)$ のとき、$\mathbf{up} \times \mathbf{z}_{\mathrm{cam}} = (1, 0, 0)$ となり、正しく +X 方向を向きます。

なお、カメラを真上や真下に向けると $\mathbf{z}_{\mathrm{cam}}$ と $\mathbf{up}$ が平行になり、外積がゼロベクトルになって X 軸が求まりません。今回これらの向きを考えないのはこのためです。

Y 軸

最後に、Z 軸と X 軸の外積から Y 軸を求めます。

$\mathbf{z}_{\mathrm{cam}}$ と $\mathbf{x}_{\mathrm{cam}}$ は互いに直交する大きさ 1 のベクトルなので、その外積も大きさ 1 になり、正規化は不要です。

ここで $\mathbf{up}$ をそのまま Y 軸に使わないのは、カメラが上や下に傾いているとき、$\mathbf{up}$ が $\mathbf{z}_{\mathrm{cam}}$ と直交しないためです。$\mathbf{up}$ はあくまで X 軸を求めるための「おおよその上方向」です。

具体例で 3 軸を求める

たとえば $\mathbf{eye} = (0, 0, 5)$、$\mathbf{target}= (0, 0, 0)$ とすると、

$$\mathbf{z}_{\mathrm{cam}} = (0, 0, 1), \quad \mathbf{x}_{\mathrm{cam}} = (1, 0, 0), \quad \mathbf{y}_{\mathrm{cam}} = (0, 1, 0)$$

となります。カメラを +Z 方向に下げて原点を見ているだけなので、軸の向きは元のカメラと同じになり、直感とも一致します。

ビュー座標系からワールド座標系へ変換する

求めた 3 軸と、カメラの位置 $\mathbf{eye}$ を使って、次の行列を作ります。

各列に X 軸・Y 軸・Z 軸・カメラの位置を並べただけの行列です。 成分で書くと、次のようになります。

ここで $x_{\mathrm{cam},y}$ は、カメラの X 軸 $\mathbf{x}_{\mathrm{cam}}$ の y 成分です。

これが cameraAim 行列で、カメラから見た座標（ビュー座標）をワールド座標に変換します。

なぜこのように並べると座標変換になるのか

各列に X 軸・Y 軸・Z 軸を並べるとなぜ座標変換になるのか、回転行列を例に見ていきます。

Z 軸まわりに $\theta$ 回転させる回転行列は、次のとおりです。

$$\mathbf{R} = \begin{pmatrix} \cos\theta & -\sin\theta & 0 \\ \sin\theta & \cos\theta & 0 \\ 0 & 0 & 1 \end{pmatrix}$$

元の座標系の基底ベクトル $\mathbf{e}_x = (1, 0, 0)$、$\mathbf{e}_y = (0, 1, 0)$、$\mathbf{e}_z = (0, 0, 1)$ に、この回転行列を作用させてみます。

$$\mathbf{R}\mathbf{e}_x = \begin{pmatrix} \cos\theta \\ \sin\theta \\ 0 \end{pmatrix}, \quad \mathbf{R}\mathbf{e}_y = \begin{pmatrix} -\sin\theta \\ \cos\theta \\ 0 \end{pmatrix}, \quad \mathbf{R}\mathbf{e}_z = \begin{pmatrix} 0 \\ 0 \\ 1 \end{pmatrix}$$

これらは、回転後の座標系の基底ベクトル $\mathbf{e}'_x$、$\mathbf{e}'_y$、$\mathbf{e}'_z$ を元の座標系で表したものです。見比べると、回転後の基底ベクトルが、そのまま回転行列 $\mathbf{R}$ の各列になっていることがわかります。

では、回転後の座標系で座標が $(o, p, q)$ の点は、元の座標系ではどこにあるでしょうか。
「回転後の座標系で $(o, p, q)$」とは、回転後の基底ベクトルをそれぞれ $o$、$p$、$q$ 倍して足した位置のことです。

この点の元の座標系での座標を $(l, m, n)$ とすると、次の等式が成り立ちます。

$$o\,\mathbf{e}'_x + p\,\mathbf{e}'_y + q\,\mathbf{e}'_z = l\,\mathbf{e}_x + m\,\mathbf{e}_y + n\,\mathbf{e}_z$$

左辺は、回転後の基底ベクトルを列に並べた行列、つまり $\mathbf{R}$ を使って書くことができます。

$$o\,\mathbf{e}'_x + p\,\mathbf{e}'_y + q\,\mathbf{e}'_z = \begin{pmatrix} \mathbf{e}'_x & \mathbf{e}'_y & \mathbf{e}'_z \end{pmatrix} \begin{pmatrix}o \\ p \\ q\end{pmatrix} = R\begin{pmatrix}o \\ p \\ q\end{pmatrix}$$

右辺は、$\mathbf{e}_x$、$\mathbf{e}_y$、$\mathbf{e}_z$ が $(1,0,0)$ などの単位ベクトルなので、そのまま成分を並べたものになります。

$$l\,\mathbf{e}_x + m\,\mathbf{e}_y + n\,\mathbf{e}_z = \begin{pmatrix} l \\ m \\ n \end{pmatrix}$$

両辺をつなげると、

$$\begin{pmatrix} l \\ m \\ n \end{pmatrix} = \mathbf{R} \begin{pmatrix} o \\ p \\ q \end{pmatrix}$$

つまり、回転後の基底ベクトルを各列に並べた行列 $\mathbf{R}$ を作用させると、回転後の座標系での座標 $(o, p, q)$ を、元の座標系での座標 $(l, m, n)$ に変換できるということです。

---

この考え方は、ビュー座標系とワールド座標系の関係性においても成り立ちます。 先ほど求めたカメラの 3 軸 $\mathbf{x}_{\mathrm{cam}}$、$\mathbf{y}_{\mathrm{cam}}$、$\mathbf{z}_{\mathrm{cam}}$ は、いずれもワールド座標で表したベクトルです。 これらを各列に並べた行列 $\mathbf{C}\,'$ を作用させれば、ビュー座標系での座標 $(o, p, q)$ をワールド座標 $(l, m, n)$ に変換できます。

$$\mathbf{C}\,' \equiv \begin{pmatrix} \mathbf{x}_{\mathrm{cam}} & \mathbf{y}_{\mathrm{cam}} & \mathbf{z}_{\mathrm{cam}} \end{pmatrix}$$$$\begin{pmatrix} l \\ m \\ n \end{pmatrix} = \mathbf{C}\,' \begin{pmatrix} o \\ p \\ q \end{pmatrix}$$

ただし、これだけでは原点を中心に向きを変えただけです。 カメラは $\mathbf{eye}$ の位置にあるので、最後にカメラの位置 $\mathbf{eye}$ を足します。

$$o\,\mathbf{x}_{\mathrm{cam}} + p\,\mathbf{y}_{\mathrm{cam}} + q\,\mathbf{z}_{\mathrm{cam}} + \mathbf{eye}$$

この平行移動まで 1 つの行列で表すために、4 成分目を 1 とした同次座標を使います。 4 列目に $\mathbf{eye}$ を置くと、4 成分目の 1 が掛かって $\mathbf{eye}$ がそのまま足されます。

$$\begin{pmatrix} \mathbf{x}_{\mathrm{cam}} & \mathbf{y}_{\mathrm{cam}} & \mathbf{z}_{\mathrm{cam}} & \mathbf{eye} \\ 0 & 0 & 0 & 1 \end{pmatrix} \begin{pmatrix} o \\ p \\ q \\ 1 \end{pmatrix} = \begin{pmatrix} o\,\mathbf{x}_{\mathrm{cam}} + p\,\mathbf{y}_{\mathrm{cam}} + q\,\mathbf{z}_{\mathrm{cam}} + \mathbf{eye} \\ 1 \end{pmatrix}$$

この左辺における行列が cameraAim 行列 $\mathbf{C}$ となります。

$$\mathbf{C}\, \equiv \begin{pmatrix} \mathbf{x}_{\mathrm{cam}} & \mathbf{y}_{\mathrm{cam}} & \mathbf{z}_{\mathrm{cam}} & \mathbf{eye} \\ 0 & 0 & 0 & 1 \end{pmatrix}$$

ビュー変換行列を求める

カメラを動かすか、オブジェクトを動かすか

カメラの考え方の章で、3DCG ではカメラを動かす代わりに、オブジェクトをカメラとは逆向きに動かすと説明しました。 前の章の例 $\mathbf{eye} = (0, 0, 5)$、$\mathbf{target} = (0, 0, 0)$ で、2 つの方法を比べてみます。

カメラを動かす場合：原点にあるカメラに cameraAim 行列 $\mathbf{C}$ を掛けると、カメラは $(0, 0, 5)$ に移動します。オブジェクトは原点にあるので、カメラの正面 5 の位置に見えます。

オブジェクトを動かす場合：カメラは原点に置いたまま、原点にあるオブジェクトをカメラとは逆向きに 5 動かすと、オブジェクトは $(0, 0, -5)$ に移動します。こちらもオブジェクトはカメラの正面 5 の位置に見えます。

どちらの方法でも、カメラとオブジェクトの相対的な位置関係は同じなので、画面上の見え方も同じになります。 そして、後者の「オブジェクトをカメラとは逆向きに動かす」行列こそが、ビュー変換行列です。

ビュー変換行列は cameraAim 行列の逆行列

これまで見てきたとおり、ビュー変換行列は cameraAim 行列の逆行列で与えられます。 cameraAim 行列を $\mathbf{C}$、ビュー変換行列を $\mathbf{V}$ とすると、次のように表せます。

座標の変換として見ると、cameraAim 行列はビュー座標をワールド座標に変換する行列でした。 その逆行列であるビュー変換行列は、ワールド座標をビュー座標に変換します。 射影行列は「カメラが原点にあり、−Z 方向を向いている」ことを前提にしていたので、ビュー変換行列で頂点をビュー座標に変換しておけば、前回求めた射影行列をそのまま使えます。

lookAt 関数

ここまで、cameraAim 行列を求めてから逆行列をとる、という手順でビュー変換行列を求めてきました。 しかし、多くの数学ライブラリには cameraAim 関数はなく、代わりに lookAt 関数が用意されています。

lookAt は、cameraAim 行列の逆行列、つまりビュー変換行列を直接返す関数です。

WebGPU 向けの数学ライブラリ wgpu-matrix（新しいタブで開く） には cameraAim（新しいタブで開く） と lookAt（新しいタブで開く） の両方が用意されていて、次の 2 つは同じ結果になります。

import { mat4 } from 'wgpu-matrix';
 
const eye = [0, 0, 5];
const target = [0, 0, 0];
const up = [0, 1, 0];
 
// lookAt でビュー変換行列を直接求める
const viewMatrix = mat4.lookAt(eye, target, up);
 
// cameraAim 行列の逆行列をとる（上と同じ結果になる）
const viewMatrix2 = mat4.inverse(mat4.cameraAim(eye, target, up));

実装では、lookAt は逆行列の計算を経由せず、前の節で求めた式で直接計算されています。

補足：aim 関数

cameraAim 行列の考え方は、カメラ以外にも使えます。 「ある位置から、目標の方向を向かせる」行列なので、キャラクターの頭を目標に追従させたり、砲塔を狙う相手に向けたりするのにも使えます。

ただし、カメラは −Z 方向が正面でしたが、物体を向かせる場合は +Z 方向を正面とするのが一般的です。 そのため、Z 軸の求め方だけを逆にします。

// cameraAim：target → eye の向きを +Z にする
const zAxis = vec3.normalize(vec3.subtract(eye, target));
 
// aim：position → target の向きを +Z にする
const zAxis = vec3.normalize(vec3.subtract(target, position));

wgpu-matrix では mat4.aim（新しいタブで開く） として用意されており、物体の位置と向きを決めるモデル行列として使えます。