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 の公式ドキュメントにも、シェーダーの書き方を説明したページがあります
そういったものを参考にすると、シェーダーを使ったカスタマイズがいろいろ作れるのではないかと思います。
以上です。