焼失した首里城のデジタル復元を地図上に3Dで可視化する
1. 概要
2019年10月31日未明に首里城で火災が発生し、正殿と北殿、南殿が全焼した他、多くの建物が焼失しました。現時点で火元は正殿1階の北東部分とほぼ特定されているようです。
この悲しい火災の直後、コンピュータ・ビジョンの研究者らがOUR Shurijo: みんなの首里城デジタル復元プロジェクトというプロジェクトを立ち上げました。収集した首里城の画像から3Dモデルを復元することを目指しているようです。
コンピュータ・ビジョンという分野の中に、Structure from Motion（SfM）という技術があります。これは、異なる視点からの写真やビデオを使って三次元形状を復元する技術です。私たちの復元もこの技術を利用しています。
"OUR Shurijo: みんなの首里城デジタル復元プロジェクト" より引用
このプロジェクトの途中経過として3Dモデルが公開（CC Attribution）されていたので、復元された首里城の3Dモデルを地図上に配置して可視化するWebサイトを作成してみました。この記事では、その内容と作成過程を紹介します。
作成したWebサイトは以下で公開しています（ややデータ量が多いのでご注意ください。スマホだと3Dモデルが真っ黒になったりスクロールが効かなくなる現象が確認されているので、PCでの閲覧を推奨します）。 sw1227.github.io
2. 内容の紹介
今回作成した可視化ページは、地図上に配置された首里城の3次元モデルを背景に常に表示しています。スクロールするにつれて左側の説明文がスライドし、その内容に応じて3Dモデルへの視点が移動します。
3. 作成方法
興味のある方のみご覧ください。
3.1. 3Dモデル
3.1.1. 首里城の三次元モデルを取得
デジタル復元された首里城の3Dモデルは以下のリンクにてCC Attributionライセンスで公開されています。
Shuri Castle / Shurijō, Naha - Okinawa .WIP - Download Free 3D model by Raiz (@RaizVR) - Sketchfab
このモデルは現時点での途中経過として公開したもののようです。復元のための画像は現在も募集し続けているため、将来的にはより良いモデルに更新する予定とのことです。
ダウンロードするフォーマットを選べるので、Autoconverted format (glTF)を選択します。glTF (GL Transmission Format) は「3DにおけるJPEG」とも呼ばれるフォーマットで、Google, Apple, intelなどの参加するKhronos Groupによって開発が進められています。
3.1.1. ファイルサイズの圧縮
ダウンロードしてきたファイルを見ると、scene.gltfというファイルは11KB程度で済んでいるものの、2つのテクスチャ画像が合計で36MB程度を占めてしまっています。
そこで、今回はSquooshでテクスチャを圧縮します。必要な品質次第ですが、合計で3.1MBまで圧縮することができました。
3.1.2. GLTFファイルの修正
glTFファイルの中身はJSONなので、圧縮後のテクスチャのファイル名を変えた場合は手動で参照先を修正することも可能です。
エディタとしてVisual Studio Codeを使用していれば、下記の拡張機能を入れることでプレビューすることもできてしまいます。 glTF Tools - Visual Studio Marketplace
また、この拡張機能のコマンドで「glTF: Export To GLB (Binary file)」を実行すると、glTFのバイナリ形式である.glbファイルをエクスポートすることが可能です。このファイルにはテクスチャの情報も含まれているため、以下ではこの.glbファイル1つを用いて可視化を行います。
下記のようなツールを用いてコマンドラインで変換することももちろん可能です。 GitHub - AnalyticalGraphicsInc/gltf-pipeline: Content pipeline tools for optimizing glTF assets.
3.2. 地図を利用したStorytelling
可視化のテンプレートとして、MapBoxが今月公開したStorytelling Templateを利用します。 GitHub - mapbox/storytelling: Storytelling with maps template
これを利用すれば、説明文のスクロールに応じて背景の地図が動いていくようなページを簡単に作成することができます。 純粋なJavaScriptのバージョンとReactを用いるバージョンが提供されているので、今回はReactバージョンを選択しました。
3.3. 地図上に3Dモデルを配置
3.3.1. Deck.gl
地図上に3Dモデルを配置するには、Uberが公開しているDeck.glを使用します。
Deck.glではMapBoxの地図の上にレイヤーを重ねることができ、glTFファイルを表示するためのレイヤーとしてScenegraph Layerが用意されています。
deck.gl/scenegraph-layer.md at master · uber/deck.gl · GitHub
3.3.2. 配置と視点の指定方法
Deck.glで3Dモデルを配置する際は、モデル原点の緯度経度や姿勢角度・スケールなどを指定し、実物と同じように配置します。 座標系やスケールに関する具体的な記述が3Dモデルのページに見当たらなかったので、航空写真と照らし合わせながら手動で微調整することになりました😇
モデルの配置とは別に、それをどこからどのような角度で見るかという視点情報も指定する必要があります。これに関しては、実際に地図を使って動かしながら座標を閲覧できるMapbox Location HelperがMapBoxから提供されているため、それを利用すれば簡単です。
3.3.3. Storytelling Templateの修正
先述のStorytelling Templateは非エンジニア向けに簡略化している部分があるので、Deck.glを利用する想定にはなっていません。Reactのコードを書き換えることで対応しました。
特に注意が必要なのがスクロール時の視点移動です。下記のFlyToInterpolatorを使用するような修正が必要です。
deck.gl/view-state-transitions.md at master · uber/deck.gl · GitHub
3.3.4. 環境の設定
これで3Dモデルを地図上に表示できる...と思いきや、このままでは首里城が黒っぽく表示されてしまいます😇
調べてみたところ、glTFファイルを表示する際はモデル自体だけでなく環境も与えてやる必要があるらしく、以下を参考に修正しました。
deck.gl/mesh-layers.js at db09e5d3af55176212337f4ccb8e0c4b34737e15 · uber/deck.gl · GitHub
3.4. その他
デプロイにはGitHub Pagesを利用しました。
4. まとめ
"OUR Shurijo: みんなの首里城デジタル復元プロジェクト"の公開データを処理し、MapboxとDeck.glで地図上に可視化するWebサイトを作成しました。 glTFファイルや座標の扱いには少しコツが必要ですが、Storytelling Templateを利用すると魅力的な可視化が作成できますね。
