deckgl v7.1の新機能「チルトシフト・エフェクト」を使ってイケてる3Dマップを作成する

最終更新日

DEMO

可視化としての意味は無いが、浪漫が有る。

概要

deck.glで描画した地図にチルトシフト効果を付加します。
地図の周辺にぼかしを入れることで、3Dのオブジェクトをミニチュアのように演出します。

サンプルコード

解説

deck.gl v7.1で追加された「Post-processing Effects」機能を使って地図にチルトシフト効果を付加します。
この機能を使うためにはdeck.gl以外にluma.glモジュールをロードする必要があります。

luma.gl/effectsの中にチルトシフト用のテンプレ(シェーダーオブジェクト)が用意されているので、PostProcessEffectを使ってエフェクトの初期設定を行います。
生成したエフェクトオブジェクトをdeck.glのeffectsプロパティに渡してあげれば、簡単に地図にエフェクトを付加することができます。

エフェクトのパラメーターについてはリンク先を参照してください。

PostProcessEffect