点群 on Data Visualization Japan

杉本直也／静岡県が目指す「VIRTUAL SHIZUOKA構想」とは？

Wed, 29 Dec 2021 00:00:00 +0000

Data Visualization Japan Meetup 2021（2021年12月29・30日開催）における、杉本直也さん（静岡県庁）の講演です。県全域の点群データをオープンデータ化する「VIRTUAL SHIZUOKA構想」と、熱海土石流災害での活用を紹介します。

皆さんこんにちは、静岡県庁の杉本と言います。「静岡県が目指す VIRTUAL SHIZUOKA構想とは」ということでお話しさせていただきます。

自己紹介

静岡県の土木技師です。GIS やオープンデータ関係を担当してきて、最近は自動運転やスマートシティ関連の業務を担当しています。

県職員以外では、シビックテック団体の Code for Kakegawa に所属し、総務省の地域情報化アドバイザーとしても活動しています。

皆さん、どんなポイント貯めてますか

実は静岡県はポイントクラウド（点群）を貯めています。

まずはバーチャルツアーを体験していただきます。これは静岡県伊豆の国市の上空です。森が見えて高圧線も見えていますが、これは動画映像のように見えて、1点1点がすべて位置情報を持った点の集まりなんです。それに色の情報を付けている。拡大していくと点の集まりだと分かります。

いま、世界文化遺産の韮山反射炉に降りていきます。

このように、仮想空間の中に静岡県全域を点群データで取得してオープンデータ化する——それが VIRTUAL SHIZUOKA構想です。

なぜ航空写真ではなく点群なのか

「そもそも点群じゃなくて航空写真でよくない?」と思った方も多いと思います。ある意味それは正解なんですね。

静岡県は航空写真では撮影できない「地表面」を取得したいので点群データを取っています。

上空からレーザー光を照射すると、葉っぱで跳ね返るものと地面まで届くもの、いろんなデータが返ってきます。それを処理することで地形データが取れる。「本当?」というご質問もよくいただきますが、これくらい葉が生い茂ったところでも、光が漏れる程度の隙間があればデータが取れています。

たとえば浜松の光明山遺跡。左は木や建物が見えるオリジナルデータですが、そこから地面だけのデータにすると——綺麗な前方後円墳になっているのが分かります。このグラウンドデータ（地表面のデータ）が取れるところに静岡県は注目しています。

3つの取得方法

方式	高度	内容	密度
LP（レーザープロファイラ）	セスナで上空2km	1秒間に200万発のレーザーを地上へ	1㎡あたり16点
ALB	ヘリで約500m	緑色のレーザーで水面を突き抜け、海底・水中の地面を取得	1㎡あたり1点程度
MMS（モービルマッピングシステム）	車上	レーザースキャナ＋360度カメラ	1㎡あたり約400点

これらのデータを G空間情報センターからオープンデータとして公開しています。国土地理院の国土基本図郭（1メッシュ約400m×300m）をクリックするとダウンロードできます。

取得計画

令和元年：約1050km²を約3億円かけて取得（後述する熱海のデータもこの中）
令和2年：西伊豆
今年度：富士山を含む静岡県全域

一部南アルプスは取得できないのですが、人が住んでいるエリアはすべて——携帯電話のカバー率的な表現をすれば**人口カバー率100%**のデータが今年度末に取得でき、オープンデータ化する予定です。

点群データの取得に、だいたい17億円ほどかかっています。

「バーチャルシンガポールのパクリですよね」

VIRTUAL SHIZUOKA と言うと必ず聞かれます。パクってはいないんですけど、確かに寄せに行っています。

バーチャルシンガポールは点群ではなく、3次元の箱を立ててテクスチャを貼りながら街を作っていく方式です。3Dの街を作るというステップは一緒ですが、静岡県は点群、シンガポールはモデルということでアプローチが違う、といつも説明しています。

大きな違いは「電線」

動画にもありましたが、高圧線や電線が取得できているかどうかが大きな違いで、これは優位性だと思っています。

**将来、空飛ぶ車やドローン宅配を日本で実現しようとすると、電線や高圧線が邪魔になる。**最初からデータがあれば、それをプログラムで回避しながら安全に届けることができる。

**バーチャルシンガポールには電線のデータがありません。**本当にシンガポールに電線がないのかもしれませんが、日本ではそういう環境はすぐには訪れないので、点群で撮れているのは大きいと思っています。

PLATEAU とは喧嘩していません

そういう話をすると「国土交通省の PLATEAU は3Dモデルだよね、静岡県はついに国に喧嘩を売ったのか」という話になるわけですが——そうではありません。

PLATEAU も VIRTUAL SHIZUOKA も、本当の意味でオープンデータであるというところが非常に大きい。PLATEAU 担当の内山さんとは対談もしていて、いろいろ協力しながらやっています。

言い方は悪いですが、今までは「なんちゃってオープンデータ」のようなものが国の機関には多かった。本当にオープンなライセンスで PLATEAU が公開したことは非常に大きいと思っています。

一緒にやろうとしていること

点群データから3Dモデルを作る「Scan to BIM」 という方法が確立しつつあります。

PLATEAU では、詳細な LOD3 と箱モデルの LOD2 がありますが、**LOD2 と LOD3 の間にはものすごいコストがかかる。**LOD2 ですらモデルで作ろうとすると大変なので、VIRTUAL SHIZUOKA の点群データから自動的に LOD を作れるんじゃないか、ということを一緒にやろうとしています。

また PLATEAU は建物のデータですが、VIRTUAL SHIZUOKA では橋梁・道路・堤防といったインフラを3Dモデルで作り、そこに情報を付けていければと思っています。

なぜ作るのか ― 災害への備え

静岡県は45年以上前から東海地震説が言われていて、いつ地震が起こるか分からない県です。災害に備えてデータを取っておく・蓄積しておくというのが一番の理由です。

ドローンなどが進歩してからは、災害が起こった後にすぐデータを取る取り組みが熊本や北海道胆振東部でも行われてきました。しかし——災害が起こる前の点群データがあれば、3Dソフトウェアに入れるだけで崩れた土量が分かる。だから被災前のデータを取っておこうというのが目的です。

熱海市伊豆山の土石流災害

今年7月3日に発生しました。26名の方と、作業中に1名の方が亡くなられ、まだ行方不明の方が1名いらっしゃいます。被災された方の生活再建も含め、早期の発見を祈るばかりです。

動画の赤い建物が丸越酒店という酒屋さんです。崩れたのは10時30分頃。私は病院の待合室でテレビの速報テロップで知りました。いろんな情報を見ると、朝8時ごろから変状があったらしいです。

軽自動車が土石流に押し流されながら脱出を試みています。なんとか脱出できた直後に、第何波目か分からない土石流が襲ってきた。もう少し遅れていたら巻き込まれていたでしょう。

災害とデータの関係

阪神淡路大震災 ——電子地図がなかったところから GIS が普及
東日本大震災 ——GIS のサーバーごとなくなってしまった。だったら最初からデータをオープンにしておくべきだという議論が始まり、オープンデータが叫ばれた
今回の熱海 ——東日本から10年後、点群データの有用性がクローズアップされた

私の経歴を振り返っても GIS 担当、オープンデータ担当、点群データ担当。今までの教訓をいかに次に伝えていくかが自分の役割なのではないかと思って活動しています。

有志16人のサポートチーム

災害発生後、有志——いわゆる仲間、もう友達ですね——に協力を依頼して活動しました。

ミッションはデータを使って災害の発生状況を把握すること。そして一番大きなミッションは、腰まで土石流に浸かりながら現場で捜索活動をしていただいている自衛隊・消防・建設業の皆さんの安全確保です。

Facebook のメッセンジャー上でグループチャットを作って進めました。メンバーは産官学に分かれますが、もともと点群データが注目される前、5〜6年前から一緒に可能性を感じて共同研究や商品開発を進めてきた仲間です。本当に16人のみんなに感謝しています。

遠隔地の方も多かったので Zoom で情報共有しながら分析しました。これは発生から9時間後の Zoom 画面です。左下にいるのが副知事——国交省出身で、災害後すぐ熱海の土木事務所に入って情報収集にあたっていました。

発災当日に盛土を割り出す

赤いところからこういう経路で土石流が下っただろう、と分析しました。災害前のデータがあるので、天候が安定して発災後の点群が取れれば、2時期を比較して土量が把握できると共有しています。

地表面だけのデータにして、Twitter や報道の映像も見ながらどこが崩れてどういう経路をたどったかを特定していきます。

このあたりが崩れただろうと。ただこの時点ではまだ「盛土」だと分かっていたわけではありません。

当時 Twitter や報道で言われていたのが、すぐ隣にソーラーパネルの発電所があり、そこを開発したので水が流れて土石流を引き起こしたのではないかという説でした。**しかし我々の分析では「ここの水はこちらには来ないので、おそらく影響はない」**と議論していました。

10年前のデータとの比較

VIRTUAL SHIZUOKA のデータは1㎡あたり16点と綺麗な密度です。そして遡ること10年、2009年に国土交通省沼津河川国道事務所が取った1㎡あたり1〜4点のデータが静岡県に提供されていました。**完全なオープンではないので「非オープンデータ」**ですが、これと比較しました。

点の密度が違うとこんなに解像度が違う。この10年でレーザー計測の機械がものすごく進歩したことを示しています。

精度が違うものの比較にはなりますが、差分を取って、断面図を作ったものを熱海土木の現地にいる副知事にメールで送りました。発災当日から日が変わった0時5分です。

翌朝5時から夜明けとともに副知事が現地調査をすると言っていたので、**このメールを見て「おそらく盛土が崩れたのが原因ではないか」と分かった状態で現地調査に入れたのは非常に大きかった。**サポートチームの活動が役に立った一つだと思っています。

土量まで割り出す

翌朝9時ごろ、もう少し細かく土量まで把握しようということで図を出しました。報道機関にも「静岡県のオフィシャルデータ」として公開しています。

**赤くなっているところが、元の地形と比較して土が盛られている部分。**2009年のデータが青いライン、2019年の VIRTUAL SHIZUOKA が赤いライン。この差分を取ると5万4000立米だと分かります。

発災当日の夕方、天候が一瞬安定したタイミングがあり、静岡県と災害協定を結んでいる静岡県測量設計業協会に4K動画でデータを取ってもらいました。レーザーで飛ぶわけにはいかなかったので動画です。

まさにその最中も崩れてくるという予断を許さない状況で、現地に人が入ることなく安全にデータを取得できました。これも G空間情報センターからオープンデータとして公開しました。

オープンにしたら、みんなが解析してくれた

サポートチームのホロラボの藤原さんが、写真から点群を起こすフォトグラメトリの技術でデータを可視化してくれました。上に出ているのが VIRTUAL SHIZUOKA の点群、下がフォトグラメトリで作ったデータです。どれくらいの土砂が崩れていったか、水がまだ流れている痕跡も確認できました。

青山学院大学の古橋先生もすぐに情報を拡散し、防災科研の「防災クロスビュー」にデータを取り込んでいただきました。オープンデータ化することで多くの方がいろんな解析をしてくれています。

天候が安定した後はドローンにレーザースキャナを積んで取得し、1㎡あたり120点という高密度なデータが取れました。これもすぐオープンデータとして公開しています。

分析で分かったこと

崩壊部の断面を切ると——2009年のデータよりもさらに古い時点で、下からえぐれていることが分かりました。過去の航空写真を見るとおそらくそこもすでに盛土だった。概ね盛土が崩壊しているのが今回の災害の原因ではないかと分析しています。

途中に色が濃くなっていたところは砂防堰堤でした。この堰堤は上流に盛土されることを想定して作られていないので、設計上は4200立米貯められれば十分だったはずです。予想を超えた盛土で全然足りなかったのですが、実際に計測すると7500立米の土砂を貯めてくれていた。

ここで3000立米ほど貯めてくれなかったら、下流の新幹線や JR が飛ばされていた可能性も大きいと思っています。

赤色立体地図（ブラタモリにもよく出てきますね）で過去のデータを比較すると——2009年の1点、VIRTUAL SHIZUOKA の16点、ドローンの120点。ドローンレーザーではものすごく細かな地形が取れています。

災害後にデータを取る機動力としてドローンレーザーは非常に重要。同時に、災害が起こる前のデータの重要性も改めて感じました。

二次災害を防ぐ

差分図を分析していくと、まだ盛土されていて崩れていないところがあることも分かりました。

**A領域だけで9400立米、両方足すと約2万立米が残っている。**仮に砂防堰堤にまだ余裕があれば多少は食い止められますが、もう余裕はない。

A領域はもともとの地形からずれてしまっていて、次の雨で崩れると、腰まで浸かって作業している方々をまた巻き込んでしまう可能性がある。

そこで伸縮計——動きがあったらすぐ知らせる機器——を設置し、もともとの地形と盛土の境目にも同じ計測機器や監視カメラをつけて、何かあったらすぐ作業をやめられる監視計画を作って活動してきました。

不幸中の幸いと言えると思いますが、A領域・B領域が崩れたことによる二次災害は今日まで発生していません。データを可視化して分析したことが非常に役に立ったのではないかと思います。

公表していない分析も

水がどこから来たかもチームで分析しています。表面の水だけで地下水は分かりませんが、点群から作った地形モデルに水を落としてどう流れるかシミュレーションしました。

議論になっていたソーラーパネルに降った雨は、崩れたところには全然入ってこない。だからソーラーパネルではないということが早期に分かっていました。

被災家屋の把握も——点群データから建物の輪郭を把握して地形データを作っておき、その後空中写真と重ね合わせることで可視化できるのではないか、と。輪郭だけになったところが被災家屋だと後から数えられます。

実際の現場では、紙の地図を持って県職員が現地を見ながら「ここは被災していた」と人海戦術でやっていました。もう少し我々にできることがあったのではないかと思っています。

副知事のコメント

記者会見でこう言ってくれました。

データをオープンにしていたので外部の方々が本当にサポートしてくれた。日本中からいろんな方が解析して結果を教えてくれた。オープンデータがここまで威力を発揮するとは思わなかった。時代が変わったことを実感している。

全国でオープンデータの活動をしている職員にとって非常に心強いコメントです。日々接していて、本心から出た言葉なのではないかと思っています。

災害対応以外の活用

津波の疑似体験

ハザードマップは重要な情報ですが、浸水の深さが浅いエリアの方にいかに早く避難していただくかが行政としては大事です。

点群データを使い、VR で地元の方に入っていただいて、家の前で津波を体験していただく説明会を行っています。

地震発生後約20分で第1波が来る。ここは1〜2mの津波が来るエリアです。**ハザードマップは「第1波が一番遠くまで行く」前提なので、そのエリアと最深部しか表現しにくい。でも津波は第2波・第3波も来る。**早めに避難行動に移せるかどうかが助かる命を左右します。

アンケートでは、1mとはいえちゃんと早めに避難しようという避難行動の変化が見られました。これを静岡県全域に広げていきたいと思っています。

デジタルアーカイブ

ノートルダム大聖堂の火災は記憶に新しいですが、あそこも点群が取得されていました。外だけでなく建物内部も取得されていたので、そこから図面を起こして元通り復元できるのではないかと言われています。

地域の記憶を点群で残す活動も日本で始まっています。私が知る限り一番古いのは旧都城市民会館をクラウドファンディングで点群取得したもの。あっという間に目標額を達成したと記憶しています。このメンバーも我々のサポートチームに加わっています。

静岡県でも——静岡市清水区の戦没者忠霊塔。数寄屋建築の大家で文化勲章を受章した吉田五十八さんがデザインした、コンクリート打ちっぱなしのダイナミックな建物です。階段の両側のコンクリートが上でクロスしている、ものすごくイケてるデザインでした。

ただ構築後60年以上が経ち、津波の避難場所に指定されているため、崩れたら危ない。管理者の静岡市と地元で何年も議論を重ね、このスレンダーな形のままでは残せない（耐震補強すると支えが必要になる）ということで取り壊すことになりました。

壊す前に点群で取得しておきましょうと呼びかけ、静岡市職員の研修も兼ねてドローンとレーザースキャナでデータを取りました。建物はもう壊されてしまいましたが、現地で VR や AR で「昔ここにこういう忠霊塔がありました」という表現ができるのではないかと思っています。

コミュニティでの取得

Code for Kakegawa でもデータを取っています。掛川城はドローンで上から、中もレーザースキャナで取得。「現地に来てください」と言いにくいので、バーチャルツアーを楽しんでくださいというアプローチもあるよね、と議論していました。

伊豆の竜宮窟——世界ジオパークに認定されているエリアで、上が空いているダイナミックな地形です。上から降りてくるような、普段体験できないバーチャルツアーもできるのではないかと。

自動運転

点群データから自動運転用の地図（ダイナミックマップ）を作れるのではないかという仮説で取り組んでいます。

MMS は1台で約2億円する車です。道路を走りながらデータを取り、写真と位置情報を紐付けて点に色をつけます。

静岡県の点群はオープンデータなので、ダイナミックマップも安く作れる。自動運転を望んでいる過疎地域にも早く技術が来るのではないかと期待して実証実験もしています。

**別に自動運転の車を走らせたいわけではありません。**EV 化・自動運転化が進むと MaaS やプラットフォームの領域が増え、そこを誰が取るのかという競争になっている。日本でもトヨタとソフトバンクが MONET を作るなど熾烈です。

この領域を考えようとすると、「今の道路や街が MaaS や自動運転に最適なのか」「もう一度街をデザインすべきではないか」という議論に戻ってくる。

自動運転や空飛ぶモビリティが実現した街のパースはよく描かれますが、日本ではいきなりそんな街を作れない。それをバーチャル空間の中でやれたらいいと思っています。

トヨタが静岡県裾野市で作ろうとしている Woven City は、自社工場の中なので好きなことができる。このエリアも VIRTUAL SHIZUOKA でデータが取れていて、トヨタの方もデータのありかを知っているので、いろんな計画に使っていただけると嬉しいです。

現実空間でやりにくいシミュレーションをバーチャルの中でやって、結果を現実空間にフィードバックする——デジタルツインが非常に大事だと思っています。

オープンにしたら、いろんな人が使ってくれた

水中データ

水が綺麗で透明度が高ければ水深15mほどまで取れています。

このエリア、水中部分を入れると非常に綺麗で——線が見えると思います。これは伊東の大室山が噴火した時に相模湾に溶岩が流れ込んだ跡なんです。溶岩が冷えて固まる時にフランスパンのクープのように割れるらしく、**それが水中にもあるだろうと言われていたのが、初めてデータではっきり見えた。**現地に見に行っても海藻があってよく分からないので、これからもっといろんな発見があるのではないかと期待されています。

水中データは引き合いがあって、熱海の初島では釣りのサービスに使われています。海底地形が分かれば深みに魚がいるはずだからルアーを投げよう、と。「こんな魚が釣れました」と分かり、それを見た方が実際に初島に行っているというツイートもありました。静岡県のオープンデータから初島への観光客を呼び込んだことにもなります。

ゲームエンジン

Minecraft の中に点群で街を作る——Code for Kakegawa のメンバーが掛川城などを作ってくれました。Python で読み込んで変換し、点群の色をブロックの近似色と自動マッチングさせ、高さもバランスよく作るというプログラミングをしてくれています。

プログラミング教育にも使えますし、先ほどの津波避難訓練は「リアルすぎて怖い」という意見もあるので、マイクラの中でお子さんとお年寄りが一緒に避難訓練をすることもできるのではないかと期待しています。

Unity や Unreal Engine に取り込んだという方もいます。河川の計画で Unreal Engine と Cesium を使って川づくりをゲームエンジンでやったという取り組みも始まりました。

**ゲームエンジンを使うとリアルな街ができます。**ブロックも木も、ほぼ全部ゲームエンジンの中で作られている。これくらいリアルに作れるなら、将来の街を作ってみんなで体験して「ベンチはもう少し向こうがいい」「水たまりはこっちまで欲しい」というまちづくりがバーチャルの中でできるのではないかと思っています。

スペインからのメール

パブロさんという方から「面白いデータの公開ありがとう」と連絡が来ました。

MMS のデータをレーシングゲームに入れてみました、と。車がスープラなのは日本に気を使ってくれたのか分かりませんが。

これも全部点群です。MMS なので1㎡あたり400点あり、路面の状況も再現できるので車が少し揺れる——路面の凹凸を拾っているそうです。CG で作るのと比べて短時間でよりリアルなゲームが作れそうだということで、「もっと面白いデータがあれば教えてくれ」と言ってくれています。

最後に

静岡県としては、3次元点群データにはいろんな市場・経済効果があり、それ以上に社会的な意義があると思っています。

今日は災害や自動運転を中心にお話ししましたが、聞いてくださっている皆さんはデータ可視化のプロの方が多いと思うので、ぜひ点群データにも興味を持っていただいて、「面白い使い方があったよ」「こんなの作ってみたけどどう?」ということがあればご一報いただけると嬉しいです。

本日はありがとうございました。

清水正行／汎用的な可視化ツールとしての deck.gl

Wed, 29 Dec 2021 00:00:00 +0000

Data Visualization Japan Meetup 2021（2021年12月29・30日開催）における、清水正行さんの講演です。deck.gl の概要と、地図以外の可視化への応用を紹介します。

「汎用的な可視化ツールとしての deck.gl」の講演を始めさせていただきます。

deck.gl は地図ライブラリとして認識されていることが多いのですが、地図以外でも使えるんだぞというところをお伝えできたらと思っています。

自己紹介

清水と申します。群馬県高崎市に住んでいて、現在はフリーランスのデータビジュアライゼーション、Web GIS（Web 地図）のエンジニアとして働いています。

主な仕事は日経ビジュアルデータです。もともとフリーランスになる前は日経新聞の社員としてコンテンツ制作に関わっていました。現在も継続して携わらせていただいています。

直近の仕事

10月末の衆院選のコンテンツを作成しました。各市区町村の得票率を見られる地図コンテンツで、政党ごとの得票率や、2017年と2021年でどう変化したかを見られます。

一番反響が多かったのは、日本維新の会が大阪で2017年から2021年にかけて大きく得票率を上げているという点で、SNS でよく取り上げてもらいました。

**実はこのコンテンツは deck.gl では作っていません。**Mapbox GL を使っています。IE に対応する必要があったのですが、deck.gl はひと世代前のバージョンで IE を切ってしまっているので使えませんでした。

もう一つ、実際に deck.gl で作ったものが日本全体の地価を可視化したコンテンツです。2Dと3Dを切り替えられて、リーマンショックのあった2008年と2021年を比較すると、都市部は地価が戻っているのに対して地方はまだ下がったままだと分かります。

**こちらは IE に対応するために deck.gl のバージョンをダウングレードして作りました。**ダウングレードすれば IE にも対応できるのですが、他にいろいろ問題が出るのであまりおすすめしないやり方です。

ブログと Advent Calendar

「群馬GISギーク」というブログをやっています。最近はほとんど deck.gl に関する記事ですが、一時期は D3.js の使い方の記事を書いていました。

今月は deck.gl の Advent Calendar を主催しています。ほとんど私一人で書いているのですが……サンプルコード付きの解説なので、今日の講演ではコードの説明はほとんどしないので、コードに興味がある方はそちらを見ていただけるとありがたいです。

deck.gl とは

WebGL を使った地図ライブラリです。もともと Uber 社がオープンソースとして公開しているデータビジュアライゼーションのフレームワークの一つで、JavaScript でフロントエンドの地図描画やコンテンツ制作に使えます。

vis.gl ファミリー

deck.gl を含む Uber 社公開のデータ可視化ツール群が vis.gl です。

deck.gl ——地図コンテンツを作るライブラリ
luma.gl ——3Dモデルを描画するライブラリ。deck.gl はこれをベースに開発されている
react-map-gl ——Mapbox GL を React で使えるようにラップしたもの
react-vis ——React でチャートを表示するコンポーネント
math.gl ——ベクトルや行列の操作を行う数値演算モジュール
nebula.gl ——deck.gl 上に GeoJSON を編集する機能を追加するコンポーネント
loaders.gl ——CSV や JSON など様々なデータセットを読み込んで使いやすい形に変換

Uber の手を離れた

deck.gl は現在、アーバンコンピューティング財団に移管されており、**Uber 社の手を離れています。**バージョン 8.2 からオープンガバナンスという形で移管されました。

「Uber 社に対していろいろ思うところがある」という方も安心して使えるようになっています。

Google との連携強化

2020年から今年にかけて、Google Earth のチームが deck.gl の開発に参加するケースが多く、Google Maps Platform との連携が大幅に強化されました。deck.gl 8.6 からです。

公式サイトのサンプルを見ると——ビルのポリゴンはすべて Google マップがレンダリングしているもので、走っているトラックは deck.gl がレンダリングしている3Dモデルです。

建物の裏側にトラックが入っていくと、きちんと影に隠れる。つまり単に deck.gl の描画を Google マップにオーバーレイしているのではなく、3D空間として統合されていてオクルージョン処理が行われている。

Google マップ側のエンジニアのブログによるとかなり難しい処理だったらしく、「頑張った」と書かれていました。

このように deck.gl は単体でも使えますが、Google マップ、ArcGIS、CARTO、Mapbox などと組み合わせて使える汎用的な地図ライブラリになっています。

派生ライブラリ

pydeck

py という文字が頭についていることから分かるように、Python で deck.gl を使うためのライブラリです。Jupyter Notebook と組み合わせて使えるよう最適化されていて、Google Colaboratory でも使えます。

CSV データを読み込んで deck.gl のビューとして表示するサンプルを公開しているので、興味がある方は使ってみてください。

deck.gl-native

まだ実験的なプロジェクトで完全に使えるものではないのですが、Google Earth のチームと、deck.gl の元々の開発者（現在は CTO になられている方） が一緒に作っています。

deck.gl を C++ で再実装するというもので、これができるとスマートフォンや様々なデバイスでネイティブアプリとして利用できるようになります。フロントエンドでも WebAssembly という形で活用できるので、いろんなプラットフォームで deck.gl が使えるぞ、と。

GitHub で公開されていてダウンロードして Xcode に読み込んで使うこともできるのですが、2020年9月以降あまり情報の公開がないので、このまま進むのかは分かりません。個人的に応援しているプロジェクトなので紹介させていただきました。

特徴① 巨大なデータの可視化

deck.gl 最大の特徴は、巨大なデータの可視化が行えることです。

公式サイトのサンプルでは85万8400件のポイントデータを一度に描画しています。近づいていくと点一つ一つがすべて描画されているのが分かります。

WebGL を使っていない地図ライブラリだと数が多すぎて動かなくなってしまうところ、deck.gl はサクサク動きます。

実測してみた

ランダムなポイントを配置してどれだけ表示できるか試してみました。

点数	結果
1万	完全にサクサク
10万	全然問題なし
50万	全体表示すると追従が少し遅れる
100万	かなり重い。ただしズームして表示点数が減れば問題なし
500万	マウス操作がかなり遅れて反映される。ズームすれば表示可能
1000万	ブラウザのタブが完全に落ちて表示できず

テストに使ったのはゲーミングノートPCで、一般的なノートPCより高いスペックです。それで上限は500万ポイントくらい。

閲覧する側のスペックに依存するところはありますが、かなり多くのデータを一度に可視化できるライブラリです。

特徴② 多彩なレイヤー

レイヤーは deck.gl の中核をなす機能です。データを取得して、そのデータをレイヤー上で色やポリゴンに関連付けてレンダリングします。

ポイントデータを集約してヒートマップ風に表示するレイヤー
GeoJSON のラインデータ——大量のラインを一度に表示してもサクサク動く
ヘキサゴンレイヤー——ポイントを集約して六角形の範囲内に何点あるかを表示。3D表現も可能
影をつけたレンダリング——単に3Dになっているだけでなく、3Dポリゴンの影が表示される

他にも非常に多くのレイヤーが用意されています。

そしてこのレイヤーは deck.gl 単体で使うだけでなく、Google マップ、Mapbox GL、ArcGIS の JavaScript ライブラリなど、他の地図ライブラリの中にレイヤーだけを差し込んで使うこともできます。

本題 ― deck.gl は地図だけのものではない

deck.gl が優れた地図ライブラリであることはお伝えできたかと思いますが、必ずしも地図だけを表示するためのライブラリではありません。

公式サイトのトップの説明文はこうです。

deck.gl は大規模なデータセットを視覚的・探索的に分析するための、WebGL を用いたフレームワークです。

どこにも「地図」とは書かれておらず、「大量データの可視化に活用できる」ことが強調されています。

2D表現① ネットワーク図

D3.js で力学グラフを計算して、deck.gl で表示したものです。ノードの座標を計算しているのは D3.js。ノードとノードをつなぐラインを計算しているのも D3.js。deck.gl は最終的なレンダリング部分だけを行っています。

D3 で描画すると SVG で表示することが多いと思いますが、キャンバス要素の中にまとめて WebGL として表示されています。

もう一つ、はてなブックマークで話題になっていた「Spotify のデータによる地下アイドルのネットワーク分析」 の記事でデータが公開されていたので、それを使って描画してみました。かなり大量のラインがありますが、deck.gl なら描画できます。地図でよく使うパン・ズームの機能も簡単に実装できます。

コード量は、分割されてはいますが全体で100行程度でこういったネットワークが描画できます。

2D表現② バブルチャート

公式サンプルですが、こちらも D3.js と deck.gl の組み合わせです。pack と呼ばれるレイアウトでバブルを配置しています。

バブルの大きさや配置位置の計算は D3 が行い、XY座標として返してきたものを deck.gl が WebGL としてレンダリングする仕組みです。小さなところまでズームできるのは deck.gl で作ると簡単にコントローラーを設定できるからです。

2D表現③ 大量のチャート

これも公式サンプルで、deck.gl と D3 でかなり大量のチャートを作っています。寄っていくと一つ一つのラインが見えます。座標計算はすべて D3 が行い、最終的な WebGL 出力を deck.gl が担う。

ソースコードが GitHub で公開されていますが、200行程度でこういった複雑な描画ができるようになっています。

3D表現① 点群（ポイントクラウド）

昨日、静岡県さんの講演でも点群の話があったかと思いますが、deck.gl でも表示できます。

最近iPhone の LiDAR センサーで点群をスキャンできるアプリにハマっていまして——これは私が住んでいる高崎市柳川町の裏通り、ちょっと昭和っぽい雰囲気を残した通りをスキャンしたものです。

FirstPersonView を使っているので、まっすぐ歩いていくような表現ができます。ところどころスキャンしきれなかった箇所もありますが、**手元の点群をサクッと Web に載せたい時、deck.gl を使うと簡単に表現できます。**このドアの感じとかが個人的にお気に入りだったりします。

3D表現② ポストエフェクト

先ほどの点群に PostEffects をかけたものです。

deck.gl は WebGL のシェーダーに非常にアクセスしやすいように作られているので、シェーダーの機能を使うと表現を変更できます。これはポスタリゼーションっぽいフィルターをかけて、さらに周辺を暗くするシェーダーを追加しています。

シェーダーをバリバリ書くぞという方は、deck.gl を使うとこういったエフェクトを地図や3Dモデルに簡単に適用できます。

3D表現③ 3Dモデル

glTF の3Dモデルを表示したものです。これもiPhone でスキャンした、群馬県庁前にあるぐんまちゃんの像です。

**3Dビューアのようなものも非常に簡単に作れます。**glTF 以外では OBJ 形式が表示できますが、FBX は読み込みが難しくできないので、glTF に変換していただくとビューが作れます。

もちろん地図上に3Dモデルを表示することもできます。点群も地図上に表示できるので、点群を使った地図表現も作ってみたいと思っています。

3D表現④ ライフゲーム

deck.gl でライフゲームを作ってみました。セルオートマトンは山火事のシミュレーションなどに使われるので、地図と組み合わせて活用できないかと思って作ったものです。

2000×2000のグリッドを計算させて表示しています。量が多くなると処理は重くなりますが、deck.gl を使えばこのくらいの大きさは表現できます。

3D表現⑤ 360度動画

360度見回せる動画を deck.gl で表示することもできます。

FirstPersonView を使って球体を作り、その内側にテクスチャーとして動画を貼り付けるという形で作られています。

※ このイラストはダウンロード元が思い出せず著作権表示ができていないので、後で差し替えるつもりです。

まとめ

deck.gl は地図だけでなく、2Dのビジュアライゼーション、3Dモデル、点群データなどを可視化するツールとして使えます。

最近では PLATEAU や静岡県の点群データなど、単純な表データにとどまらないオープンデータが公開されることが増えてきました。

PLATEAU の3Dモデルを deck.gl でいろいろ試した記事も書いています。3Dモデルを読み込んで高さを測れる機能をつけたものなどを作ってみました。3Dタイルを読み込んで PLATEAU の3Dモデルを地図で表現する、といったこともやっています。

静岡県が公開している点群も、ダウンロードして loaders.gl に読み込ませてサクッと表示できました。

PLATEAU や点群のデータは、フロントエンドのエンジニアには馴染みのないデータかもしれません。そういうものをフロントエンドで扱ってコンテンツを作りたい時、deck.gl を使うと割と作業が進むのではないかと思います。

deck.gl の始め方

deck.gl は単純な JavaScript ライブラリとしても使えますが、基本的には React と組み合わせて使うことが多いライブラリです。

React の開発環境構築が負担だというお話をよく聞くので、テンプレートをいくつか作っています。

CodeSandbox で新しいコードを書く際にテンプレート検索で私のアカウント名を入力していただくと、React 版と Pure JS 版の2つのテンプレートが出てきます。日本地図が表示され、GeoJSON を読み込んで都道府県ごとの値を表示するサンプルになっているので、これをベースにレイヤーを追加していくと理解しやすいかと思います。

ZIP ファイルとしてダウンロードもできるのでローカル開発も可能です。私のアカウントには他にも deck.gl のサンプルをいろいろ載せているので、ダウンロードしたりフォークして書き換えたりしていただけます。

もう一つ、create-react-app を使っている方向けに deck.gl のテンプレートも作っています。npm でインストールして、プロジェクト作成時にテンプレートオプションを付けるとテンプレートが生成され、deck.gl の開発がサクッと始められます。

以上で deck.gl の紹介を終わらせていただきます。ありがとうございました。

点群 on Data Visualization Japan

杉本 直也／静岡県が目指す「VIRTUAL SHIZUOKA構想」とは？

自己紹介

皆さん、どんなポイント貯めてますか

なぜ航空写真ではなく点群なのか

3つの取得方法

取得計画

「バーチャルシンガポールのパクリですよね」

大きな違いは「電線」

PLATEAU とは喧嘩していません

一緒にやろうとしていること

なぜ作るのか ― 災害への備え

熱海市伊豆山の土石流災害

災害とデータの関係

有志16人のサポートチーム

発災当日に盛土を割り出す

10年前のデータとの比較

土量まで割り出す

オープンにしたら、みんなが解析してくれた

分析で分かったこと

二次災害を防ぐ

公表していない分析も

副知事のコメント

災害対応以外の活用

津波の疑似体験

デジタルアーカイブ

コミュニティでの取得

自動運転

オープンにしたら、いろんな人が使ってくれた

水中データ

ゲームエンジン

スペインからのメール

最後に

清水 正行／汎用的な可視化ツールとしての deck.gl

自己紹介

直近の仕事

ブログと Advent Calendar

deck.gl とは

vis.gl ファミリー

Uber の手を離れた

Google との連携強化

派生ライブラリ

pydeck

deck.gl-native

特徴① 巨大なデータの可視化

実測してみた

特徴② 多彩なレイヤー

本題 ― deck.gl は地図だけのものではない

2D表現① ネットワーク図

2D表現② バブルチャート

2D表現③ 大量のチャート

3D表現① 点群（ポイントクラウド）

3D表現② ポストエフェクト

3D表現③ 3Dモデル

3D表現④ ライフゲーム

3D表現⑤ 360度動画

まとめ

deck.gl の始め方

杉本直也／静岡県が目指す「VIRTUAL SHIZUOKA構想」とは？

清水正行／汎用的な可視化ツールとしての deck.gl