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

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

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

はじめに

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

図2（通常地図と鉄道路線図の比較）

図3（ベクトルデータとスタイルの図解）

シェーダの解説

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

図4（描画の流れ）

1. 頂点情報のインプット
   描画したいオブジェクトの頂点情報をOpenGLへ渡します。
    
2. 頂点シェーダ（OpenGL ES 2.0で定義が可能）
   オブジェクトの頂点座標と変換行列を元に2次元座標に投影します。
    
3. ラスタライザ
   2次元座標に変換された各頂点を元にラスタライズ処理を行います。
   ここはOpenGL内部で行われます。
    
4. フラグメントシェーダ（OpenGL ES 2.0で定義が可能）
   ライタライズされた各ピクセルに色をつけます。この工程でテクスチャーなどを使った着色も可能になります。
    
5. アウトプット
   画面へ表示します。

　描画の流れは掴んでいただけたでしょうか。OpenGL ES 2.0では、開発者による頂点シェーダとフラグメントシェーダの定義が必要です。ちょっと複雑で面倒ではありますが、逆にこれを自由に定義できることで、さまざまな表現が可能となっています。では、実際にシェーダを使った色変更を行ってみましょう。