threejs

進化を続ける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

    Design Report|デザインレポート

    ※上のボタンで縦横の回転を切り替えられます。
    ※縁を入れてあるのは、透過にすると伸び縮みしてるだけのように見えたので・・

3DのDEMOはWebGL対応のブラウザ(Chrome、Firefox、Opera)で。
(WebGL非対応のブラウザでは3Dオブジェクトは表示されません。Safariは表示されるものの、動きがガクガクになるからいまいち向いてないみたい) ※追記:iOS(iPhone,iPad)の場合、OS側でWebGLをOFFにされているので3Dオブジェクトが表示できません。。ONにするにはちょっとややこしいことしないといけないので・・ごめんなさい。 また、「右のアニメーションが動かない」という人は・・・ 悪いことはいいません、新しいブラウザに変えましょう。

みなまで言わずとも、見ての通り・・といったところかと。

2Dでは厚みが無い為、文字通り「ペラペラ」。 動かさなければ非常に精巧であっても、動きが加わった途端に安っぽくなってしまうこともある。

対して3Dでは、奥行き・・オブジェクトそのものの厚みに限らず、『オブジェクトまでの距離』やその空間に『x、y、z軸の広さ』などが存在する。
その為

  • 凹凸のある質感の再現ができる
  • 遠近感が存在する
  • 光源を設置し、その光源からの距離・面する角度によって動的に陰影を生むことができる
    ※これらにより、水や大気のゆらめきなども再現可能。

と、非常にリアリティのある、動きのあるオブジェクトを作成することができる。

‥余談

Design Report|デザインレポート

僕は元々、「空間性」というものが好きで
その空間的なものをつくるためにもよく、こんな感じに意味も無く、無駄にパースを描きたがったりもする・・。

そんな人間なので、こうした空間をつくるもの‥3Dグラフィックなどに興味を持つのは当然の流れで・・。この「three.js」にも飛びつかない訳がないという・・。

ちょっと技術者向けの話題。

この「three.js」を使ったインタラクティブなコンテンツ制作の際の注意点。
まずは下記の別ページで開くDEMOをご覧下さい。

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でのこれからの「表現」

‥とはいえ、ここまでの話だけなら、まだ「ふーん・・」といったところだと思われるだろうが、 しっかりと開発して行うと、下記のようなかなり驚くようなプロジェクトなども開発できます。

aquarium WebGL Aquarium

左上のパネル部分でオブジェクト数(魚などの数)、視点、オプションなどの切り替えも行えます。

この他にも、冒頭の「three.js」のWebサイト内のサンプルで「これは見ておいて損はないんじゃないか!?」というものをPick upしました。

またChrome Experimentsで http://chrome.com/maze/
こんなゲームも作成されていますね。

このように、開発次第で様々な表現やサービスを可能としてくれるこの「three.js」

WebサイトやWebサービスのこれからの可能性を感じさせてくれる、とてもエキサイティングなライブラリだと思いませんか?

Comments

Comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

認証コード * Time limit is exhausted. Please reload CAPTCHA.