正距方位図法で描画した地図に対する経緯線の描画をWebGLで実装する方法。

経線・緯線に沿った点列を生成しそれを正方向の投影変換を掛けた上でラインとして結合して描画する方法ではなく、逆方向の投影変換を用いてほとんどの演算をWebGL側で実施し描画する方法について。

目的

以前の方法

当初は経緯線の描画として以下のような方法を使用していた。考え方としてはごく普通の方法。

この方法は考え方はシンプルだが、以下のようなデメリットがある。

滑らかな曲線を描画しようとすると、密な点列を生成する必要がある。
外周部（対蹠点）付近では、いくら点列を密に生成したところで大きな飛びが発生してしまう。
- 上記の結果、滑らかな緯線・経線を描画しようとすると、処理が結構重くなる。
外周部（対蹠点）付近での飛びの対策や、曲率の変化に応じた点列の密度の調整などを考慮すると、点列の生成処理が簡単ではなくなる。

特にスマホなどの端末ではパフォーマンス上の問題が大きく、これを改善するために次のような抜本的な変更を行った。

改善した方法では、正方向ではなく逆方向の投影変換を使用する。予め点列を生成することも行わない。基本的にほとんどの演算と描画がWebGLだけで完結する。

考え方のイメージは以下の通り。

但し実際には内部では画像は生成しておらず、色を塗り分けるための関数と投影変換の処理を直接使用して線を求めている。画像の投影変換と同じような処理となるため、逆方向の投影変換を使用することとなる。

実際には、経度±180度付近での不連続性などへの対応などの細かい調整も必要となる。

正距方位図法の場合の実装例は以下の通り。

※ 画像付きの場合については20度間隔に設定。

以前の方法と比較し、以下のような利点あり。

パフォーマンスの改善。特にスマホからの表示時のパフォーマンスが大幅に改善。
外周部（対蹠点）付近でも特別な処理なしに描画可能。
- 外周部（対蹠点）付近に特化した処理（線の反対側への飛びなどへの対応）も不要となった。
- 外周部付近では経緯線の描画自体を抑制する、というような対応も不要。
他の投影図法でも逆方向の変換さえあれば大きな変更なしで対応できる可能性が高い。
- 点列を生成して描画する方法の場合、対蹠点の扱いや周期性の扱いなどで図法ごとの調整が必要な場合があった。
JavaScript側の処理の大幅な削減。

一方で以下のような課題あり。

他の投影図法でもこの方法は適用可能と思われる。
少なくとも、以下の投影図法でも同じ方法で描画可能。

ソースコード
- https://github.com/tomosn/simple-raster-projection/blob/master/graticule-laea.html
表示例
- 経緯線のみの場合
- 画像付きの場合