みかづきブログ・カスタム

基本的にはちょちょいのほいです。

Three.jsでつくったWebVRをOculus Riftに対応させたいのであればr111を使うべし 🕶



結論

Three.js(r111)を使いましょう。

github.com

ただし、r111には XRControllerModelFactory.js が無いのでコントローラーのモデルは自分で用意する必要があります。

DEMO

https://kimizuka.org/mock/r127/vr-button
Three.js(r127)を使用しているため、Oculus Riftに接続したPCのFirefoxではVRモードに入れない

https://kimizuka.org/mock/r111/vr-button
Three.js(r111)を使用しているため、Oculus Riftに接続したPCのFirefoxでもVRモードに入れる

ことの発端

kage.kashikan.tokyo

年末にウェブVRコンテンツを作成しまして、Oculus Questのブラウザ、Firefox Rearityでは動作を確認していたのですが、Oculus Riftで確認していなかったなと思い、Oculus Riftに接続したPCのFirefoxで確認したところ、

f:id:kimizuka:20220112135710j:plain

「WEBXR NOT AVAILABLE」と表示されてしまいました。

FirefoxがVRに一番力を入れているイメージがあったので、「あれ?対応してなかったっけな?」と思ったのですが、それでもボタンを押してみると、

immersiveweb.dev

こちらに遷移します。

ページ下部にはWebXR Device APIの対応表が載っているのですが、

f:id:kimizuka:20220112130649p:plain
https://immersiveweb.dev/ より引用

Firefoxの名前はありません。
そうか。FirefoxはWebVRに対応していなかったのか。と諦めかけたのですが、ページ中央にDEMOがあったので、Firefoxでクリックしてみると、

f:id:kimizuka:20220112135629j:plain
f:id:kimizuka:20220112135640j:plain

VRで観覧できました。

なぜだ!この謎を解くべく、まずはソースコードを確認することにしました。

ソースコードの確認

toji.github.io

何故かFirefoxでVRモードに入れるウェブサイト。
まずはソースコードを確認します。GitHubに丸々上がっていたので直ぐに確認できました。

github.com

ソースを見て気になったのは、

import { WEBVR } from './js/three/examples/jsm/vr/WebVR.js';

とか、

renderer.vr.enabled = true;

とかです。

僕のコードだと、

import { VRButton } from '../scripts/lib/jsm/webxr/VRButton.js';

とか、

renderer.xr.enabled = true;

と、なっており、僕のコードでxrとなっている箇所がvrになっています。
ここで、気づきました。

WebVR API と WebXR Device API

いまは非推奨になってしまったのですが、かつて、WebVR API というものがあり、Firefoxはそれに従った実装になっているのだな。と。

developer.mozilla.org

f:id:kimizuka:20220112132613p:plain

https://developer.mozilla.org/ja/docs/Web/API/WebVR_API より引用

対応リストをみると綺麗にFirefoxだけ対応しています。

一方、Web XR Device APIはというと、繰り返しになりますが、Firefoxは非対応です。

f:id:kimizuka:20220112133003p:plain

https://developer.mozilla.org/ja/docs/Web/API/WebXR_Device_API より引用

Firefoxは草案の仕様に対応しないイメージがあるので、納得と言えば納得の対応です。ただし、Oculus QuestにインストールできるFirefox RealityはWebXR Device APIで実装したVRが動いたことから、WebXR Device APIに対応しているっぽいです。

WebVR APIに対応しているThree.jsのバージョンを探す

https://toji.github.io/webxr-particles/(Firefoxで動く)で読み込んでいるThree.jsのバージョンを確認すると、r111でした。
一方で、僕の作ったFirefoxで動かないサイト( https://kage.kashikan.tokyo/vr/)はr127を使っています。

ソースを確認してみると、

r111

var vr = ( typeof navigator !== 'undefined' && 'xr' in navigator ) ? new WebXRManager( _this, _gl ) : new WebVRManager( _this );

https://raw.githubusercontent.com/mrdoob/three.js/r111/build/three.module.js より引用

と、r111ではnavigator内にxrがあるかを確認してWebXRManagerとWebVRManagerを出し分けているのに対し、

r127

>|javascript|27
const xr = new WebXRManager( _this, _gl );
|

https://raw.githubusercontent.com/mrdoob/three.js/r127/build/three.module.js より引用

r127では、問答無用でWebXRManagerのインスタンスを生成しています。

developer.mozilla.org

r112を確認したところ、該当部分はr127と一緒だったため、WebVR APIに対応しているThree.jsのバージョンはr111までということがわかりました。

ただ、冒頭にも書きましたが、r111には XRControllerModelFactory.js が無いのでコントローラーのモデルを表示したい場合は自前で用意する必要がありそうです。

blog.kimizuka.org