自力で行列演算

平行移動

• 以下の行列を作る
  \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*}
• デフォルト引数が0になっているのでtranslate()で単位行列も得られる
• 行列と配列の関係を間違えなければ楽勝
• インタラクティブにしてみた
• removerまわりはこの辺
• touchmoveをpreventDefaultしてるのはiOS Safariのビルトインのスクロール機能を止めるため（めんどくせぇ）

拡大縮小

• 以下の行列を作る
  \begin{align*} \left(\begin{array}{cccc} s_x & 0 & 0 & 0 \\ 0 & s_y & 0 & 0 \\ 0 & 0 & s_z & 0 \\ 0 & 0 & 0 & 1 \end{array}\right) \left(\begin{array}{c} x \\ y \\ z \\ 1 \end{array}\right) = \left(\begin{array}{c} s_x x \\ s_y y \\ s_z z \\ 1 \end{array}\right) \end{align*}
• デフォルト引数が1になっているのでscale()で単位行列も得られる
• 四角形の右下をつまんで動かすのがおすすめ

回転

Z軸まわり

• XY平面が回転するため、結果が分かりやすい
• 右手系の常識として、指定された軸の正方向から負方向へ向いて、反時計まわりに回すのが正
• GLの場合はZ軸の正方向がこっちを向いているので、こっちから向こうへ向いて反時計回り、つまり、画面を見たまんま反時計回りする方向が正
  \begin{align*} \left(\begin{array}{cccc} \cos\gamma & -\sin\gamma & 0 & 0 \\ \sin\gamma & \cos\gamma & 0 & 0 \\ 0 & 0 & 1 & 0 \\ 0 & 0 & 0 & 1 \end{array}\right) \end{align*}
• 単位はラジアン
• 真ん中らへんは敏感だかららめぇっ！

X軸まわり

• 右側から見て反時計回りなので、Y軸がこちら側に倒れてくる方向が正
  \begin{align*} \left(\begin{array}{cccc} 1 & 0 & 0 & 0 \\ 0 & \cos\alpha & -\sin\alpha & 0 \\ 0 & \sin\alpha & \cos\alpha & 0 \\ 0 & 0 & 0 & 1 \end{array}\right) \end{align*}
• 上下にパタパタ回る感じになる
• 頂点シェーダーでZ=-3の位置に移動して、Wに-Zを渡してパースをつけてある

Y軸まわり

• 上側から見て反時計回りなので、X軸が向こう側に回る方向が正
  \begin{align*} \left(\begin{array}{cccc} \cos\beta & 0 & \sin\beta & 0 \\ 0 & 1 & 0 & 0 \\ -\sin\beta & 0 & \cos\beta & 0 \\ 0 & 0 & 0 & 1 \end{array}\right) \end{align*}
• 左右に回る感じになる

09 Jul 2024: 初稿

Copyright (C) 2024 akamoz.jp