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

CodeZine / 2013年12月11日 14時0分

図7(Y!地図アプリの視点移動)

 本掲載ではOpenGLを使ったベクトル版地図エンジンの作り方を紹介しています。ベクトルエンジンでの地図描画は、前回ご紹介した「Android版Yahoo!地図アプリ」や、12月9日にフルリニューアルした「iPhone版Yahoo!地図アプリ」でも新たに採用されています。前回の記事では、基本を構成するクラスを作成しました。今回は、その中で『視点』について掘り下げていきたいと思います。

■はじめに

 Yahoo!地図アプリで使われている地図は、メルカトル図法で投影されたデータを使用しています。メルカトル図法は、地球を丸い筒上に投影したもので、緯度と経度が直交する平面の形で地球を表現できます。そのため、タイル上の地図を張り合わせて表現することが多いインターネット地図では、メルカトル図法を採用することが一般的です。今回のベクトル版地図エンジンでも、世界をXYでタイル上に区切ったデータ形式にしているため、メルカトル図法で投影されています。

図1(地図データはXYで分割されている)


■視点について

 地図は、XYで構成される平面での表現となることを理解いただけたと思います。では、ベクトル版地図エンジンではそれをどのように表示しているかを説明します。ここで重要なのが、視点(カメラ)になります。従来のラスター版地図エンジンでは、Canvasに対してタイル画像を張り合わせる形で描画してきました。そのため、Canvasを真上から見るという視点で常に地図が描画されています。

図2(Canvasを真上からみている感じ)


 OpenGLの世界では、画面に対して平行投影された形で同様の表現が可能です。

図3(並行投影)


 サンプルコードでは、以下の箇所でその設定が行われています。

GL20MyRenderer
public void onSurfaceChanged(GL10 arg0, int width, int height) { int size = (width <= height) ? width : height; //ビューポートの設定します。 GLES20.glViewport((width - size) / 2, (height - size) / 2, size, size); //ビューボリュームを設定します。 Matrix.orthoM(mProjMatrix, 0, -1000000.0f, 1000000.0f, -1000000.0f, 1000000.0f, 0.0f, 10000000.0f); GLES20.glUniformMatrix4fv(muProjMatrix, 1, false, mProjMatrix, 0); }
 ビューポートの設定をGLES20.glViewportで行い、Matrix.orthoMを使って並行投影を指示しています。次に視点(カメラ)についてです。

GL20MyRenderer
public void onSurfaceCreated(GL10 arg0, EGLConfig arg1) { 省略 //視点(カメラ)の位置を設定します。 Matrix.setLookAtM(mViewMatrix, 0, mEyeX, mEyeY, mEyeZ, mEyeX, mEyeY, 0.0f, 0.0f, 1.0f, 0.0f); GLES20.glUniformMatrix4fv(muViewMatrix, 1, false, mViewMatrix, 0); }
 Matrix.setLookAtMを使って、視点の位置と方向と軸を設定します。サンプルでは、地図平面に対してY軸が上の状態で垂直に見下ろしている状態です。地図の位置を変えたい場合は、視点のXY軸と方向を並行移動させることで地図を移動する表現が実現できます。



CodeZine

トピックスRSS

ランキング