コラム

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

2016年12月13日

こんにちわこんばんわ。

皆さんがお使いの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

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

お楽しみに!

この記事が気に入ったら
いいね ! しよう

Twitter で

オススメ記事

1

その日、取材班はお台場におりました! 11月16-17日、IVRC実行委員会はテレコムセンター(お台場)にて、第27回国際学生対抗バーチャルリアリティコンテスト(IVRC 2019)決勝大会を開催しま ...

2

その時、我々は両国におりました! いちから株式会社/株式会社ソニー・ミュージックソリューションズは12月8日、両国国技館にて「Virtual to LIVE in 両国国技館」を開催しました。 今回、 ...

3

バーチャルアーティストの田中ヒメ、鈴木ヒナによるユニット・HIMEHINAと田中工務店は9月27日、東京六本木のEX THEATER ROPPONGIにて、初のワンマンライブとなる『心を叫べ』を開催し ...

4

【続報3・21:40時点】iTunesアルバムランキング(総合)、Jポップ部門、共に[第2位]にランクイン!あと少し。あと少し!!#MZM pic.twitter.com/QxTO85FdGW &md ...

-コラム
-, , , , ,

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