3
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

WebGLを使った点群のウェブ地図展開

Last updated at Posted at 2020-10-04

この記事は投稿した論文と試作したアプリケーションの紹介記事である。またアプリケーション開発には多くの試行錯誤があったので、その内容をメモとして残すものである。

#はじめに

点群をウェブ地図に展開する場合において、WebGL以前ではその数量に限界があった(点の数量が多くなるとアプリケーションの起動時間や応答速度が著しく劣化した)。WebGLが手軽に使える(手軽ではないが)ようになったこと、手頃なお題を頂いたこと、仕事がなく暇だったということもあり、どのようにすれば高速動作が可能であるか1ヶ月程度実験したところ非常に高速に動作する仕組みの開発に成功したので、完成したアプリケーションについて紹介する。
このアプリケーションについて記述した論文は最後に紹介する。

#開発したアプリケーション(最終成果)

スクリーンショット 2020-10-04 9.56.39.png

#データ

上記ページ作成者の方とお話する機会があり、その際点群展開のお題としてデータをご提供いただいた。
データの点数は約170万点、表示分類12(実際は分類に含まれない点があったので本来は13)、geojsonファイルの容量約390MBである。上記ページ中には全点を一括展開する機能は実装されておらず、特定の領域ごとに表示する仕組みをLeafletで実装している。そのうち一つを開いてみると約2,500点ほどのデータで表示されるが動作速度の劣化が見られる。全点表示かつ高速動作するアプリケーションを開発できるか否か、半信半疑ではあったが幾つかの方法でテスト実装することを試みた。

#試したこと

##LeafletとPixiJSの組み合わせ

WebGLを容易に扱うことができるライブラリPixiJSを使うことで高速展開できるのではないか、と考えアプリケーションを試作した。元となるデータはサイズが大きいので、表示に必要なデータだけを抽出し無駄な桁を削除する等調整して独自のjson形式でデータを再作成した結果約100MBのjsonファイルとなった。
結果として全点を展開することは出来たが、低ズームレベル(縮小表示)時の動作速度は緩慢となった(それでも高ズームレベルでは程々の動作速度であった)。PixiJSが標準で装備する機能を利用したため、表示中のデータを識別するJavaScriptオブジェクトが肥大化することが動作速度劣化の原因と推察した。jsonデータをタイル単位で管理する等工夫したが結果として高速展開と言える状態とはならなかった。
LeafletとPixiJSを組み合わせる例として、LeafletのプラグインLeaflet.PixiOverlayがあり、100万点までの点群を展開するサンプルが表示されている。ソースコードを読むと数万点までは当該プラグインを使用するだけであるが、100万点のサンプルでは独自のシェーダを記述する等工夫が必要な様子であった。

##Leafletと2D-Canvasの組み合わせ

PixiJSを使っても保持するオブジェクトが大きすぎることが動作速度劣化の原因になるのであれば、2D-Canvasに点を打って表現する方法と変わりないのではないかと考え、その仕様でアプリケーションを試作した。データは前述のオリジナルjsonを使用した。結果としてPixiJSより若干動作は重くなるものの、ほぼ同等の速度で動作するアプリケーションを開発することができた。

##Leafletと生WebGLの組み合わせ

PixiJSのサンプルにおいて生WebGLを使えば100万点の点群を高速展開できることは把握していたので、これを機会にライブラリを用いず生WebGLでのアプリケーション開発に着手し、結果として良好な動作速度を得ることができた。
それに合わせて、普段より交流のある研究者の方から点群データの受け渡しをするための新たな書式の提案を受けたのでこれを採用したところ、データサイズは2MBまで軽量化することができ、データの扱いもWebGLと極めて高い親和性を持っていたためアプリケーションの高速化にも寄与したと推察できる。

#プログラム詳細

点群のデータはアプリケーション起動時に全て一括で取得する。データサイズが極めて小さいため起動時間の大きな低下を招くことはない。取得したデータはヘッダと点群の座標他に分割し、点群座標他を一括でシェーダに渡す。
シェーダでは与えられた座標をWebGLの座標系に変換し、かつ出力色を決定して描画する。これにより点群のウェブ地図高速展開が可能であることがわかった。

プログラムの詳細については後日記載予定

#感想等

  • 生WebGLを学ぶことにより、Three.jsやPixiJS等のライブラリで用いる各種関数の意味が少しずつ理解できるようになった。開発においてライブラリを用いる場合、ライブラリに頼らない手法を学んでおくか、当該ライブラリのソースコードを読むことが実際の開発に役立つことがわかった。
  • このプログラムの実力を発揮できるようなお題を見つけることが難しい。500万点程度の点群を展開する業務を受注できればさらなる発展を望むことができる(と思う)。

#今後の進展

試作したアプリケーションでウェブ地図上での点群高速展開を実現することができたが、これでは単に表示しただけに過ぎない。各種実用的なアプリケーションに適用するには幾つかの課題がある。例えば大量のデータの管理はデータベースソフトウェアを用いることが一般的であるが、このアプリケーションの現状ではデータベースとの連携が出来ない。
すでに課題の解決には成功しており、今後それらを取りまとめ、論文もしくは記事投稿等で紹介する予定である。

#参考文献

現在整理中。

3
2
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
3
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?