概要
WebGL Advent Calendar 2015 の18日目の記事です
WebGLの時代
Webは今、様々な過渡期にある。ES6の登場や、フレームワークの遷移、NPAPIの廃止などにより、その中に少し顔を見せだしたのがWebGLである。しかしWebGLの時代が始まったというわけではない。ブラウザの対応状況の悪さや、モバイル端末のスペックはネックであり、まだまだ時代は先のように見える。とはいえ、既にthree.jsなどのライブラリが開発され、WebGL2.0がついに登場するといったステージにあったりもする。
実は我々は普段3DグラフィックスライブラリであるjThreeを開発している。その中でWebGLがこれからの時代にどうあるべきか、何が求められているかということについて考えるに至りこの記事を書くことにした。jThreeに関する記述は多いもののあくまでWebGL全体に関して言えることについて記述していく。
ライブラリのターゲット
jThreeとはWebで3DグラフィックスをWeb開発者が容易に扱えるようにすることを目的として開発している日本発のオープンソースライブラリだ。jQueryに似たインターフェースを取り入れることで、jQueryを用いてWebでDOMを扱っている人であれば、jThreeを用いて容易に3Dオブジェクトも扱える、という点が特徴となっている。
この特徴はフロントエンドを書いているWebの人の発想から生まれるに至っている。このWebGl Advent Calendarを読んでいる人はWebGLのglslやシェーダーの話を求めている人が多いと思うが、このライブラリはいわゆるWebの人をターゲットとしている。このようなターゲットとなった背景にはWebGLの敷居の高さを無くしたいという思いがある。Webというプラットフォームには既に多くの住人が存在するが、そこにいままでUnityなどを扱っていた人がWebGLと共に流入するというだけでは意味がない。WebGLはWeb全体を巻き込むものでないとならないのだ。しかしそれには3Dのポテンシャルを再考する必要がありそうだ。Webにおける3Dが表すもの、WebGLの開く道というものはそのWebというプラットフォームの異質さ故、いままでUnityなどが担ってきた3Dの扱い方だけではないはずである。
Webのための3Dとは何か
Webブラウザで行えることは時代と共に遷移しており、今日、Webアプリケーションという形で多様なUI/UXが提供されている。そこへ新たなUI/UXとして登場したのが3Dという表現方法であるのではないかと私は考えている。しかしこのWeb3Dという表現方法はどのような役割を果たすのだろうか。
3D技術というものは様々なところで利用されているが、身近なものとしてあるのがゲームである。それゆえに3D=ゲームというイメージが強いように感じるが、Webブラウザでゲームができたところでそれは移植されたということに過ぎない。
そこでUI/UXとしての3Dというのがフロントエンドを書く人が思い浮かべる3D対する認識である。そのために生まれたのがjThreeというわけだ。
Webにおけるインターフェースが求めるもの
jThreeはthree.jsやUnityのWebGL出力とどう違うのか？たしかに既にJavaScriptから容易に3Dオブジェクトを使役するライブラリは存在する。しかしそれを扱うための感覚は、(すこし変な例えかもしれないが)スカラーとベクトルのような歪が存在すると私は思う。その歪を埋めるべくjThreeに採用されたのがGOMLという概念である。
GOMLとはxmlで3Dオブジェクトをツリー構造で表すという概念であり、そしてそのGOMLのタグツリーはjQueryインターフェースによって自由に扱うことができる。いままで慣れ親しんだインターフェースを利用してDOMを動かすように3Dを動かすことができれば便利だよね、という発想から採用されたインターフェースだ。
今現在、jThreeではjQueryインターフェースをデフォルトで採用しているが、これはjQueryにこだわった話ではない。GOMLがありされすればインターフェースは既にあるのである。Webではインターフェースが求めているものはツリー構造だ、という考えがある。これはWebにおいてDOMがフロントエンドを構成していることもあり、DOMに関する様々な議論が行われてきたという背景がある。そのためツリー構造を持つということは既に存在する技術を転用することが可能であり、またWebの人にとってはとても親和性が良いのだ。
すこしGOMLについてサンプルを交えて紹介したい。
下記のxmlがGOMLと呼ばれる3D空間を定義するファイルである。ちらほらと3Dでお馴染みの単語があるのが分かると思う。今回は詳しいタグの説明は省略するが、タグによってオブジェクトの親子関係を定義し、これらをjQueryでお馴染みのクエリインターフェースで取得し自由に属性を書き換えることができる。
<goml>
<resources>
<phong diffuse="blue" specular="#CCC" specularpower="15" name="blue"/>
<phong diffuse="red" specular="#CCC" specularpower="15" name="red"/>
<phong diffuse="green" specular="#CCC" specularposer="15" name="green"/>
<cube name="cube" />
<grid hdiv="20" name="grid" vdiv="20"/>
</resources>
<canvases>
<canvas clearColor="purple" frame=".canvasContainer">
<viewport cam="CAM1" id="main" width="640" height="480" name="MAIN"/>
</canvas>
</canvases>
<scenes>
<scene name="mainScene">
<object rotation="y(30d)">
<camera id="maincam" aspect="1" far="20" fovy="1/2p" name="CAM1" near="0.1" position="(0,8,10)" rotation="x(-30d)"></camera>
</object>
<mesh geo="grid" mat="red" scale="10"/>
<mesh geo="grid" mat="green" scale="10" rotation="z(90d)"/>
<mesh geo="grid" mat="blue" scale="10" rotation="x(90d)"/>
<alight color="#FFF" intensity="1" top="40" far="50" right="50" position="-10,-10,10"/>
<mesh geo="cube" mat="red"/>
</scene>
</scenes>
</goml>
参考までにこの最も簡単なサンプルのレンダリング結果は下のようになる。
Web3Dの未来
WebにおけるUI/UXというものは3Dになり得るのか？現在、3Dでの商品紹介などがあるが、どれも360度見回せる程度であり、インタラクティブというには程遠い。しかし実際に商品をあらゆる角度で見れたり、可動部を動かすとPhysicallyに振る舞うなど、より3Dとしてのインタラクティブ性を出せればそれはより現実的なユーザー体験を提供することができると考えられる。しかし、いままでMapなどが3Dになったことでそれを使うのかと言ったらNoと答える人がほとんどであり、面白いというだけで終わってしまうのだ。ユーザーの求めるものをより直感的にサポートする表現方法としての3Dというものを考える必要があるようだ。
Web3Dのためのライブラリの役割とは
結論から述べますと、Web開発のコンテンツの表現方法としてWebGLという選択肢を増やすということをjThreeの目的としている。
jThreeは特徴でも述べたが、DOMを操作する感覚で3Dオブジェクトを扱うことができる。これによってWebエンジニアが3Dコンテンツに対して積極的にアトラクトしてもらえるのではないだろうか？そしてWebにおけるUI/UXとしての3Dというものに新たなパラダイムの転換が起こるのではないかと期待している。
jThreeのはなし
いままでのv2ではthree.jsのラッパーライブラリであったが、現在開発中のv3では独自のレンダラを持つようになった。
そしてv3の特徴としてdeferred renderingを主なレンダリング手法として用いている。
技術的詳細に関してはWebGL Advent Calendar 2015の16日目に@kyasbal_1994さんが記事にしてくださっています。どうぞご覧ください。
最後に
コントリビューターを募集しています。
お気軽にお声掛けください。