VR・AR・MR・IoTなメディアの話題・ニュース・コラム

VRonWEBMEDIA(ヴイアール・オン)

WebVRをイチから始めてみたその3・WebVRを書く前に覚えておこう!

投稿日:

こんにちわこんばんわ。

皆さんがお使いのPCはもちろんのこと、スマートフォンのウェブブラウザでもダイレクトにVRコンテンツを取り扱うことのできる「WebVR」についてつづるコラム、その第3回です。

前回は「WebVR」「WebGL」「Javascript」の関係についてお話ししました。今回からいよいよ実践です。

WebVRのサンプルを見てみよう!

まずは以下のボタンをクリックしてください。

A-Frame(WebVR)のサンプル

 

すると、新しいページでこんなの出てきませんでしたか?

これ、実際にWebVRの一つであります「A-Frame」で書いたサンプルページです。試しに

  • マウスをクリックしたままドラッグしてぐりぐりと動かしてみたり
  • キーボードの「W(前)」「S(後ろ)「A(左方向)」「D(右方向)」を押してゴリゴリ動かしてみたり
  • (スマホでご覧の方は)スマホを傾けたり動かしたりしてみたり

してみてください。(なお、Internet Exprolerなど一部のブラウザでは動作しない場合があります)

さらに、右下にあるアイコンを押してみてください。

これをご覧になっているのが「スマホ」で、かつ「WebVRに対応しているブラウザ」で、さらに「ランドスケープ(横画面表示)」にしてあれば、360度VRの画面に切り替わるはずです。つまり、ご覧のページはVRに対応しているページなのです!(エッヘン)

ハコスコの段ボールビューワ(Google CardBoard仕様のHMD)を通してみれば、あら不思議! VR体験ができます!(ただの赤い立方体だけど)

この映像を構成するデータとは…

さて、上でご説明した通りこのサンプルページは「WebVR」の一つであります「A-Frame」を使用しているのですが、そのサンプルページに書かれているコードをこちらでもご紹介しましょう。

<!DOCTYPE html>
<head>
<script src="https://aframe.io/releases/latest/aframe.min.js"></script>
</head>
<body>
<a-scene>
<a-cube position="0 1 0" color="#d00"></a-cube>
<a-sky color="#EEE"></a-sky>
</a-scene>
</body>

これだけです。

たったこれだけ。

これだけであの赤い立方体がぐりぐり動いちゃうんです!

WebVRの前に覚えておかなくちゃいけないこと

さて、上のコードで「……何が書かれてるんですか?」と思ったアナタ。

間違ってません。間違ってませんよ。

前回お話ししましたように、WebVRはWebGLの一つとして存在し、WebGLはjavascriptの一つとして存在します。

つまり、WebVRを実際に動かすには、元となるjavascriptを設定し、さらにそのjavascriptを動かすための「HTML」を書いてあげる必要があるのです。

上の画像で説明すると……

こんな感じ。ざっくりだなー。

ということは、HTMLとjavascriptをちょっと理解する必要がある、ということになります。

さすがにHTMLやjavascriptについてここで説明を始めてしまうとキリがありませんので、まだご存じでなかったら、ホンのさわりでも結構ですので、ちょっと検索してお勉強してみてください。

こちらでは、定番中のど定番をご案内しましょう。20年の歴史を誇る「とほほのWWW入門」さんより……

とほほのHTML5 http://www.tohoho-web.com/html5/index.html

とほほのJavaScriptリファレンス http://www.tohoho-web.com/js/index.htm

次回はいよいよ!(何回目だ) このサンプルページを使って一つずつ解説していきます。

お楽しみに!

オススメ記事

1

AR技術を活用して作られた新しい「テクノスポーツ」、HADOとは?   「HADO」とは、株式会社meleapが開発・提供しているAR(拡張現実)を用いた新感覚のARスポーツです。名付けて「 ...

2

日本各地で展開されているVR・ARアトラクションの情報を、VRonが発見した順に随時纏めています。取り上げているのは、 Oculus RiftやHTC Viveなどを使用し、フロアマーカーに対応したV ...

3

こんにちわこんばんわ。81plusです。 寒いけど晴れたので、会社のベランダにGear VRを乗っけて撮影してみました。VRゴーグルのある日常、みたいな。   先日、私の友人からこんな質問を ...

-コラム, 特集
-, , , , ,

Copyright© VRonWEBMEDIA(ヴイアール・オン) , 2017 All Rights Reserved.