CrossRoadスマートフォン用の表示で見るCrossRoadAR、MR、VR、Babylon.jsを中心とした技術ブログ。Questで表示させるまでの手順をまとめましたbabylonjs最近、vrmという規格に興味があって調べていたところ、株式会社バーチャルキャストがBabylon.jsに対応したbabylon-vrm-loaderを公開したことを知りました。Questで見るまでの手順を紹介します。VRMドワンゴが発表した人型3Dモデルに関する共通フォーマットです。詳細はこちらをご覧ください。Babylon.jsWeb上で3DCGの表現ができるライブラリです。Best参考までに、去年から色々と調べていた内容は下記の通りです。大まかな手順は以下の通りです。Node.js/npm/yarnのインストール(インストール済みの方は飛ばして、2.1に進んでください)概要、および必要な手順は以下を参照ください。babylon-vrm-loaderをビルドここからソースコードを取得します。私の環境では大量のエラーが出てそうなりませんでした。本来ならばpackage.jsonの中に書かれたパッケージを取得して加えてくれるはずなのですが。このあたり、まだ私のnpmに関する理解が浅いので、今回はエラーが出るたびに該当するパッケージを入れるという作業を繰り返しました。最終的にこのようなコマンドを入力することでビルドを通しました。webpack-cli最後にtsconfig.jsonの記述を1箇所修正しました。debugとすると、webpackが起動します。Chromeなどのブラウザでhttp://localhost:8080にアクセスするとこのような画面が開きます。画面左上に「ファイルを開く」というボタンがあるので、ここからvrmファイルを読み込みます。ニ立体これでこのような画面になります。VRで動かすための機能を追加babylon.jsのAPIを使います。src/test/index.tsの一部を変更します。=false;を設定しないと、コントローラをCubeが覆ってしまいます。以前は下記のコードで透明化することで対応できました。CrossRoadしかし、今回はES6以降のjavascriptで書いたためか、あるいはBabylon.jsのメジャーバージョンが上がったためか、この方法は使えませんでした。ここまで書くと、VRモードで動かせるようになります。今回、webサーバとして動かすために、webpackというパッケージを使っています。Questからアクセスするために、サーバ設定を変更します。},こちらを参考にさせていただきました。動作確認結果2.2と2.3の修正をしたものを下記におきました。2.1のビルドについては、書いたコマンドを実行してください。"https://github.com/virtual-cast/babylon-vrm-loader"また、vrmファイルは、リポジトリの"test/vrm"と書かれたところに入れます。vrmファイル名は下記を修正してください。Questで確認しました。Questからアクセスできます。Hub動画の13秒付近にコントローラが写っています。この通りコントローラは2つとも認識され、Raycastを飛ばしてオブジェクトを識別したり、ボタン操作を識別することも可能です。使っているモジュールの1つである"lodash"にセキュリティ脆弱性がある、という警告がGithubより来ました。脆弱性対応のため、依存関係のあるモジュールを含めてアップデートしたところ、脆弱性は消えました。vitaモデルを表示させると、服が黒くなってしまいました。Aliciaモデルは正常に読み込めます。vrm-loader側が新しくなることで解決する可能性があるため、申し訳ありませんが現状では保留とさせてください。このブログ記事執筆時点の環境で確認したい場合、下記のGitコミットIDを指定してください。セキュリティ脆弱性を含むため、利用は自己責任でお願いいたします。Goのコントローラには「戻る」というボタンがないので、Sphereを選択したらexitVR()を呼ぶという処理の追加があるとよいです。CrossRoad具体的には、index.tsにこのようなコードを追加します。参考にした関連技術のリンク私がまだまだWeb系の勉強が足りないので備忘録のために残しておきます。Programmers」が一番近い感じでした。おわりにWebGLでvrmを表示する仕組みはいくつかありますが、冒頭のバーチャルキャストブログで言われているように、Babylon.jsはわりとよいと思います。Questも届いたし、新しいjavascript、Typescriptでの書き方も覚えつつあるので、引き続きvrmとBabylon.jsで色々やってみたいと思います。»ProfileAR、MR、VR、Babylon.jsを中心とした技術ブログです。広く色々な技術を勉強するのが好きで、あれこれ書いています。詳細なプロフィールはこちらをご確認ください。2020)■プライバシーポリシー■こちらに記載しておりますのでご確認ください。■お問い合わせ■こちらよりお願いいたします。月別アーカイブスターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。