WebXRのXRRigidTransformオブジェクトの生成が正しく動作しないのを解決したい。

前提

現在、WebXRを用いてプログラムを開発しています。
immersive-vrのサンプルなどを参考に、独自動画アプリ内で360°動画を表示させようとしており、視線の取得やカメラの制御などを行おうとしています。
(Node.js+Vue+Video.js環境)

前任者から引き継いだ環境の上で実装をしている関係上、いまだ開発環境全体を把握できておりませんが、npmコマンドを用いてビルドしています。
THREE.jsなどのライブラリは用いておりません。

実現したいこと

XRRigidTransformクラスを生成したい

発生している問題は後述しますが、例に従ってXRRigidTransformクラスを生成しようとするものの、正しく生成できていないように思われます。importが必要とは思っていない(実際、他のクラスはしていない)ので、何か使い方が悪いのではないかと考えています。

発生している問題・エラーメッセージ

XRRigidTransformクラスを新規に作成して、新たな参照空間を作成しようとしていますが、うまくいきません。

そもそも、importしないとXRRigidTransformが参照できない状況です。

#13 28.72 XXX/XXXVR360.js
#13 28.72   736:23  error  'XRRigidTransform' is not defined  no-undef

該当のソースコード

JavaScript
1// eslint-disable-next-line no-unused-vars
2import WebXRPolyfill from '../libs/immersive-vr/third-party/webxr-polyfill/build/webxr-polyfill.module.js'
3import XRRigidTransform from '../libs/immersive-vr/third-party/webxr-polyfill/build/webxr-polyfill.module.js'
4(略)
5      let xform = new XRRigidTransform(
6        { x: invPosition[0], y: invPosition[1], z: invPosition[2] },
7        { x: invOrientation[0], y: invOrientation[1], z: invOrientation[2], w: invOrientation[3] }
8      )
9      console.log('[@@@@] new form:%j', xform)
10      console.log(`[@@@@]  + Matrix: ${xform.matrix}`)
11      console.log(`[@@@@]  + Position: ${xform.position}`)
12      console.log(`[@@@@]  + Orientation: ${xform.orientation}`)
13      console.log(`[@@@@] (Current)RefSpace(${session.isImmersive}):%j`, getRefSpace(session, false))
14      //let refSpace = getRefSpace(session, false)
15      let refSpace = getRefSpace(session, false).getOffsetReferenceSpace(xform)
16      console.log('[@@@@] new Ref Space:%j', refSpace)
17      setRefSpace(session, refSpace, true)

試したこと

上記のようにimportをすると、ビルドは成功するのですがそもそもXRRigidTransformはWebXR Device APIが提供しているAPIのはずで、importが必要だとは考えていませんでした。

また、importしているのがwebxr-polyfillですが、これはブラウザがVRに対応していない場合に使うものであるという認識です。ただ実際にChromeのdevToolsでデバッグをしてみると、いくつかのオブジェクト(XRReferenceSpace, XRSessionなど)はこのPolyfillが使われているように思われます。
コンソールにlogでオブジェクトを表示させると、下記のようにSymbolで解決しているように見えます。

XRReferenceSpace {Symbol(@@webxr-polyfill/XRSpace): {…}, Symbol(@@webxr-polyfill/XRReferenceSpace): {…}}

一方で生成したXRRigidTransformのオブジェクトを見ると次のようになります。

jt {config: {…}, global: Window, nativeWebXR: true, injected: false}
config:{global: Window, webvr: true, cardboard: true, cardboardConfig: null, allowCardboardOnDesktop: false, …}
global:Window {window: Window, self: Window, document: document, name: '', location: Location, …}
injected:false
nativeWebXR:true

この状態で前述のソースで、getOffsetReferenceSpace(xform)を呼び出そうとすると、内部的にxform.matrixがundefinedとなったままでmultiplyに渡されてエラーとなってしまいます。
devToolsのデバッガで、importしているwebxr-polyfill.module.jsのXRRigidTransform$1のconstructorにブレイクポイントをセットして動きを確認しようとしたものの、そこで停止しなかったため、そもそも呼ばれておらず別のものを使用している可能性があるのでは？と思ったのですが、確認の仕方と対処方法がわからずに途方に暮れています。
XRRigidTransformを生成している箇所にブレイクポイントを設定して追えば、どこを使っているのかがわかるかもしれないのですが、１行に置換されてしまいdevToolsでは簡単に調べる事もできませんでした。

Polyfillに定義されているXRRigidTransform$1のconstructorの中で、matrixやposition, orientationなどが引数から生成されセットするように記述されているのですが、constructorが呼ばれていない為undefinedとなり例外が発生してしまいます。

このコンストラクタが正しく呼ばれるか、あるいは本来のXRRigidTransform(等)が使えるようにしたいのですが、どのようにすれば良いか、アドバイス頂けたらと思い質問した次第です。

よろしくお願いします。

行動規範の内容に同意します

回答1件

XRRigidTransformオブジェクトはgetter以外のメソッド持っていないようだったので、
orientation、positionを直接セットし、そこからmatrixを計算させてセットしてみたところ、
~~ひとまず目的の動作をするようになりました~~。
(追記)
devToolsでは(一見)正常動作するように見えましたが、Oculus Quest実機で確認すると当初と同じ部分でエラーが発生してしまうようです。
(実機でログが確認できていない為、発生個所がgetOffsetReferenceSpace()である事までしか確認できていない)
やはり、XRRigidTransformオブジェクトを正常に生成できないとダメなようです。
(追記ここまで)

JavaScript
1      let xform = new XRRigidTransform()
2      xform.position = { x: invPosition[0], y: invPosition[1], z: invPosition[2] }
3      xform.orientation = { x: invOrientation[0], y: invOrientation[1], z: invOrientation[2], w: invOrientation[3] }
4      xform.matrix = mat4.create()
5      mat4.fromRotationTranslation(xform.matrix, invOrientation, invPosition)