座標と行列 - you / WebGL

3Dグラフィックスのプラットフォームを使ってプログラムを書く時に、まず最初に確認するのがコレ

座標系の確認

共通部分はvanilla-gl.jsにまとめてしまった
uniformの設定もgetUniformLocationするのが面倒なので関数にしておく
Wを2から-1まで振って、1辺が0.1の（GLの世界の）正方形を書いている
Wが0.1までは四角形がどんどん大きくなっていく
Wが0.1になるとキャンバスの大きさと一致する
マイナスになると描画されない
X・Y・Zが-WからWになる部分が描画される
Wが負だとこの条件を満たす点がなくなるので何も描画されない
実際に描画される位置は (X/W, Y/W)
Zは描画位置には関係ないが、描画判定には使われることに注意
setUniformでZの値を変えて確認してみるとよい。Z=0ならば常に出力される。
これで透視投影ができる。出力のWには頂点のZを入れることになる。出力のZは深度テストに使われる（当面使わないつもりだけど）。

行列

行列で問題になるのは配列にどうやって格納しているか
アフィン変換で並行移動は以下のような式になる
\begin{align*} \left(\begin{array}{cccc} 1 & 0 & 0 & t_x \\ 0 & 1 & 0 & t_y \\ 0 & 0 & 1 & t_z \\ 0 & 0 & 0 & 1 \end{array}\right) \left(\begin{array}{c} x \\ y \\ z \\ 1 \end{array}\right) = \left(\begin{array}{c} x + t_x \\ y + t_y \\ z + t_z \\ 1 \end{array}\right) \end{align*}
この行列を16成分の配列として与えるが、\(t_x\)はどこになるのか？
[ 1, 0, 0, 0.5, ..., -0.5, 0, 0, 1 ]という配列を与えて、右（正方向）に動けば0.5が、左（Xの負方向）に動けば-0.5が効いている
Wがぐちゃぐちゃな値になるので強制的に1にする
頂点座標としてZWを与えていないが、その場合はgl.vertexAtrrib...で与えた値になり、そのデフォルトはZ=0・W=1
行列の設定はベクトルの設定とまた別の関数gl.uniformMatrix...なので、setMatrix関数を作っておく
実際にやってみると左に動く
つまり、GLの行列は
\begin{align*} \left(\begin{array}{cccc} a_{11} & a_{12} & a_{13} & a_{14} \\ a_{21} & a_{22} & a_{23} & a_{24} \\ a_{31} & a_{32} & a_{33} & a_{34} \\ a_{41} & a_{42} & a_{43} & a_{44} \end{array}\right) \end{align*}

に対して、\(a_{14}\)が-0.5の位置ということだから、
[ a₁₁, a₂₁, a₃₁, a₄₁, a₁₂, a₂₂, a₃₂, a₄₂, a₁₃, a₂₃, a₃₃, a₄₃, a₁₄, a₂₄, a₃₄, a₄₄ ]
と並んでいることになる。
いわゆる「カラムメジャー」（列優先）
uniformMatrix4fvに転置するための引数があるが「falseにしとけ」とMDNに書いてある
GLの流儀としては上のようにベクトルを「列ベクトル」の形で書くが、シェーダー中のuMat*aPosをaPos*uMatと書き換えても、数学的に普通に行列の計算が行われる
この場合、行ベクトルの形で
\begin{align*} \left(\begin{array}{cccc} x & y & z & 1 \end{array}\right) \left(\begin{array}{cccc} 1 & 0 & 0 & 0 \\ 0 & 1 & 0 & 0 \\ 0 & 0 & 1 & 0 \\ t_x & t_y & t_z & 1 \end{array}\right) = \left(\begin{array}{cccc} x + t_x & y + t_y & z + t_z & 1 \end{array}\right) \end{align*}

という計算が行われていることになるが、その場合も行列の格納方法は変わらないため、\(t_x\)は配列の4番目の要素になる。

CSSとの関係

最近のデバイスだとなんかぼやけて見える
これはGLのせいではなく、キャンバスのピクセルサイズとCSSサイズが一致していないために起きる
SVGのときと同じで、window.devicePixelRatioで補正する

基本的にはCSSサイズにwindow.devicePixelRatioをかけたものをキャンバスのwidthとheightに設定すればよいが、このときにキャンバスのCSSサイズが設定されていないとCSSサイズの方も変わってしまう。CSSサイズを明示的に指定しておく（上の例）か、キャンバスのCSSサイズ（つまりcanvas.widthではなく、canvas.style.width）もJS側から明示的に設定する（MDNの「キャンバスの最適化」のページに例が載っている）。
GLはキャンバスからコンテキストを取る時にビューポートを設定しているため、コンテキストを取った後にキャンバスのピクセルサイズを設定するとおかしな場所に表示されるようになる。この場合はGLのviewport関数でビューポートを設定し直す。
ワールド座標系で正方形のものをキャンバス上でも正方形として表示するためには、アスペクト比変換が必要である。これは普通、プロジェクション行列でやる。

resizeイベントをひっかけて、ウィンドウサイズが変わっても荒くなったり、はみ出したりしないようにした例

02 Jul 2024: 初稿