質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
86.02%
Oculus Quest

Oculus Questは、Facebookの小会社であるOculus VRが開発したVRヘッドセットです。独立型でPCやスマートフォンは不要。6DoFのトラッキングに優れている点が特徴です。すでに販売終了となっていますが、2020年10月には後継のOculus Quest 2が販売されています。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

3DCG

コンピュータの演算により、3次元空間の仮想物体を、2次元平面上で表現する手法である。

Q&A

受付中

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

San
San

総合スコア8

Oculus Quest

Oculus Questは、Facebookの小会社であるOculus VRが開発したVRヘッドセットです。独立型でPCやスマートフォンは不要。6DoFのトラッキングに優れている点が特徴です。すでに販売終了となっていますが、2020年10月には後継のOculus Quest 2が販売されています。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

3DCG

コンピュータの演算により、3次元空間の仮想物体を、2次元平面上で表現する手法である。

1回答

0グッド

0クリップ

229閲覧

投稿2022/09/13 02:32

前提

現在、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を生成している箇所にブレイクポイントを設定して追えば、どこを使っているのかがわかるかもしれないのですが、1行に置換されてしまいdevToolsでは簡単に調べる事もできませんでした。

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

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

よろしくお願いします。

以下のような質問にはグッドを送りましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

グッドが多くついた質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

気になる質問をクリップする

クリップした質問は、後からいつでもマイページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

下記のような質問は推奨されていません。

  • 間違っている
  • 質問になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

適切な質問に修正を依頼しましょう。

回答1

0

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)

ただ、get inverse()を呼び出した場合の実装も必要そうなのと、やはり正規の使い方では無い事から、引き続き回答を募集したいと思います。

よろしくお願いします。

投稿2022/09/13 08:07

編集2022/09/15 00:19
San

総合スコア8

良いと思った回答にはグッドを送りましょう。
グッドが多くついた回答ほどページの上位に表示されるので、他の人が素晴らしい回答を見つけやすくなります。

下記のような回答は推奨されていません。

  • 間違っている回答
  • 質問の回答になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

このような回答には修正を依頼しましょう。

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
86.02%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問

同じタグがついた質問を見る

Oculus Quest

Oculus Questは、Facebookの小会社であるOculus VRが開発したVRヘッドセットです。独立型でPCやスマートフォンは不要。6DoFのトラッキングに優れている点が特徴です。すでに販売終了となっていますが、2020年10月には後継のOculus Quest 2が販売されています。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

3DCG

コンピュータの演算により、3次元空間の仮想物体を、2次元平面上で表現する手法である。