WebGLで天気予報を可視化

2021年5月12日発行 更新日:2021年6月23日

WebGLで天気予報を可視化

気温や風の流れなどの気象データやその他の科学的情報をアニメーション化するための新しいJavaScriptコンポーネントが当社のチームによって開発されました。当社が提供する気象データのエンドポイントを利用することもできますし、用意されたワークフローで独自のデータを処理し、その機能をお客様のウェブサイトに統合することもできます。

デモを見る

GL JSマップでの風の粒子のアニメーション

Data 風や波のデータセットのように、パーティクルが方向や速度をアニメーションで明確に示すことで視覚化できます。

高度なディスプレイ技術により、風や波の動きを時間軸で捉えることができ、粒子がスムーズに進路を変え、反対方向から風が吹き始める様子を見ることができます。

風や波の強さに応じて色を設定することで、より高い透明感を得ることができます。

アニメーションは、WebGLを使用して、最新のWebブラウザで動作します。

グリッドデータをブラウザでスムーズに可視化

Data は一度に表示するのではなく、エリアやズームレベルに応じて必要なときに読み込めるように、小さなパーツに分割して表示します。ズームインすると詳細が表示されます。

温度、湿度、雲、降水量など、さまざまな情報を可視化して表示できます。追加のデータをシームレスに読み込むことができます。時間グリッドデータのすべてのアニメーションは、タイムライン付きのブラウザで実行することができ、いつでも停止して特定の時間の気象データを調査することができます。

気象現象の理解を深めるために、データに色をつけることができます。真の強度値がタイルに直接エンコードされているため、独自のカラーパレットを簡単に設定することができます。

Mapboxに代わるオープンソースのMapLibre GL JS

すべてのアニメーションは、MapLibre GL JS(オープンソースのMapbox GL JSフォーク)を使用して、通常のWebブラウザで動作します。拡大、縮小、回転、傾斜など、ビューを自由に操作することができます。

ゲーム業界で広く採用されているハードウェアアクセラレーション技術を用いて、高いパフォーマンスを確保しています。データのレンダリングにはWebGLシェーダーを使用しており、データをよりリアルに表現します。

ウェザープロダクトについて詳しく見る

どのような仕組みになっているのですか?

生データをWebに最適化されたタイルに処理することで、その時々に必要なエリアと詳細レベルのみを徐々に読み込むことができます。また、気象データの各タイムフレーム(異なる時間帯の予報など)は、個別のタイルピラミッドとして処理されるため、既存のクライアントサイドアニメーションに追加フレームが利用可能になった時点でロードすることができます。

処理されたタイルには、元の気象値(気温、風速、雲量など)が含まれており、最終的な色付けはWebブラウザのクライアントサイド(WebGLの能力を活用)で行われます。これにより、利用可能な予測時間枠の間でデータ値を補間し、美しく滑らかなアニメーションを実現しています。

このアプローチのもう一つの大きな利点は、元のデータを再処理することなく、ビジュアライゼーションのルック&フィールを設定できることです。カスタムカラースケール、カットオフしきい値などは、ビジュアライゼーションのクライアントサイドコンポーネントを再設定するだけで可能です。

滑らかなアニメーションは、特定のエリアやズームレベルで必要なときに読み込まれるデータタイル技術を徐々に読み込むことで実現しています。

これにより、膨大な量のデータを短時間で表示することができ、地球全体をカバーするデータセットも数秒で表示することができます。

すべてがモバイルでも動作します。ビジュアライゼーションはタッチデバイスに最適化されています。

お客様の天気予報サイトの可視化

MapTilerは、独自の天気予報アプリケーションを開発するために、ベースとなる地図、データ処理ツール(GRIB2やNetCDF形式のカスタム気象データを処理する機能)、可視化のための上述のJavaScriptコンポーネントといったフルスタックを提供しています。ご興味のある方は、お問い合わせください。

セールスに問合わせる

天気予報の可視化は、UAE国立気象センターとの共同研究開発プロジェクトとして行われました。NCM UAEは最初の採用者で、彼らの天気予報ポータルを強化し、独自のデータを表示しています。

気象情報

Petr Sloup

CTO
2021年5月12日掲載

Découvrez MapTiler en français!

Visitez maptiler.fr

Přečtěte si více v češtině

Více na maptiler.cz

Leer más en español

Visite maptiler.es

Meer in het Nederlands

Ga naar maptiler.nl

日本語で詳細をみる

maptiler.jp へ

Weitere Informationen finden Sie

auf MapTiler.de

ديزملا فشتكإ

maptiler.ae ىلإ ىقتنا

MapTilerをスイスで探す

MapTiler.chを見る