OpenGLを使った地図描画エンジンの作り方(3)

CodeZine / 2014年3月26日 14時0分

図7(破線で描かれた北海道)

 すっかり暖かくなりましたね。春の訪れとともに桜前線も北上しています。と同時に、花粉の季節でもあります。今日はどれくらい花粉が飛ぶのだろうと悩む毎日です。Yahoo!地図アプリでは、そんな桜の開花状況や、花粉の飛散情報が地図上のアイコンでわかるようになっています。(図1)。地図上から簡単に確認可能ですので、日々のツールとしてご利用ください。

図1(Yahoo!地図アプリのお花見情報(左)と花粉情報(右))


 さて、本掲載ではOpenGLを使ったベクトル版地図エンジンの作り方を紹介しています。前回は、視点についてご説明させていただきました。今回は、シェーダを使った色の変更と線種についての解説です。

■はじめに

 Yahoo!地図は、地図の種類をいくつか変更が可能です。例えば、Android版Yahoo!地図アプリでは、通常の地図と鉄道路線図の2種類(図2)を提供させていただいています。一見まったく異なるデータのように見えますが、実は元データは同じものを使っています。地図描画エンジンで表示データに変換する際のスタイルデータの切り替え(図3)によって、通常地図と鉄道路線図を同じデータを使って実現しています。以前のラスタ版では、表示の切り替えを行うたびに、新たに通信を行いデータ取得する必要がありました。これでは非効率なため、ベクトル版では、同じデータを用いながらも、さまざまな種類の地図表現ができるように工夫しています。

図2(通常地図と鉄道路線図の比較)


図3(ベクトルデータとスタイルの図解)


■シェーダの解説

  地図アプリでの色の変更方法について触れる前に、OpenGL ES 2.0の描画の流れを把握しておく必要があるため、簡単に説明させていただきます。図4をご覧ください。

図4(描画の流れ)


頂点情報のインプット
描画したいオブジェクトの頂点情報をOpenGLへ渡します。
  頂点シェーダ(OpenGL ES 2.0で定義が可能)
オブジェクトの頂点座標と変換行列を元に2次元座標に投影します。
  ラスタライザ
2次元座標に変換された各頂点を元にラスタライズ処理を行います。
ここはOpenGL内部で行われます。
  フラグメントシェーダ(OpenGL ES 2.0で定義が可能)
ライタライズされた各ピクセルに色をつけます。この工程でテクスチャーなどを使った着色も可能になります。
  アウトプット
画面へ表示します。  描画の流れは掴んでいただけたでしょうか。OpenGL ES 2.0では、開発者による頂点シェーダとフラグメントシェーダの定義が必要です。ちょっと複雑で面倒ではありますが、逆にこれを自由に定義できることで、さまざまな表現が可能となっています。では、実際にシェーダを使った色変更を行ってみましょう。



CodeZine

トピックスRSS

ランキング