deck.glで地図上に動画を表示する

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

概要

deck.glには地図上に画像をひょうじするBitmapLayerが存在しますが、ときにはLeafletのサンプルにあるように動画を地図上に描画したい場合があります。ちょっとした工夫で動画を表示することができるので、その方法を説明します。

なお、動画を表示するにはexperimental(実験的)となっているレイヤーのアニメーションレンダリング機能を使用する必要があるのですが、今のことスマートフォン(特にiOS)には非対応のようです。

サンプルコード

解説

動画ファイルをvideo要素に読み込み、SimpleMeshLayerを用いて生成した平面ジオメトリにテクスチャーとして描画します。

再生している動画を連続的にレンダリングするために、Deckコンポーネントの_animateプロパティを有効化してます。

_animateプロパティを有効にすると、deck.glはアニメーションフレームごとにレイヤーの再描画を行うようになります。