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

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

　破線を描くためのシェーダです。フラグメントシェーダ部分が破線処理を行っています。

1. float texfH = fract(v_TexCoord.y);
   少数部分を取り出します。
    
2. float ptlen = pt.g + pt.b;
   破線の距離を計算します（サンプルでは、黒：透明＝2：1）。
    
3. z = pt.g / ptlen;
   しきい値を計算します（0 < z < 1.0）。
    
4. x = clamp(texfH, y, z);
   しきい値より小さい場合はtexfHの値を利用。大きい場合はしきい値を取得します。
    
5. if(x == texfH) return;
   しきい値より小さい場合は、通常通り描画します（黒を描画）。
    
6. gl_FragColor.a = 0.0;
   しきい値より大きい場合は、透明で描画します。

　以上のような処理を行い、図7のように破線で北海道が描画されたら成功です。

図7（破線で描かれた北海道）

まとめ

　いかがでしたでしょうか。地図エンジンではシェーダを使って、地図上のさまざまな表現を実現しています。シェーダは非常に奥が深く、ちょっとした処理の違いで処理スピードが大きく異なることもあるため、日々工夫を行っています。今回の処理はその中でも基礎的な部分でしたが、シェーダに興味を持っていただけたら幸いです。また、ここまでのサンプルはGitHubにアップしましたので、ご参考にしてください。次回は、北海道だけではなく全国のデータを使った地図エンジンらしい動きに仕上げていきたいと思います。

• Yahoo！地図アプリ（Android版）
• Yahoo！地図アプリ（iOS版）