More than 5 years have passed since last update.

WebVR技術

Posted at 2019-11-15

WebVRとは

　WebVRとは、ウェブブラウザ上でVRデバイスを認識するために用いられる "JavascriptのAPI" のことです。Webブラウザ「FireFox」の開発で知られるMozillaを中心に、開発が進められています。

　WebVRはバーチャルリアリティデバイス（ヘッドマウントディスプレイなど）を用いて、Web上でVRを体験できるものです。
　
WebVRに対応したブラウザにバーチャルリアリティデバイスを接続することで、ブラウザ上のコンテンツがデバイスに表示され、顔の向きや頭の位置と連動してコンテンツが表示されるというものです。

以下ではVR等のバーチャル技術のかんたんな説明とWebでVRを実現するための方法をかんたんに説明します。

xR技術について

xRとはVR、AR、MR、SRの総称であり、x（cross） r（reality）の略である。
いわゆる、バーチャル技術。

VR

VRは「Virtual Reality」の略で、コンピュータによって作り出された世界を現実として近くさせる技術のことです。
仮想現実と言われています。

AR

ARは「Augmented Reality」の略で、コンピュータによって現実にあるものに対して情報を加える技術のことです。
拡張現実と言われています。

MR

MRは「Mixed Reality」の略で、コンピュータによって現実にあるもの形状（物の形や大きさ）を把握し、それらに対して情報を加える技術のことです。
ARの上位版で複合現実と呼ばれます。
※最近はARとの境目は曖昧になってきています。

SR

SRは「Substitutional Reality」の略で、コンピュータによって現実世界に現実の映像を映し出し、過去や未来の出来事を今正に、目の前で起きている様に感じさせる技術のことです。
代替現実と言われています。

xR（AR、VR、MR、SR）の活用例

Webブラウザで3Dコンテンツを扱うために

ブラウザ上でJavaScriptを使用して3Dコンテンツを扱うためには以下の２つの方法があります。

WebGL

Webブラウザで3Dコンテンツを扱う場合はWebGLを使用する必要があります。
WebGLはブラウザで3D表示するための標準仕様であり、Webブラウザで3D グラフィックスや 2D グラフィックスをレンダリングするための JavaScript API です。

四角い箱の表示
WebGL実装例

Three.js

Three.jsは、HTML5で3Dコンテンツを制作するためのJavaScriptライブラリです。
WebGLだけで3D表現をするためには、立方体1つ表示するだけでも多くのJavaScriptやGLSLコードを書く必要があり専門知識も必要です。Three.jsを使えばJavaScriptの知識だけで簡単に3Dコンテンツが作成できるため、手軽に扱えるようになります。

四角い箱の表示
three.js実装例

より簡単に3Dコンテンツを扱うために

WebGLやThree.jsを知らなくても、3Dコンテンツを扱うために「A-Frame」というものが存在します。

A-Frame

A-FrameはMozillaのVRチームが開発したWebVR用のオープンソースフレームワークです。

WebGL上に構築される考え方が、「WebVR」です。ただ、WebGLを理解してVRコンテンツを開発しようとすると、難易度の高い知識と技術が求められます。

そこで、MozillaがWebGLを知る必要のない開発者のためにWebVRフレームワークとして開発をしたのが、「A-Frame」なのです。HTMLとJavaScriptの知識さえあれば、A-Frameを使って誰でも気軽にWebVRコンテンツを作成することができるようになったのです。

HTMLで書けるようにした three.js のエンティティ・コンポーネント・システムです．

A-Frameの特徴

WebGLの知識がなくても、簡単にVR環境を構築できる(html 感覚で A-frame タグをマークアップすることができる)
レスポンシブなVRサイトを作ることができる
MITライセンスでソースが公開されている
Javascriptなどの言語を使用しなくても、HTMLタグのマークアップだけでシーン、アニメーションを記述することができる
四角い箱の表示
実装例

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <!-- aframeフレームワークのjsを読み込む -->
  <script src="https://aframe.io/releases/0.8.0/aframe.min.js"></script><!-- ① -->
  
  <title>A-Frame</title>
</head>
<body>
    <!-- ② -->
    <a-scene>
        <a-box position="0 1 -2"
               rotation="0 45 25"
               color="#f00"
               scale="1 1 1"></a-box>
    </a-scene>
</body>
</html>

script タグで「aframe」フレームワークのjsを読込み、タグ内に上記のような記載をするだけで四角い箱の表示を行いことができます。

WebGLとThree.jsと同じ四角い箱を画面に出力する記述なのですが、A-Frameではより簡単に3Dコンテンツを作成でいることがわかります。

【コラム】VR酔いについて

船酔い、車酔いと同じようにVRを同じように酔う方が結構な数でいらっしゃるようです。

VR酔いの症状

VR酔いの症状は以下の通り

胃のむかつき
吐き気
頭痛

なぜ酔うのか？

動揺病（そしてVR酔い）が起こる原因には諸説ありますが、有名なものには「感覚不一致説（感覚矛盾説）」が挙げられます。感覚不一致説とは、自分が今実際に知覚している感覚と、過去の経験から予測される感覚との矛盾が原因で酔いが起きるというものです。

対策

遠くを見る、眺める
遠くのぶれない風景を見ることで、不快感を軽減させることができます。
クールダウン
外の空気を吸ったり、涼しい空気にあたるのも良いです。アイスを食べるなどの冷たい刺激、というのも有効です。
休む、寝る
VR酔いは時間が経てば治るものです。
慣れる
　苦しくても続けろ、そのうち平気になる。
その他
　【朗報】ソニーがVR酔い対策デバイスの新特許を公開

最後に

xR技術はまだまだ発展途上ですが、グーグルやアップルなどのIT業界のビッグ5と呼ばれる企業が開発を主導しているため、近い将来、何かしらの産業に活用され、私達の生活に関わってくるかもしれません。

また、第5世代移動通信システムである「5G」が2020年にスタートします。
NTTドコモは「5G」の活用分野として、AR/VRに言及していますのでそういった案件がでてくるかも？

ちょっと前に話題になったVR技術でした。
興味本位で調べてみましたが、子供の頃に映画でみたSFの世界が現実になる日は近いのかもしれません。
とてもワクワクします。

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up