海外でも話題の metrogram3D 開発秘話！ 実装した本人が語ってくれた WebGL 実装の裏話
東京の地下鉄を WebGL で 3D ビジュアライズ！
光のパーティクルを用いた美しい表現が海外でも話題の、和製 WebGL 実装、metrogram3D をご存知でしょうか。
今回、この美しい WebGL によるコンテンツを実装されたご本人から記事の寄稿をいただくことができましたので、ご紹介させていただきます。
three.js でパーティクルを実装するなら非常に参考になる内容だと思いますので、ぜひチェックしてみてください！
自己紹介
皆様こんにちは。博報堂アイ・スタジオでインタラクティブデベロッパーをやっている小井と申します。今回、研究開発の一環として制作した「metrogram3D」について、WebGL総本山管理人の@h_doxasさんより記事化のお話を頂き、寄稿させていただきました。
metrogram3D 開発
WebGLを始めたのが2014年の12月。研究開発の担当分野でWebGLの名前があがり、それを進める事になりました。WebGLと一言でいっても非常に範囲が広く、当時の分け方としては大きく次の二つに分けていました。three.jsをやるか、shaderを書くか?まずは社内にも説明がしやすいthree.jsをやって、それで一定の成果をだしてshaderをちゃんと書こう！という取り組みにしました。
通常業務もこなしながらの研究開発となるので時間を作ることから始めないといけない。とはいえ年末進行。だったらもういっその事会社にいる間は仕事して、帰宅後の30分だけ資料を探したり、コードを書いたりする事にしたんです。1日30分だからそんなに多くの事は出来ないし、やれる事も限られてきますので通勤時間を利用して今日は何をやるか？ということを考えていた気がします。そうすると自然と知見もたまり、デモを作るぞ！という段階では自分自身の知見に加え、実際のサンプルコードが90前後溜まっている状態になりました。（下記キャプチャはその一例です）
ノウハウを溜めたとはいえ製作を始めると細かいバグや処理などが増えてきますので、実装手法や表現を常に変えていく事になります。通常のクライアントワークでは必要な要素やデザインを確認してもらって、それから実装に入るケースが多いのですが、今回はグラフィックデザインを作らずに製作を進行させています。
振り返って、一番時間をとってしまったのはパーティクルと呼ばれる、粒子のような表現を行うプログラムでした。今回はそれを駅と運行中の車両に割り当てており、その部分のバグというか、仕様というか・・・・その辺りは骨を折りましたね。ネットから資料を探しても動かなかったり、そもそもWebGLやthree.jsの情報はライブラリの導入や基本的な使い方の記事は多くあるものの、そこから先の情報についてはほとんどないんです。結果参考になる資料も無いままひたすら手数を増やして解決しましたが、具体的には・・・
- 光源の動的な追加が出来ない
- パーティクルの粒子一つ一つの座標を変更してもグラフィックに反映されない
- パーティクルが表示される領域が人間的な認識と異なる
1の「光源の動的な追加が出来ない」については、別サイトさんの記事でも見かける事があり、最初に使う予定の個数だけ光源を用意しておく方法で回避できるのですが、今回は光源を使わずに表現できる方向にシフト。結果的に、問題を回避しつつパフォーマンスを向上させる事に成功させています。
2,3に出てくるパーティクルの現象は小さなテストコードを複数用意し、three.jsの仕様を状況に合わせて細かく確認しています。挙動としては以下にサンプルのHTMLへのリンクを用意しているのですが、カメラが表示できる距離以内にパーティクルがあれば当然表示されますが、それ以上もしくは、パーティクル（THREE.PointCloud）本体の座標が、カメラ表示領域外に入るとすべて非表示になるという現象でした。
パーティクルとカメラ距離による表示確認HTML
カメラとリングの距離が一定距離を超えると、突然すべてが非表示になってしまう現象です。
処理のフェイズごとに発生する大小含めて回避するべき問題が起こると、最小限のサンプルセットを作り常に検証を繰り返しながらデモに組み込むという流れで最終的なアウトプットにつなげています。
最後にフォーマンスチューニングや対応端末の選定などを経て、リリース。リリースから半日程度で大手ウェブメディアに取り上げられるなど大きな話題になっているようで嬉しく思っています。
