端末位置情報

デバイスの向きを取得する

• とりあえずMac上のChromeのエミュレーションと、iOS実機、Android Studioのエミュレーターで確認済み。
• DeviceOrientationEvent.requestPermissionはiOS系だけ必要で、ユーザーアクションによって発火したイベントの中でしか呼び出せない。

WebGLで表示してみる

• DeviceOrientationEventで返ってくる情報は、分かりやすい図入りの仕様書がW3Cにある。
• Zが上向きの右手系座標（GLと同じ）
• Z軸周りにalphaだけ左に回し、X軸周りにbetaだけ起こし、Y軸周りにgammaだけ右へ傾ける
• デバイス座標系で評価する点に注意
  • ワールド座標系で素直にalphaだけ回転すると、デバイスの座標系がそれだけ回転するので、デバイスのX軸はワールド座標系と一致しなくなる→そのままrotXすることができない
  • 逆に、デバイス座標系から見てワールド座標系がどう回転するかを計算することにすれば、デバイス座標系は動かないので、簡単に計算できる
    • 今、あなたは小人になってデバイスの上に立っています
    • プログラマー巨人がデバイスを左へalphaだけ回しました
    • あなたから見ると、デバイスの外の世界にあるモノすべてが右へalphaだけ回転したように見えるでしょう
    • 続いて、巨人がbetaだけ端末を起こせば、あなたからは外の世界にあるモノすべてが下へbetaだけ回転したように見えます
    • さらに巨人がgammaだけ端末を右へ傾ければあなたからは外の世界にあるモノすべてが左へgammaだけ傾いたように見えます
  • つまり、ワールド座標系の物体を、回転方向を逆にしてrotZ・rotX・rotYの順に回転させれば、デバイス座標系に変換できる
• もし、端末のディスプレイを手前に向けて、端末の向こう側が描画されるようにするなら、デバイスの座標系とスクリーン座標系の軸方向は一致する
• したがって、ワールド座標系の座標をデバイス座標系の座標にする変換が、ビュー変換そのものになる

心射図法による実装

• デバイスオリエンテーションイベントが来た時にイベントをevdoにとっておく
• draw関数を呼べば、evdoから端末の姿勢を得て、座標変換行列を計算して、描画してくれる
• 普通、視線方向と上方向を求めてビュー行列を求めるためにはどうたらこうたら、という説明が続くのだが、先に述べたようにワールド→デバイス変換がそのままワールド→ビュー変換になっているので、これをそのまま使えばよい
• さらに投影変換行列を乗じれば、全体の変換行列になる
• GLの行列は後ろにあるものほど先に適用されるので、Mat4.prodに渡す順序は逆になることに注意
• 結局、またビュー変換の説明は先延ばし
• 実際にはrequestAnimationFrameで描画する処理が入っている
  • requestAnimationFrameを使っているのは、フレームよりも速い速度でデバイスオリエンテーションイベントが発生する環境があるため
  • requestDrawingが呼び出された時にdrawingがfalseならば、requestAnimationFrameを呼び出してdrawingをtrueにする
  • drawingが既にtrueだった場合は何もしない
  • そのうちコールバックされるので、描画してdrawingをfalseに戻す
  • drawを呼び出した時点で最新のevdoが使われることになる
• Androidのエミュレーション環境がちょっとおかしい
  • エミューレータの仮想センサの縦位置ボタンを押すと、betaにnullが設定されることがある

fetchShader

• シェーダーも同じことの繰り返しなので外部ファイルに追い出した
• サブディレクトリslの下に追い出したので、URLを見るとgl/slというディレクトリになっている
• fetchShaderにURLを指定すると、fetchしてコンパイルまでしてくれる
• fetchなので戻り値はプロミスで、解決するとVanillaGLProgramになる
• シェーダーはVSとFSのふたつを読み込んでいるので、一気にfetchしてPromise.allで読み込み終了待ち
• Promise.allの解決値をvとすると、v[0]がVSの、v[1]がFSのVanillaGLProgramになっている

黒魔術 (x??{}).y=z

• オプショナルチェーンは便利だが左辺には書けない
• e?.innerText = sでeが未定義の場合、e?.innerTextも未定義となる（この時点ではエラーにならない）
• 未定義のものに何かを代入しようとするのでエラーになる
• 未定義だったら適当なオブジェクトをでっち上げてしまえば、オプショナルチェーンにしなくてもアクセスできるようになる
• .はタダの演算子に過ぎない（プロパティアクセサー）ので、左項にカッコが付いていても使える
• カッコの中でNULL合体演算子で空っぽのオブジェクトを作る（そしてすぐ捨てられる）
• eの値がundefinedならe = {}; e.innerText = s; e = undefined;のような振る舞いになる
• eが定義されていてinnerTextがないのならeにinnerTextプロパティができる
• この方法でも eそのものが定義されていない場合はエラーになるので注意

平射図法による実装

• こちらは軸キューブ付き
• 視点の位置が原点ではない
• 普通、ビュー変換の入力は視点位置（位置ベクトル）、視線方向（方向ベクトル）、上方向（方向ベクトル）の3つ
  • 視線方向の代わりに注視点（位置ベクトル）を指定することもあるが、計算の途中で視線方向にしてから処理される
  • 今、我々ができる回転では、その中心は原点だけ
  • まずカメラ（視点）が原点に来るようにワールド空間の物体を動かし、続いて視線方向がZの負方向（GLの場合）を向くように物体を回転する
  • 先に回転してしまうと、カメラが変なところへ動いてしまい、その後の移動で計算が面倒になる
• 平射の場合、球面上にカメラを配置して、中心方向を向かせることになる
  • 普通のビュー変換に当てはめると、視線方向によって視点位置が変わることになる
  • これをカメラの立場で考えると、視線方向と反対側に球の半径だけ後ろに下がればいい
  • ビュー座標系で考えると、Zのプラス方向に球の半径だけ動けばよく、視点位置・視線方向に関係のない定数になる
• 移動と回転のどちらを先にするのが正しいか？
  • ワールド空間にある物体を先に移動した場合、次に行う回転の中心が原点ではなく球面上になってしまう→球を振り回すことになり、視線方向が球の中心から外れる
  • ワールド空間にある物体を、視線方向がZの負方向になるように先に回転した場合、カメラは (0, 0, 1) に動き、これが原点に来るように物体を動かすことになる→球の中心は原点から (0, 0, -1) へ動き、視線方向は球の中心を向いている
  • よって、後者が正しく、通常と移動・回転の順序が逆になる
  • 結局、また普通のビュー変換じゃない
• 通常の順序でもできないことはなく、先に視線方向を計算し、ワールド座標系にある物体を視線と逆方向に動かして、逆方向へ回転する
  • 移動したことでカメラは変な方向を向いているが、カメラの視線方向に原点がくるように世界を振り回す
• デバイスオリエンテーションイベントの設定は、パーミッションを得るところも含めて関数setupDeviceOrientationEventにまとめた
  • コールバック関数の引数にはイベントと許可ボタン要素が設定されるので、ボタンに対して何かしたい（checkedとかdisabledとか）時には第2引数を使う
• requestAnimationFrameの呼び出しはクラスにまとめる

黒魔術 v=>f(...v)

• Promise.allの解決値は配列だが、色々な種類の解決値が混ざってくるとコードが見づらくなる
• ちまちまとconst vs = v[0]; const fx = v[1];と代入していってもいいが、面倒
• オブジェクトにしてconst v = { vs: v[0], ... }のようにしてもよいが、アクセスの時に必ずv.が必要
• そこで、スプレッド構文で配列をバラして関数の引数として渡してしまう
• 配列の要素が順に仮引数に割り当てられていき、関数内では仮引数名でアクセスできる
• 即時実行関数を使ってPromise.all().then(v => ((vs, fs, --snip--){ })(...v))とも書けるが、関数本体が大きくなるとスプレッド構文がすごく後ろに離れた位置になってしまい、パッと見で何をしているか分かりづらい
• $X = (v, f) => f(...v);として、Promise.all().then($v => $X($v, (vs, fs, --snip--) => { })とする方法もある
• やっていることは同じだが、promise_allがPromise.all専用なのに対し、$Xは使いまわせる

---

19 Jul 2024

初稿

Copyright (C) 2024 akamoz.jp