こんにちは！
デザイナーの伊東です。
Web界隈のテクノロジーの進歩は凄まじく、日々新しいサービスや技術が生まれています。
“VR”という言葉もここ数年でよく耳にするようになりましたが、今回はWebVRという技術にスポットライトを当てたいと思います。
実は、ALAKIでは、数カ月前からWebVR案件の問い合わせを頂いており、WebVRの開発に着手しています。
なかなか深い内容なので、数回に分けてお届けします。
第一回目は”WebVR”のさわりの部分をご紹介できればと思いますので、最後までお付き合いよろしくお願いいたします。
この記事の目次
WebVRとは
広義で”WebVR”とは、Webブラウザ上でVR（バーチャルリアリティ）体験を提供することを言います。
もっと具体的に、以下の仕様で作られたVRコンテンツのことを指す場合もあるようです。
- HTML + Javascriptで作成
- 3Dグラフィックを作成するために、WebGLを利用
WebGLについて少しだけ
ブラウザ上で3Dグラフィックを表示させるための標準仕様のことをさします。
このWebGLを比較的簡単に実装するためのJavascriptプラグインが”Three.js“です。
WebVRを実装するためには、基本的にThree.jsを使用して制作するのが主流です。
WebVRの技術は日々進歩しており、つい先日まで動いていたコードがバージョンアップにより動かない、なんてこともあり得るようです。新しい情報をしっかり追う必要があります。
WebVRが動く環境
現時点で、WebVRが動く環境は大きく分けて2つです。
PC環境
- 端末
PC + Oculus Rift / HTC vive - 対応ブラウザ
Chromium / Firefox Nightly （現在この2種類）
スマホ環境
- 端末
iPhone / Android端末 + スマホ向けVRゴーグル - 対応ブラウザ
なんでもOK
WebVRを実装するためのフレームワーク
先ほどThree.jsを使用してWebVRを実装するとご説明しましたが、Three.jsを簡単に記述できるようにしたフレームワークが存在します。
もちろん生のThree.jsのコードを書いてもいいのですが、フレームワークを使用することでもっと手軽に実装することができます。
WebVR Boilerplate
Three.jsを直書きするのに近い感覚でVR制作を行うことができます。Three.jsの記述に慣れている方にはおすすめかもしれません。下記のGitHubのURLからサンプルプロジェクトをダウンロードできます。
https://github.com/borismus/webvr-boilerplate
A-Frame
ブラウザのFireFoxなどで知られるMozilla社が開発しているフレームワークです。
その特徴は、HTMLのタグを記述するような感覚でWebVR開発を行える点です。
Webデザイナーの方が初めてWebVRに挑戦する、という場合にはとっつきやすいと思います。
下記のURLからソースコードをダウンロード可能です。
Vizor
上記の2つがフレームワークなのに対し、このVizorは開発環境になっています。新規プロジェクトを作成すると、複数のオブジェクトがすでにセットされた状態で開発を進めることができます。
直感的に開発を進めることができるようですが、日本語で解説しているドキュメントは少ないです。
少しだけ触ってみる
今回はWebVRの大まかな概要と、その実装方法や閲覧環境について書きました。
最後に、実際にWebVRがどういったものかというのを体験していただくため、サンプルをご用意しました。
先ほどご紹介したVizorを利用して実装しています。
※スマホでご確認ください！
https://vizor.io/itonao/alaki/
WebVRは、今後ますます注目される技術になると言われています。このブログで少しずつ記事を投稿しながらみなさんに情報を共有していきます！
次回もよろしく願いします。
