HAWKCAST3Dビューア開発編(1)-開発の背景

2023年10月27日

皆さんこんにちは。今回は、3D Map化するまでに至った背景など振り返って見たいと思います。

通常のLeafletを使った描画の限界

もともと1秒間隔で、位置情報がブラウザにデータが送られてくる仕組みとなっているHAWKCASTですが、ベースとなるMapは当初Leafletを利用していました。

弊社では国際大会など一度に400を超える多くのデバイスを同時に使うことがあります。通常のLeaflet(の特にマーカー)を数百同時に描画させると、ブラウザのCPUが常時高い使用率となりクライアントへの性能負荷が非常に大きい状態となり、うまくアニメーションで描画できないことがありました。

同時多数のレンダリング性能の向上

色々解決できそうな技術をあらったところ、Uberを開発から生まれたオープンソース、Deck.glがもっとも期待の持てる技術と感じました。数万点のタクシーの乗降データを一度に描画できるものでした。

またこの技術はWebGLをベースに開発されているため、3Dビジュアルにも容易に対応できることも魅力でした。

まずは一万台規模の描画テスト

一万台規模のデバイスの位置データ(5秒間隔で、数時間分)でのテストを行いました。元のデータは数GB程度あったため、さらに時間を間引くなど、数百MBレベルまでデータを圧縮し、描画テストを行いました。 描画性能は期待通りで、マーカーの描画も性能が頭打ちになることなく表示することが可能となりました。

今回は以上となります。次回は具体的な実装について触れていきたいと思います。

なるべく短い間隔で更新していくので、お楽しみにしていてください。

HAWKCASTに関するお問い合わせは、公式HPよりお願い致します。