清水正行 on Data Visualization Japan

LT：清水正行／シェーダーを使ったWeb地図のカスタマイズ

Fri, 29 Dec 2023 00:00:00 +0000

Data Visualization Japan Meetup 2023（2023年12月29・30日開催）における、清水正行さんのLTです。3Dプログラミングで使われる「シェーダー（shader）」という技術を使って、Web地図をカスタマイズする例を紹介します。

スライド

「シェーダーを使ったWeb地図のカスタマイズ」というタイトルになります。

自己紹介

清水正行と言います。群馬県高崎市に住んでいて、2015年から2020年までは日経に在籍していました。現在はフリーランスで、データビジュアライゼーションや Web技術のエンジニアをやっています。

こんな感じで地図を使ったコンテンツを作ったりしています。地図の比較ができるようなツールなども制作しました。

ほかにブログもやっています。最近あまり更新できていないのですが、地図などに関するサンプルコードや解説記事を載せています。

シェーダーとは

さて、今回の本題です。

シェーダーとは、3次元コンピューターグラフィックスにおいてシェーディング（影をつける作業）をするコンピュータープログラムのことです。スケッチで質感をつけることを「シェーディング」と言いますが、これを 3DCG で行うための仕組みがシェーダーと呼ばれています。

シェーダーは専用の言語を使って書く必要があります。WebGL（フロントエンド）で使う場合は GLSL という言語が用いられます。GLSL は C言語に似た書式で書くもので、一般的な JavaScript とは別の言語です。

なぜ地図でシェーダーなのか

実は、最近のモダンな地図ライブラリは、地図を描画する際にほとんど WebGL という技術を用いています。

そして地図ライブラリの中には、開発者がシェーダーを使って独自にカスタマイズできる API を提供しているものがあります。今回はその中でも、シェーダーを使ったカスタマイズがしやすい deck.gl を使った例を紹介します。

deck.gl とは

Uber 社がオープンソースとして公開していたデータビジュアライゼーションのフレームワークです。現在は Linux Foundation 傘下の組織に移管されて管理されており、WebGL を用いて大規模なデータセットの視覚化が行えるライブラリになっています。

シェーダーを使うと、画面全体にエフェクトをかけたり、レイヤーごとにエフェクトをかけたりすることができます。

① 画面全体にシェーダーを適用する（ポストエフェクト）

まず、画面全体にシェーダーを適用する例です。

チルトシフト — 画面の上と下をぼかすことで、ミニチュアっぽい見え方にする処理です。このエフェクトは「ポストエフェクト」という機能でシェーダーを使ってかけています。

レトロなテレビ風 — 先月やった「30 Day Map Challenge」の時にも作ったものですが、Google の 3D フォトリアルタイルを使い、エフェクトをかけて古いテレビ風に見せています。

実装手順はいくつかステップがありますが、時間の都合で簡単に説明します。サンプルコードを載せていますので、関心がある方はご覧いただければと思います。GLSL を書いている部分は、JavaScript のテキストとしてコードを書くという形になります。

② レイヤーごとにシェーダーを適用する

次に、レイヤーごとにシェーダーを適用する例です。

ポリゴンのサーフェスにシェーダーでアニメーションをつける、といったことができます。

さらに、deck.gl には ArcLayer や LineLayer といったラインを表示するレイヤーがありますが、それらには「線が伸びていく」ようなアニメーションを作る機能がありません。ですがシェーダーを使えば、こうしたアニメーションを独自に実装できます。

応用例として、ArcLayer をアニメーションさせて世界各国の空港の行き来を表示するものも作りました。これもシェーダーでアニメーションさせて表示させています。

レイヤーのエクステンションの使い方についても、スライドを公開しますのでそちらをご覧ください。サンプルコードも載せています。ポストエフェクトとレイヤーエフェクトでは書き方が少し違うのですが、その理由の細かい説明は割愛します。

どうやって学ぶか

GLSL については、YouTube で講義を行っている方がいるので、それを参考にするのがいいと思います。Udemy などにもシェーダーの書き方のコースがあります
deck.gl の公式ドキュメントにも、シェーダーの書き方を説明したページがあります

そういったものを参考にすると、シェーダーを使ったカスタマイズがいろいろ作れるのではないかと思います。

以上です。

清水正行／汎用的な可視化ツールとしての 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

LT：清水 正行／シェーダーを使ったWeb地図のカスタマイズ

自己紹介

シェーダーとは

なぜ地図でシェーダーなのか

deck.gl とは

① 画面全体にシェーダーを適用する（ポストエフェクト）

② レイヤーごとにシェーダーを適用する

どうやって学ぶか

清水 正行／汎用的な可視化ツールとしての 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 の始め方

LT：清水正行／シェーダーを使ったWeb地図のカスタマイズ

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