スマートシティやSDGsをわかりやすく。3D都市モデルでのビジュアライズ表現

都市のSDGs実績をPLATEAUの3D都市モデルで表現

――次に、AMCIでの取り組みについて教えてください。

林：AMCIでは、大丸有エリア（大手町・丸の内・有楽町の3エリアのこと）におけるSDGs活動をビジュアライズしています（https://amci.tokyo-omy-w.jp/）。ポイントアプリのデータや人流データをAPIで呼び出して取得し、それを可視化しています。CO2削減量を葉っぱのモーショングラフィックで表現したり、特定指標の実績をビルごとに色分けしたり、ビルの高さのアニメーションで表示したりしています。ここでは街の3DモデルにPLATEAUを使っています。

　一般の方には、SDGs自体がわかりづらい。「SDGs活動とは何ぞや」というところがあるので、それをどうすれば伝わりやすくなるかを気にしながら作っていました。また絵的なところですが、パーティクルなどのビジュアルもかわいらしい感じになって、気に入っています。

　こちらはThree.jsで作っているのですが、わりと軽くできました。動作がそこまで重くないと、サイトを見ていてストレスがないですね。重いWebGLのサイトなどでは、見ているだけでバッテリーがすごい勢いで減っていきます。個人的にはこういうコンテンツも、軽さみたいなものはUXに直結するのではないかと思っており、そこはがんばったポイントです。

［補足］　Three.js（https://threejs.org/）はJavaScriptの3Dライブラリ。アニメーションやゲームなど幅広い3Dコンテンツの制作で使われている。

――Three.jsを採用した理由を教えてください。

林：3Dを出力するという部分で、一番安定していて、Web上に記事やTIPSも多いです。今回は3Dデータやパーティクルを使いますし、こういうものを作るということが事前にわかっていました。Three.jsだったら、それが実現できるとわかっていたので採用しました。また昔からよく使ってもいたので、自分の中にノウハウがありました。

照明やサイネージのシミュレーションも想定できる

――はじめてPLATEAUを使ったときの印象を教えてください。

林：もともとPLATEAUの存在は知っていました。それでダウンロードしてみたものの、その当時は、何に使えばいいんだろう、どう使ってよいかも分からないという状態でした。

　ですが実際に使ってみると、これまで使っていた3Dデータに比べて、圧倒的に使いやすかったというのが、第一印象です。

　ただ、はまってしまうポイントはあります。PLATEAUでは、区域のデータがメッシュできれいに正方形に分割されています。ここのエリアのこれが欲しいというときは、まず、メッシュの一覧が書かれたPDFファイルを見て、そのメッシュ番号をメモして、そのメッシュに相当するデータを開くわけですが、いざ開くと場所が違うというようなことが、最初のうちは、よくありました。慣れれば、なんとなくメッシュ番号の連番ルールもわかってくるのですが、逆引きのような感じでメッシュ番号を検索できると、とても便利なのではないかと思います。

［補足］　PLATEAUでは、国が地域の統計などにも用いる緯度経度に基づいたメッシュと呼ばれる区域でファイルを分割している。建物のデータが欲しい場合、その建物が、どのメッシュの番号に相当するのかを確認して、ファイルを特定する必要がある。

　またデータが詳細かつ大きいので、ある程度、Blenderなどの3Dソフトが使えないと、整理などの前処理ができず、利用するアプリケーションに適した状態で使うのが難しいのではないかという気がしました。

――PLATEAUは、どんな場面で使えそうだと考えますか？

林：商業施設のシミュレーションなどでも使えるとよいと考えています。商業施設にサイネージやLED照明を採り入れるときは、そのシミュレーションをUnreal EngineやUnityで作ったりしています。

　新しくビルを建てる場合、そのビル自体の3Dモデルを建築家さんなどが作るのですが、その周辺にある施設から入ってくる光を計算したいというようなニーズがあります。かつてはかなりコストをかけないと無理だと思ったのですが、PLATEAUを使えば、建築予定地の周辺ビルのモデルも作れます。そこに照明などを配置すれば、そうしたシミュレーションもできるのではないかなと考えています。

　それから、「この角度だと、このサイネージ（広告）は見えない」という検証も、モデルさえ立ち上げてしまえばできるのではないかなと考えています。そこまでできると、リスク回避にもなりますし良いですよね。BASSDRUMでもサイネージや照明の分野で、インタラクティブな制御をしているため、こうしたシミュレーションのお話も来るのですが、そうしたところで使えるといいなと思います。

林 久純（HISAYOSHI HAYASHI）
HYS INC., BASSDRUM　 Designer, Programmer, Tech director

デザイナー・プログラマー・テクニカルディレクター。都内の制作会社でデザイナー兼プログラマーとして勤務した後、2008年からフリーに転向。2014年にHYS INC.を立ち上げる。2015年から3年間はPARTY TOKYOにも所属。JavaScriptやopenFrameworkなどを使った、インタラクティブで動きのあるプログラミングが得意。デザイナーとしての経験を活かし、技術とデザインを交えたテクニカルディレクターとしても活動中。