こんにちわこんばんわ。
皆さんがお使いのPCはもちろんのこと、スマートフォンのウェブブラウザでもダイレクトにVRコンテンツを取り扱うことのできる「WebVR」についてつづっているコラム、その第2回です。
WebVRの基盤となっているもの、として前回最後に触れました「WebGL」。基盤になっているだけに、WebVRを理解するうえで外せないのですが、これは何ぞや？というご説明をできーるだけ、できーるだけかみ砕いて説明してみることにします。
いやね、なぜこういうことをするかといいますと、他の言語やフレームワークなんかも往々にしてそうなりがちなのですけど、ド直球の説明を読んでも「うわっ！ 意味わかんない！」って思っちゃうこと、ありません？
WebGLの説明なら、たとえば「Wikipedia - WebGL」を見ればカンペキに説明してあるんです。でも……
うわああああ！ 難しい単語ばっかり並んでて読む気が起らねえええ！
って、なりません？ 私だけなのかな……？
とこんなところで躓いていても仕方がありませんので、説明を試みてみます。
WebGLとは、Web上でダイレクトに3DCGを動かせちゃう！JavaScriptの仕組みの一つ
です。ああ、説明がおわってしまいました。
一昔前まで、皆さんがお使いのウェブブラウザ上で3Dのグラフィックを動かし、表示させるためには、3Dを動かすための特別なプログラムが必要でした。「プラグイン」と呼ばれていたものです。
今でこそ、このサイトのように（chrome experimentという、Googleが運営している3Dのデモを集めたサイトです）ブラウザ上でぐりぐり3Dが動くサイトは当たり前になりましたが、昔はこういった内容のサイトを動かす前に、やれ「Flashプラグインをインストールしてください」だの「Javaのインストールを」だの、いろいろブラウザに言われていたものです。
でも、それはつまり「3D」の計算や制御を「プラグイン」に依存していたことになります。
ブラウザで全部処理できればもっと早くなるし、アプリを分けずに済むことでセキュリティの信頼性もあがるし、できれば、ウェブブラウザでダイレクトに動かせた方がいいですね。
WebGLは、3Dを動かす命令を直接パソコン（ハードウェア）にお願いしちゃう！
さらに、そういった3Dのグラフィックを表示したり、動かしたりする命令を、ブラウザからパソコンのグラフィックボードに直接頼めるようにすれば、もうちょっと早くなるし、いろいろできるんじゃね？と考えた人たちがいました。
ちょうどうまい具合に、多くのブラウザ上で等しく動かせるプログラミング言語がありました。JavaScriptです。
ブラウザからプラグインを経由せず、JavaScriptを使ってパソコンのグラフィック……ええい、要は「ハードウェア」に、直接プログラミングできるようになればどんなにいいだろう、と考えたんですね。そうやってできたのが、WebGLです。
そして、このWebGLを使ってVRコンテンツをブラウザで直接取り扱えるようにしちゃおうよ！ と新たに作られた仕組みが「WebVR」なんです。
WebVR→WebGL→JavaScriptの強い関係性がここにある
なので、WebVRを動かすためにはWebGLを、そしてWebGLを動かすためにはJavaScriptを理解することが基本的に前提になります。……基本的には、ね。
実際のところ、WebGLを動かす際にも、はたまたWebVRを動かす際にも、初心者が簡単に取り扱うことのできる「ライブラリ」「API」が各種開発されています。
前回ご紹介した「A-Frame」はWebVR APIにおいて目下のところ最有力。
WebGLの世界では「three.js」というライブラリが有名で、3Dがぐりぐり動くウェブサイトでは定番中の定番です。
また、初音ミクの3DモデルをWebGLで動かす際によく使われた「jThree」なんてライブラリも有名でした。現在はA-Frameに匹敵する機能を持つとされるライブラリ「solufa」に引き継がれています。
つまり、こういったライブラリを駆使することで、
JavaScriptの基本中の基本さえ押さえておけば、自分のウェブサイトでもぐりぐり3Dを動かすことができ、さらにはVRコンテンツを直接ブラウザだけで表示することも可能になる
……というわけなんですね。
さあ、2回（実際は前フリ含めると3回）に渡る前話がようやく終わりました！
それでは、次回より、実際にWebVRをイチから始めてみることにします！
順番としては、上の関係性の逆に進みますので、
JavaScript → WebGL（three.js） → WebVR（A-Frame・Solufa）
の順にイチから！ あくまでイチから始めていきます。お楽しみに！
このアイキャッチ画像に書かれているプログラム、実はJavaScriptでした。というよくわからない種明かしを最後に入れて、また次回！