さて、本掲載では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では、開発者による頂点シェーダとフラグメントシェーダの定義が必要です。ちょっと複雑で面倒ではありますが、逆にこれを自由に定義できることで、さまざまな表現が可能となっています。では、実際にシェーダを使った色変更を行ってみましょう。