進化を続けるJavaScript：3Dレンダリング
W
eb制作においていくつかのリソースが必要になるが、その中で近年大変に注目を浴びている「JavaScript」というプログラミング言語がある。 ページを開くと何かが起こったり、画像がスライド表示されたりといったものや、画像ビューアーもページ内のスムーズクロールもパララックスサイトもすべて「JavaScript」によって成せるワザだ。 要するに、現代的なサイト制作には不可欠とも言えるリソース。 その中で個人的にとても注目している「JavaScriptライブラリ」がある。 それが今回紹介する「three.js」。3Dレンダリングエンジン「three.js」
three.js
http://threejs.org/
「three.js」はWebGL(ウェブブラウザで3次元コンピュータグラフィックスを表示させるための標準仕様)を利用してブラウザ上に3Dグラフィックスを描画するJavaScriptライブラリ。
これまでも3D的表現は数々あったが、そのすべては疑似的なもので本質的に2Dだった。
そう、「平面」でありいくら「3D的」であっても「厚み」が無いのだ。
回転などさせればすぐ分かる。
しかし、この「three.js」は「厚み」も「奥行き」もある完全な3Dを描画できる。
実際にどう違うのか・・というのは下記をご覧いただければ一目瞭然と思う。
-
3D
※マウスドラッグで回転を加えられます。・・なぜかY方向がうまく取得できない。。。要勉強・・。
-
2D
※上のボタンで縦横の回転を切り替えられます。
※縁を入れてあるのは、透過にすると伸び縮みしてるだけのように見えたので・・
（WebGL非対応のブラウザでは3Dオブジェクトは表示されません。Safariは表示されるものの、動きがガクガクになるからいまいち向いてないみたい） ※追記：iOS(iPhone,iPad)の場合、OS側でWebGLをOFFにされているので3Dオブジェクトが表示できません。。ONにするにはちょっとややこしいことしないといけないので・・ごめんなさい。 また、「右のアニメーションが動かない」という人は・・・ 悪いことはいいません、新しいブラウザに変えましょう。
みなまで言わずとも、見ての通り・・といったところかと。
2Dでは厚みが無い為、文字通り「ペラペラ」。 動かさなければ非常に精巧であっても、動きが加わった途端に安っぽくなってしまうこともある。
対して3Dでは、奥行き・・オブジェクトそのものの厚みに限らず、『オブジェクトまでの距離』やその空間に『x､y､z軸の広さ』などが存在する。
その為
- 凹凸のある質感の再現ができる
- 遠近感が存在する
- 光源を設置し、その光源からの距離・面する角度によって動的に陰影を生むことができる
※これらにより、水や大気のゆらめきなども再現可能。
と、非常にリアリティのある、動きのあるオブジェクトを作成することができる。
‥余談
僕は元々、「空間性」というものが好きで
その空間的なものをつくるためにもよく、こんな感じに意味も無く、無駄にパースを描きたがったりもする・・。
そんな人間なので、こうした空間をつくるもの‥3Dグラフィックなどに興味を持つのは当然の流れで・・。この「three.js」にも飛びつかない訳がないという・・。
ちょっと技術者向けの話題。
この「three.js」を使ったインタラクティブなコンテンツ制作の際の注意点。
まずは下記の別ページで開くDEMOをご覧下さい。
DEMOを開くと全画面表示の3Dグラフィックが表示されるはず。 そこでマウスを色々動かすと、その動きに追従して3Dグラフィックが変形するようになっています。
・・とまぁ、そこまではいいんですが、
そこから少しスクロールしていくと、3Dグラフィックのエリア外になっているにも関わらず、3Dグラフィックがマウスの動きにずっと追従し続ける・・という・・。
この「three.js」はHtml5のcanvasを利用して、3Dグラフィックを描画する。（※当然Html5やcanvas非対応の古ブラウザでは表示不可。）
canvasからカーソルが離れても、canvas内のイベントが呼び出され続ける・・ということ。
設定次第でどうにかできるのかもしれないが、「three.js」のマウス座標取得やクリック判定を行う「ray」がwindowに対してのイベントなので、ここをどうにかできると良いのだろうと思う。
ただ、「three.js」本体の設定なので、かなりの労力とスキルを要求されると思う。
※現に、今まで見た様々なサンプルでも、基本全部canvas外でもイベントが呼び出され続けているものばかりだった。
その為、全画面表示にするなどしたり、インラインフレームで埋め込んだり・・という形態をとっている模様。
個人的に、絵面的にあまり好きではないから気になる・・というくらいで、そこまで気にしないでもいいのかもしれないが
実際問題、canvasでの描画ある以上、動きが加わる毎に消去⇔描画が行われる＝RAMを食う。
かつ、3D描画は通常の2Dcanvas描画よりRAMを沢山食う。
後々解決しておいたほうが良いかな・・とも思う。
「こういう仕様がある」と頭に入れておくと開発の際色々といいかな・・という話。
（ページデザインの計画やサイト全体のデザインを考察する際や、どこにコンテンツを利用するか・・などの参考になるかと）
three.jsが拓く、Webでのこれからの「表現」
‥とはいえ、ここまでの話だけなら、まだ「ふーん・・」といったところだと思われるだろうが、 しっかりと開発して行うと、下記のようなかなり驚くようなプロジェクトなども開発できます。
WebGL Aquarium
左上のパネル部分でオブジェクト数（魚などの数）、視点、オプションなどの切り替えも行えます。
この他にも、冒頭の「three.js」のWebサイト内のサンプルで「これは見ておいて損はないんじゃないか!?」というものをPick upしました。
- http://threejs.org/examples/#webgl_materials_cubemap_dynamic2
- http://threejs.org/examples/#webgl_materials_cubemap_balls_refraction
※こちらがこの記事の冒頭の画像の元。またChrome Experimentsで http://chrome.com/maze/
こんなゲームも作成されていますね。
このように、開発次第で様々な表現やサービスを可能としてくれるこの「three.js」
WebサイトやWebサービスのこれからの可能性を感じさせてくれる、とてもエキサイティングなライブラリだと思いませんか？
Comments