deck.glでポイントを光らせる

この記事はdeck.gl Advent Calendar 2021 参加記事です。

概要

WebGLのブレンドモードを変更して、重なり合ったカラーが加算されるように設定することで密度の高い(重なり合いが多い)地域ほど光って見えるような演出を加えることができます。

サンプルコード

解説

レイヤーのparametersプロパティを使うと、各フレームがレンダリングされる前にluma.glのsetParameters関数を通してWebGLコンテキストのパラメーターをリセットすることができます。
サンプルでは、ブレンドモードを変更して、カラーが加算されるようにリセットしています。

WebGLの組み込み定数をするために@luma.gl/constantsをインストールします。

parametersプロパティを使ってScatterplotLayerのブレンドモードを変更します。