SHOEISHA iD

※旧SEメンバーシップ会員の方は、同じ登録情報(メールアドレス&パスワード)でログインいただけます

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

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

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

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

  • X ポスト
  • このエントリーをはてなブックマークに追加

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

  • X ポスト
  • このエントリーをはてなブックマークに追加

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

会員登録無料すると、続きをお読みいただけます

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー

次のページ
色の変更

この記事は参考になりましたか?

  • X ポスト
  • このエントリーをはてなブックマークに追加
スマホアプリ開発の最新トレンド! ぜったい外せない位置情報活用術連載記事一覧

もっと読む

この記事の著者

冨川 修広(ヤフー株式会社)(トミカワ ノブヒロ(ヤフーカブシキカイシャ))

2008年ヤフー入社。地図に関するシステム全般の設計・開発を担当。フルリニューアルしたAndroid版Yahoo!地図アプリでは、プロダクトマネージャとしてプロジェクト全体を統括。

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

この記事は参考になりましたか?

この記事をシェア

  • X ポスト
  • このエントリーをはてなブックマークに追加
CodeZine(コードジン)
https://codezine.jp/article/detail/7686 2014/03/26 14:00

おすすめ

アクセスランキング

アクセスランキング

イベント

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー

アクセスランキング

アクセスランキング