#14 WebXRアプリをMetachromiumを使ってVRゲームにオーバレイする https://gyazo.com/936d7519f0cf3918f8184e9f7a8b8b5f
基本情報
名前の通りオープンソースのウェブブラウザのChromiumをベースとしています. デモ動画を見てもらうのが早いです.
https://youtu.be/UZwWJdIJY7M
VRChat
No Man's Sky
Minecraft
などに3Dモデルを持ち込んでるように見える
今回はこのMetachromiumを使ってみました.
導入からサンプルでの動作確認
任意のVRアプリケーションを起動したあとにMetachromiumを起動します.
今回はSteamVR Homeで試してみました.
環境
Windows10
Core i5-7500
GTX1060 3G
OculusQuest
Oculus Link
それぞれのアプリケーションが起動したらPCのデスクトップ画面の方からMetachromiumを操作します。
https://gyazo.com/f6f7cad6649d16e1c28755e64193c284
こんな感じのページが開くのでInline Session(Solar System)をクリックして開きます。
開いたページでEnter VRを押してVRの方に戻ると太陽系の3Dモデルが表示されています.
https://gyazo.com/0b19b70b78a648ba61d997f9c4851b04
14 FPS…
デフォルトのページ以外にもWebVRなら動かすことができます。
背景を透過させてAR風にしたい場合はVISUAL INSPECTORからA-sceneのbackgroundのtransparentをONにしてください.
https://gyazo.com/54079ca1b80f650752e0bd40f8604837
https://gyazo.com/40c8db2c7dccb7dad6b412ee82845d65
ちゃんと立体に見えます.
オリジナルのWebXRアプリを動かしてみる
そもそもデモ動画に映っています.
というわけで作ってみました.
VRMを表示するところまでは丁寧に解説されている記事がありますのでその紹介にとどめたいと思います。
この記事を参考にVRMを表示するところまで出来たらWebXRに対応させます.
VRButtonをインポート
シーン背景を透過
renderer.xr.enabledを有効化
renderer.setAnimationLoopに描画loopを設定
window.requestAnimationFrame()だとVRになったときに動かないので注意
変更点
code:ts
import { VRButton } from 'three/examples/jsm/webxr/VRButton';
document.body.appendChild(VRButton.createButton(renderer));
//...
const renderer = new THREE.WebGLRenderer({
antialias: true,
alpha: true
});
renderer.setClearColor(0x000000, 0.0);
renderer.xr.enabled = true;
//...
renderer.setAnimationLoop(() => {
renderer.render(scene, camera);
});
https://gyazo.com/ec0b4528dd6fa9581b8f5652803f2655
完成したら同じようにMetachromiumで開いてみます.
https://gyazo.com/936d7519f0cf3918f8184e9f7a8b8b5f
YATTA!
ちゃんと回り込んだり色々な角度から見ることが出来ます.
コントローラのテレポート移動にはついてきます
これでいろんなVRゲームにお気に入りのVRMモデルを連れていける！かもしれません.
余談
まさにこれが欲しかったというアプリケーションです。
ただ、自分のPCではスペックが足りてなくて重かったです。
Oculus Link の時点で結構不安定なのでPCスペックの限界ですね。
強いPCほしい
あと欠点としてブラウザそのものはデスクトップから操作しないといけないのがかなりつらいです.
Enter VRをデスクトップから押したりするときなど
OVRdrop等を使えば解決できるとは思います。
こちらはVRアプリケーション内でブラウザを操作することができましたが、WebXRのシーンをオーバーレイすることは出来ませんでした.
VR内ブラウジングとWebXRオーバーレイが両立するとかなり実用性がありそうです.
参考