Sky API：3D地図向け大気散乱アルゴリズム

v2.9.0以降、空のスタイリングには、空レイヤーを使用する代わりにフォグを使用することをお勧めします。最新のドキュメントをご覧ください。

Mapbox 3Dのリリースの一環として、新しい Camera API により、開発者は地図のピッチを 60 度から 85 度に上げることができます。この地図のピッチの増加により、地平線と空が露出し、新しいプロパティを使用してスタイルを設定できるようになりました。Sky API を使用すると、リアルな雰囲気、任意のグラデーション、地理的な場所と時刻に基づいて太陽の位置をシミュレートするなど、幅広い設計効果を実現できます。

Mapbox GL Style Specification の sky レイヤータイプのプロパティは次のとおりです。

sky-opacity:  空レイヤー全体の不透明度。ズームレベル全体で補間できます。

sky-type: 次のいずれか：

• gradient：sky-gradient-radiusおよびsky-gradientで構成できるグラデーションで空を描画します。
• atmosphere：シミュレートされた大気散乱アルゴリズムで空を描画します。太陽の方向は、光の位置に関連付けるか、sky-atmosphere-sunを介して明示的に設定できます。
  

sky-atmosphere-color: 大気全体でカラーチャネルをどのように分散させるかを決定するために使用されるカラー係数。白を使用すると、デフォルトの係数が適用され、大気に青色が適用されます。カラーチャネルを変更すると、この特定のチャネルが散乱の影響をどれだけ受けるかに影響します。アルファチャネルは、大気の色が空レイヤーでどれだけ強く表現されるかを表します。

sky-atmosphere-sun: 太陽の中心の位置[a: 方位角、p: 極角]。方位角は、0°北を基準とした太陽の位置を示し、度は時計回りに進みます。極角は太陽の高さを示し、0°は真上（天頂）、90°は地平線です。このプロパティが省略されている場合、太陽の中心は光の位置から直接継承されます。

sky-atmosphere-halo-color: 太陽のハローに適用される色。アルファチャネルは、太陽のハローが大気空レイヤーでどれだけ強く表現されるかを表します。

sky-gradient: 空に色を付けるためのカラーグラデーションを定義します。色の値は、sky-radial-progressを使用して式で補間できます。color-rampでsky-radial-progressによって補間できます。

sky-gradient-radius: グラデーションの半径角。180の値にすると、グラデーションが一周します。

sky-gradient-center: グラデーションの中心の位置[a: 方位角、p: 極角]。方位角は、0°北を基準としたグラデーションの中心の位置を示し、度は時計回りに進みます。極角はグラデーションの中心の高さを示し、0°は真上（天頂）、90°は地平線です。

Mapbox 3Dで生成される空は、太陽の方向、地理位置情報、時刻を入力として、より具体的なコントロール（ヘイズ、輝度など）を使用する大気散乱アルゴリズムを使用します。これにより、時刻の設定と、わずかな芸術的な制御の両方が可能になります。グラデーションを使用すると、地平線と天頂角の間の複数の色、またはベースマップスタイルのテーマカラーの使用と組み合わせて、太陽の方向を中心とした放射状グラデーションをスムーズに補間できます。

大気散乱シェーダーは、計算コストが高くなります。そこで、bake-once-reuse-multiple-timesのコンセプトを採用しています。これにより、スカイボックスの生成が控えめに呼び出されるローエンドデバイスへのサポートが広がります。つまり、空は動的な場合は周期的なイベントで、静的な場合は1回再生成されます。スカイボックスが再生成されると、急激な視覚的変化を防ぐために、前の結果と新しい結果の間で数フレームにわたってスムーズな補間が適用されます。その性質上、プロシージャル生成は必然的にカラーバンディングの兆候を示します。これを解決するために、シェーダーでわずかな時間的ディザリングが適用されます。

SunCalcを使用した日の出、午前、午後、夕方、日没

新しいskyレイヤープロパティを使用すると、デザイナーは suncalcのようなJSライブラリを使用して、太陽の位置と空の色を計算し、時間帯や場所に基づいて体験を変えることができます。

map.setTerrain({
    source: 'mapbox-dem',
    exaggeration: [
        'interpolate',
        ['exponential', 0.5],
        ['zoom'],
        0, 0.2,
        7, 1
    ]
});

グラデーションと大気の空レイヤーはどちらも、球座標を使用して、グラデーションと太陽の中心を記述します。これは、既存の光の仕様に従っており、XY平面が海面で地図と一致する方法を示しています。

新しいSkyレイヤーをコードで直接、またはMapbox Studioの効率化されたインターフェースを介して地図に組み込んでください。今すぐ始めて、Twitterで#BuiltWithMapboxを使って3Dマップを共有してください。