おはようございます。システム担当です。

現在、JamesWEBサイトに新しい機能を搭載しようとあれこれやっていました。昨日は車両詳細画面のエンジンと足回りを別項目として抜き出して表示するように変更しました。これに高精細画像へのリンクを追加していく予定です。

VRで車に乗ってる感を味わえたら面白いんじゃないかと思い、WEBサイトに簡易VR機能を実装しようと、あれこれ試していました。ゴーグル無しでももちろん体験できますが、↑のような簡単なVRゴーグルがあるだけでもうスゴイです。仕組み的にはスマホをマウントさせて、レンズ越しに焦点合わせるだけなのですが、あるのとないのとでは没入感が段違いです。このような安価な物でも「おぉっ」となりますよ。

段ボール製の物でも1500円〜くらいなので、500円で買えてしまうこちらはVRお試し用として優秀だと思います。

そして、ここから技術的なお話。

実装に当たって、些か古いのですが、googleのVR View for the Webをまず使ってみました。こちらを選んだ理由は単純に「googleだし」という思考停止な物です。実装に必要なコードも単純明快で

<script type="text/javascript"  src="/vrview-gh-pages/build/vrview.min.js"></script>

githubから諸々持ってきて（ここにちょっと問題がありますが、それは後述します。）、headにまずこれを書いてから

var vrView;
    window.addEventListener('load', onVrViewLoad)
    function onVrViewLoad(){
        vrView = new VRView.Player('#vrview', {
            image: 'test.jpg',
            width: '100%',
            height: 500,
        });
    }

こんな感じで。

<div id="vrview"></div>

そして、VRコンテンツを表示させたいところにこれを書いてやれば静止画VRを表示することができます。

表示はされますが、ここで諸問題が発生すると思います。

その１：マスターから持ってくるとvrview.min.jsがいない、むしろディレクトリ/build/がない。

解決方法は、URLから察する通りで、ブランチをgh-pagesに変えてやればそこにこのディレクトリがいました。readmeにあるリンクは404になっちゃうのでとりあえずここから持ってくるのが良さそうです。

その２：スマホ実機で見るとVR画像が荒ぶる。

検証端末はXperia5とGalaxyA30ですが、このどちらでも発生しています。水平なところに安置しておくと、荒ぶらないのですが手に持った瞬間にグワグワと画像が動き続けます。PCではきれいに動きます。

端末の傾きを強烈に反映しているようで、本体を5度くらい傾けるだけで画像がグルングルン回ります。他に試している方がいらっしゃったので、DEMOページを見てみましたが、みなさま一様に実機ではグルングルンに回っていました。

ひとまずソースを見ずに直せないかと思案し、少しの傾きで大きく動くなら、じゃあ画像自体を巨大にしてみよか、とこれまた思考停止でやってみました。

推奨サイズが4096*2048の2:1なのでまずは5120*2560の5.2k？サイズで試してみました。結果は全然変わらず。続いて倍の10240*5120でやってみたところ、少しだけ荒ぶり方が優しくなったような・・・？もしかすると倍々にしていけば具合が良くなる？とも考えられそうですが、ファイルサイズがすでに12MBを超えたのでやめました。

ということで、別のちゃんとした解決方法を考えます。今のところはソースをきちんと読んで、ジャイロセンサーの値の取り方とか、そこら辺を探してみるつもりです。解決方法が見つかったらまたこちらに追記予定です。

追記：荒ぶる問題解決。

上記の実機でのジャイロセンサーの取り方が怪しいと睨んだ部分。正解でした。またもあまり難しく考えずに画面の動きから察するにどこか計算してるとこあるだろうと、360度とか180度とかそんな感じのとこ探してみよーっと、と軽い気持ちで調べたら

思いきり「gyroscope」ありました。しかも何やら計算してます。

// With iOS and Firefox Android, rotationRate is reported in degrees,
  // so we first convert to radians.
  if (this.isIOS || this.isFirefoxAndroid) {
    this.gyroscope.multiplyScalar(Math.PI / 180);
  }

embed.jsの8758行目あたり。iOSかfirefoxなら計算をするぞ、と。とりあえずこのifを削除したら荒ぶらなくなりました。ただ消すだけだとちょっと怪しいのでここはいろいろなOS＆ブラウザで動作検証した方が良いかもですが、ひとまずここが原因のようです。

// With iOS and Firefox Android, rotationRate is reported in degrees,
  // so we first convert to radians.
  //if (this.isIOS || this.isFirefoxAndroid) {
    this.gyroscope.multiplyScalar(Math.PI / 180);
  //}

とりあえずコメントアウト。いやー、すっきりしました。少し気になって確認したら、issuesにしっかり書いてありました。きちんと文献は確認しないとダメですね。

そして新たな問題が。

荒ぶる問題を解決すると、今度は別の問題が見えてきました。先のダイソーゴーグルで動作確認をしていたところ、グルーっと上を見てから視線を戻すと画像が斜めになっているような・・・？

気にならないと言えば気にならないけれど、一度気になると気になって仕方ないパターンのやつです。なんとなく、計算をどうのとするよりも、微妙な角度の場合は水平にする、とかそういった形で補正してやるべきな気がします。

でも、とりあえずは異常な動きはしなくなったので、荒ぶる問題は解決として良いでしょう。

そもそもで・・・

googleのVR View for the Webここにも書いてありますが

November 6, 2019 update:There’s a new open source Cardboard SDK that offers a streamlined API, improved device compatibility, and built-in viewer profile QR code scanning. We recommend that all developers actively building for Google Cardboard migrate to the new Cardboard SDK: iOS, Android NDK, Unity XR Plugin (SDK)

https://developers.google.com/vr/develop/web/vrview-web

VR開発するならこっちのSDK使いなよ！とのことで、こちらを使おうかなと悩んでいました。しかし実現したい事としては簡単なVR機能だけでいいのでわざわざUnity使えるようにしたりと言ったことをしたくないのが本音。ちょっと悩みますが一回ソース見てみます。

こんな感じで、JamesのWEBサイトはいろいろ考えながら作っています。

ボスがいろいろな業務の内製化を推し進めており、その一環で声をかけてもらって仲間入りをしました。これからも面白い物をドンドン世の中に出していけるように好奇心を失わずにいきたいものです。

当社には360度カメラや、4Kカメラと言った機材も揃っているので、「うちもVR使ってみたい！」という方がいらっしゃいましたらお声がけください。車屋以外でも活用できると思います。