Shoeisha Technology Media

CodeZine(コードジン)

特集ページ一覧

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

スマホアプリ開発の最新トレンド! ぜったい外せない位置情報活用術 番外編

  • ブックマーク
  • LINEで送る
  • このエントリーをはてなブックマークに追加

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

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

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

はじめに

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

図2(通常地図と鉄道路線図の比較)
図2(通常地図と鉄道路線図の比較)
図3(ベクトルデータとスタイルの図解)
図3(ベクトルデータとスタイルの図解)

シェーダの解説

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

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

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


  • ブックマーク
  • LINEで送る
  • このエントリーをはてなブックマークに追加

著者プロフィール

バックナンバー

連載:スマホアプリ開発の最新トレンド! ぜったい外せない位置情報活用術

もっと読む

All contents copyright © 2005-2019 Shoeisha Co., Ltd. All rights reserved. ver.1.5