WebVR で 3D コンテンツを作る

最近 Chrome の安定版で（フラグを変更すれば） WebVR が動くようになりました。しかも、Oculus Rift、HTC VIVE 対応です。これはやるっきゃないでしょ！ Firefox は前から対応してましたが、Chrome 対応はやはりワクワクしますね。

それに加え、ずいぶん経ったけど、Unity で多少綺麗な表現しても動くかな？ というのを確かめたかったのもあります。今のところは焼いたテクスチャも普通に見えるし、天井部分の Bloom がいい感じに動いているので割と満足です。

できた物

火と水をモチーフにした3次元ブロックパズルにしました。

チュートリアルもあるので試してみて下さい。
WebVR を開く（30MB）

対応ブラウザだと画面右下にカードボードアイコンが出ます。これをクリックすると、Oculus Rift、OpenVR 準拠ヘッドセット、Windows MR で遊べます。

対応ブラウザは多分次の通りです。

…が、Chrome はまだガクガクです。

作成の準備

とりあえず、いつも通り Unity でやります。2018年4月24日時点で必要なものは以下の通り。

これだけ入れれば即動く環境が作れます。WebVR Assets には Project Settings が含まれているため、できれば新しいプロジェクトで始めるのが安心です。既存のに突っ込むと（私のように）変な苦労をします。

変な苦労をしたところ

既存のプロジェクトを改造したので、最初レンダリングが崩壊して原因を探りました。

  1. ビルドが暗い
    → Unity の WebGL は Realtime GI には非対応でした。完全ベイクに変更して解決。
  2. 左目しか描画されない
    → Linear カラースペースのプロジェクトだったんですが、このためには WebGL 2.0 を指定する必要がありました。しかし、これは WebVR アセットの（または現在の WebGL の）対応範囲外っぽいです。結局 Gamma に変更してライトを再調整しました。
  3. ポストエフェクトをかけると画面がゆがむ
    → Post Processing Stack v2 を使っていましたが、これが相性悪いようです。v1 で動かせば Bloom は動きました（ほかは未検証）
  4. カメラ位置がおかしい
    → まだよくわかっていない。本来の設定位置からずれる。原点にしておけば大丈夫なのかな？

まとめ

WebVR は今までモバイル向けだったのであまり興味を持っていませんでしたが、ハイエンド体験が Chrome でできるとなれば話は別です。実際のコンテンツの質は頑張るしかありませんが、プラットフォームに依存しない形で物量少なめなハイエンド体験ができるようになっていけば良いなあと思います。

2018年4月24日