狠狠撸

狠狠撸Share a Scribd company logo

3D animation of weather data using Cesium's shader

?Download as PPTX, PDF?
?
Ryousuke Wayama
Ryousuke Wayama

FOSS4G 2024 Japanで発表した資料となります

1 of 41
Download to read offline
Cesium の Shader を用いた 気象データ 3D アニメーションについて 株式会社ノーザンシステムサービス 研究開発部 小林知愛 FOSS4G 2024 Japan
FOSS4G Advent Calendar ? 今年もアドベントカレンダーの時期が近づいてきました！ ? 去年は弊社も参加させていただきました 2 [1] FOSS4G Advent Calendar 2023 https://qiita.com/advent-calendar/2023/foss4g FOSS4G Advent Calendar 2023
FOSS4G Advent Calender 2023 19 日目 GraphCast の気象予測データを Cesium で可視化し てみた 1 ? AI が予測した気象データを Cesium で 可視化してみた記事 ? 今回の発表はこちらの記事のアペンド 的内容 ? 最初に記事の内容を簡単に紹介 [1] https://qiita.com/wayama_ryousuke/items/f1823be92153e9b2928b 3
背景 ? 近年、異常気象による災害の被害が増加 早期に異常気象を発見するために 長期間を正確に気象予測する技術が重要 [1] 気候変動監視レポート 2023 | 気象庁 https://www.data.jma.go.jp/cpdinfo/monitor/2023/pdf/ccmr2023_all.pdf [2] 2023 年（令和 5 年）の世界の主な異常気象?気象災害（速報） | 気象庁 https://www.jma.go.jp/jma/press/2312/22d/2023matome_besshi2-2.pdf 日本での気温の上昇、降水量の増加 1 世界的に異常気象が発生 2 4
背景 ? Google DeepMind 気象予測 AI モデル「 GraphCast 」 1 を公 開 ? 従来のシステムよりも高精度かつ高速に最大 10 日間先の気象を予測 ? 予測が難しいとされる異常気象の予測にも強い [1] GraphCast: AI model for faster and more accurate global weather forecasting https://deepmind.google/discover/blog/graphcast-ai-model-for-faster-and-more-accurate-global-weather-forecasting/ 5
背景 ? 予測された気象データを分かりやすく伝えるにはどのように可 視化するのがよいのだろうか？ GraphCast の発表を見て…… GraphCast で予測された気象データの 可視化を 3D 地球儀ライブラリ Cesium1 で試してみ た 6 [1] Cesium https://cesium.com/
GraphCast による気象予測 ? ヨーロッパ中期予報センター（ ECMWF ）から公開されている GraphCast での推論ツール 1 で気象予測 2023/12/7 の気象データを入力して GraphCast で 予測された 2023/12/9 の気圧のデータ 2023/12/9 に実際に観測された気圧データ 7 [1] ecmwf-lab/ai-models https://github.com/ecmwf-lab/ai-models
気象データの可視化 ? 風のように動きがあるものや時系列での変化を表現する場合に はアニメーションによる可視化が効果的 GraphCast で予測した気象データについて アニメーションで可視化 8
多次元風速アニメーション ? WebGL により風速をパーティクルアニメーションとして描画 することで可視化する手法がある 1 GraphCast で予測された風速データを表示してみた例 9 [1] GPU Powered Wind Visualization With Cesium https://cesium.com/blog/2019/04/29/gpu-powered-wind/
多次元風速アニメーション ? WebGL により風速をパーティクルアニメーションとして描画 することで可視化する手法 ? 多次元データの読み込みと表示にも対応 ? 次元による風の動きの違いが見やすくなることが期待できる 次元ごとに高さを変えて立体的に表示できないか？ 10
多次元風速アニメーション ? 結果としてはうまくいかなかった ? 地形との衝突判定のためにすべてのパーティクルに対して一律で高さ を設定している→次元ごとに高さを変えるように改修 ? 高さから地形に隠れるかどうかの判定は行うものの、パーティクル間 の重なりについては計算されていないため立体的に見えない 高さの設定変更前 次元ごとに高さを変更（白＜赤＜黄の順で高い） 11 風速アニメーションの立体化は 今回は諦めた……
CS 立体図を用いた気圧可視化アニメーショ ン ? 気圧の可視化 ? 一般的に等高線で表されることが多い ? 等高線だと専門知識がないとぱっと見ではわ かりにくい ? 「気圧の谷」っていうけど実際谷になってるの？ ? 地形判読に使用される CS 立体図で気圧を 可視化してアニメーション ? 気圧の高低差が分かりやすく表現できるので は ? 等高線の例 1 12 [1] 日本周辺域 実況天気図の説明 | 気象庁 https://www.jma.go.jp/jma/kishou/know/kurashi/sokuhou_kaisetu.html
CS 立体図を用いた気圧可視化アニメーショ ン ? 「 FOSS4G japan 2020 online1 」で発表した Geotiff 画像を地 図タイル化し、 Cesium 上に WebGL で CS 立体図を描画さ せる手法 2 ? 実装に当たり tmizu23 様 3 、 frogcat 様 4 の記事を参考 [1] FOSS4G japan 2020 online https://www.osgeo.jp/events/foss4g-2020/foss4g-2020-japan-online [2] Geotiff.js で始めるリアルタイム演算 in foss4g japan 2020 online (/makinux7/geotiffjs-in-foss4g-japan-2020-online) [3] GeoTIFF から UTFGrid を作る方法 - 自然環境保全のための周辺技術 https://tmizu23.hatenablog.com/entry/20121107 [4] 標高 PNG タイルと WebGL による地形表現 - Qiita https://qiita.com/frogcat/items/7e91d3070a7a8d3e2c94 GraphCast が推論した気圧の CS 立体図 CS 立体図＋カラーマップ 13
CS 立体図を用いた気圧可視化アニメーショ ン ? さらに気圧を時系列でアニメーションさせてみる ? レイヤーを重ねて表示し上から順番に非表示にしていく 14 アニメーションで気圧の変化をわかりやすく可視化できた
おまけ：気圧を 3D で可視化してみる ? 地形タイルにして 3D で立体的に可視化してみた ? Cesium terrain builder1 を使用して Geotiff 画像から地形タイルを作 成 ? 起伏が小さいので高さ方向のスケールを 100 倍程度に拡大 2023 年 8 月の台風 7 号の気圧を地形タイル化 ここまでが去年の記事の内容 15 [1] geo-data/cesium-terrain-builder https://github.com/geo-data/cesium-terrain-builder
今回やったこと ? おまけで気圧を地形タイルにして 3D で可視化 ? 3D でアニメーションはさせていなかった 気圧データを 3D アニメーションできないか？ 16
3D アニメーションの実装を模索 ? Cesium 公式のデモ 1 ? 点群の 3D モデルをカスタムシェーダーでアニメーション ? 高速に滑らかに 3D モデルをアニメーションさせている 17 [1] Custom Shaders Models Cesium Sandcastle https://sandcastle.cesium.com/?src=/slideshow/3d-animation-of-weather-data-using-cesium-s-shade/273214710/Custom%20Shaders%20Models.html
3D 点群アニメーション ? 点群の 3D モデルの各点を時系列の気圧データに従って高さを 変化させてアニメーション ? Cesium のデモと同じようにカスタムシェーダーで実現 ? インタラクティブに任意の日時を指定できるようにする ? Cesium の時系列スライダーで操作 18 時系列気圧データを点群でアニメーションさせる
3D 点群アニメーション 実装項目 ? 点群 3D モデル作成 ? Cesium 上に表示する点群の 3D モデルの作成 ? カスタムシェーダー ? カスタムシェーダーによって点群 3D モデルをアニメーション ? 時系列データ読み込み ? アニメーションに反映させる時系列気圧データの読み込み ? 時系列スライダーで任意の日時のデータを読み込むようにする 19
3D 点群アニメーション 点群 3D モデル作成 ? 気圧の Geotiff データを点群 3D モデルに反映させてアニメーショ ン ? 点群の頂点が Geotiff のピクセルと 1 対 1 で対応 ? 対応する Geotiff のピクセルの値を点群の頂点の高さ等に反映させる 点群の各頂点から Geotiff の対応するピクセルを 参照できるようにする 20 点群モデル Geotiff 対応する Geotiff のピクセル の値を点群に反映 対応するピクセルを参照
3D 点群アニメーション 点群 3D モデル作成 ? 点群 3D モデルに Geotiff の対応するピクセルの情報を持たせ る必要がある ? Cesium に表示可能な 3D モデル形式「 glTF 」は任意の属性情 報を持たせることが可能 Geotiff の属性情報を持つ点群 glTF モデルを作 成 21
3D 点群アニメーション 点群 3D モデル作成 ? Python で Geotiff から点群 glTF モデルを生成 ? Python ライブラリの GDAL で Geotiff を読み込み ? モデルの頂点用に Geotiff の座標値を 3 次元空間の座標値に変換 （ WGS84 座標→ ECEF 座標） ? pymap3d1 ： 3 次元地理座標変換ライブラリ import pymap3d as pm def xyz_to_ecef(lon, lat, alt): # WGS84 座標を ECEF 座標に変換 x, y, z = pm.geodetic2ecef(lat, lon, alt) return x, y, z 22 [1] geospace-code/pymap3d https://github.com/geospace-code/pymap3d
3D 点群アニメーション 点群 3D モデル作成 ? Python で Geotiff から点群 glTF モデルを生成 ? glTF モデルを生成 ? pygltflib1 ： Python で glTF の読 み書きを行うライブラリ ? 対応するピクセルのインデックス と WGS84 の座標値を属性情報と して持たせる gltf = pygltflib.GLTF2( ... accessors=[ pygltflib.Accessor( bufferView=0, componentType=pygltflib.FLOAT, count=len(points), type=pygltflib.VEC3, max=points.max(axis=0).tolist(), min=points.min(axis=0).tolist(), ), pygltflib.Accessor( bufferView=1, componentType=pygltflib.FLOAT, count=len(lonlat_list), type=pygltflib.VEC2, max=lonlat_list.max(axis=0).tolist(), min=lonlat_list.min(axis=0).tolist(), ), pygltflib.Accessor( bufferView=2, componentType=pygltflib.UNSIGNED_INT, count=len(idx_list), type=pygltflib.VEC2, max=idx_list.max(axis=0).tolist(), min=idx_list.min(axis=0).tolist(), ), ], ... 3D モデルの 頂点の座標値 （ ECEF 座標） WGS84 の座標値 ピクセルの インデックス 23 [1] pygltflib https://gitlab.com/dodgyville/pygltflib
3D 点群アニメーション 点群 3D モデル作成 ? Python で Geotiff から点群 glTF モデルを生成 ? 全球を覆うような点群 3D モデルが作成できた ? 属性情報として生成元の Geotiff の対応するピクセルのインデックス を保持している 24
3D 点群アニメーション カスタムシェーダー ? カスタムシェーダーで気圧の値が点の高度に反映されるように 実装 ? vertexShader で点群の頂点の位置を操作 void vertexMain(VertexInput vsInput, inout czm_modelVertexOutput vsOutput) { vec2 lonlat = vsInput.attributes.longlat; vec2 geotiff_idx = vsInput.attributes.idx; vec2 uv_pos = vec2(float(geotiff_idx.x) / 1439.0, float(geotiff_idx.y) / 719.0); float zval = get_tex_value(uv_pos); float newz = 1000.0 + ((zval - zmin) * heightBuf); vec3 newXyz = geodeticToECEF(lonlat.x, lonlat.y, newz); vsOutput.positionMC.x = newXyz.x; vsOutput.positionMC.y = newXyz.y; vsOutput.positionMC.z = newXyz.z; vsOutput.pointSize = 3.0; } モデルの属性情報から座標値と Geotiff のインデックスを取得 Geotiff データからインデックスが参照する気圧の値を取得 気圧の値から高さを計算し、 頂点の新しい座標値を生成 頂点に新しい座標値を設定 25
3D 点群アニメーション カスタムシェーダー ? CS 立体図やカラーマップ等が点群の色に反映されるように実装 ? CS 立体図や等高線等の計算には frogcat 様 1 の記事を参考 ? fragmentShader vec3 get_cs_map(vec2 uv_pos) { mat3 h; h[0][0] = get_tex_value(uv_pos + (vec2(-1,-1) * unit)); ... return cs_map * dem_color * contour; } void fragmentMain(FragmentInput fsInput, inout czm_modelMaterial material) { vec2 geotiff_idx = fsInput.attributes.idx; vec2 uv_pos = vec2(float(geotiff_idx.x) / 1439.0, float(geotiff_idx.y) / 719.0); material.diffuse = get_cs_map(uv_pos); } モデルの属性情報から Geotiff のインデックスを取得 Geotiff データから気圧値を取得、 CS 立体図等を計算して点群の色に反 映 [1] 標高 PNG タイルと WebGL による地形表現 - Qiita https://qiita.com/frogcat/items/7e91d3070a7a8d3e2c94 26
3D 点群アニメーション 時系列データ読み込み ? Geotiff から気圧データを時系列で読み込む ? Geotiff の形式 ? 画像サイズ： 1440x721 （ 1 ピクセル 0.25 度の全球データ） ? バンド数： 40 （ 10 日間 6 時間ごとの時点） ? 浮動小数点型の気圧データを格納 ? Geotiff.js1 を使用してブラウザ上から直接 Geotiff を読み込む ? GraphCast の気象予測データを格納した Geotiff は 40 バンドの時系列 データを持つ ? 40 バンドの Geotiff をいっぺんに読み込むとメモリエラーにな る 27 [1] geotiff.js https://geotiffjs.github.io/
3D 点群アニメーション 時系列データ読み込み ? 1 バンドの Geotiff を 40 枚読み込むとメモリエラーにはならな い ? 40 バンドの Geotiff を 1 バンドの Geotiff x 40 枚に分離して 1 枚ずつ 順番に読み込み ? 最初に全部の時系列の気圧データを読み込む形式で実装 ? 時系列スライダーが動いた場合、読み込まれた時系列気圧データから 現在の日時のデータを参照 28
3D 点群アニメーション ? 時系列気圧データの点群アニメーションができた！ デモをご覧ください 29
3D 点群アニメーション ? 時系列気圧データの点群アニメーションができた！ 30
3D 点群アニメーション ? 問題点：点群なので近くによってみるとスカスカで見辛い ? 点群モデルの各頂点を動かしていたが、メッシュモデルに適用 することは可能か？ 31 アップだと色や起伏がわかりにくい
メッシュアニメーション メッシュ 3D モデル作成 ? Geotiff からメッシュモデルを作成 ? 点群モデルを作成する Python スクリプトを改修 ? Python ライブラリ open3d1 で点群をメッシュ化して glTF モデルを作 成 # メッシュ作成 # 点の法線推定 ptCloud = o3d.geometry.PointCloud() ptCloud.points = o3d.utility.Vector3dVector(points_ecef_mesh) ptCloud.estimate_normals() ptCloud.orient_normals_consistent_tangent_plane(100) # メッシュ再構成 distances = ptCloud.compute_nearest_neighbor_distance() avg_dist = np.mean(distances) radius = 2*avg_dist radii = [radius, radius * 2] recMeshBPA = o3d.geometry.TriangleMesh.create_from_point_cloud_ball_pivoting( ptCloud, o3d.utility.DoubleVector(radii)) triangles = np.array(recMeshBPA.triangles, dtype=np.uint32) 三角ポリゴンの情報を glTF の設定に追加する 32 [1] Open3D https://www.open3d.org/
メッシュアニメーション メッシュ 3D モデル作成 ? Geotiff からメッシュモデルを作成 ? 全球を覆うようなメッシュ 3D モデルが作成できた 33 メッシュの生成がうまくいってない ところもあるが概ね良さそう
メッシュモデルアニメーション ? 点群モデルをメッシュモデルに差し替えてアニメーション ? カスタムシェーダーは変更なし デモをご覧ください 34
メッシュモデルアニメーション ? 点群モデルをメッシュモデルに差し替えてアニメーション 35
メッシュモデルアニメーション ? 気圧データの 3D メッシュアニメーションによる可視化ができ た ? 気圧の起伏の変化が分かりやすい ? 点群では近くによるとスカスカだったが、メッシュでは改善され見やすくなった ? 画像レイヤーでのアニメーションよりも挙動が重くない ? リアルタイムでのパラメータの反映も可能 36
まとめ ? 気圧を時系列 3D アニメーションさせてみた ? 専門知識がない人でも気圧の起伏と変化をわかりやすく表現 ? 気象以外でもグリッド形式のデータであれば同様にアニメー ション可視化が期待できる 気象に限らず専門家以外にもわかりやすく可視化できる 37
まとめ ? 今までは全球クラスの時系列データは 2D で表示することが多 く、 3D 表示だと動作が重くなってしまう印象 ? GPU が無い環境（スマホなど）でもアニメーション可視化でき る 38 Cesium のカスタムシェーダーを使うことで 従来よりも軽い動作で 3D 可視化できる
まとめ ? 今回作成した時系列データの 3D アニメーションのソースコー ドは Github で公開中！ ? https://github.com/makinux/GridVizA 39
最後に ? 各種 OSS の GIS ツールを使うことで、今回の気象データの可 視化も比較的簡単に実装することができました 40 OSS ツールの開発者の皆様ありがとうございました！
41 ご清聴ありがとうございました！

More Related Content

3D animation of weather data using Cesium's shader

Editor's Notes

  • #2: 今年も11月となりFOSS4Gアドベントカレンダーの時期が近づいてきてきました。毎年12月に開催されるFOSS4G関連記事を投稿するイベントですが、来月に迫っているということもあり記事のネタを考えている方もいらっしゃるのではないでしょうか？ こちらのアドベントカレンダーに去年、弊社も記事を投稿させていただきました。
  • #3: それがこちらの「GraphCastの気象予測データをCesiumで可視化してみた」という記事になります。 ざっくりいうと、AIが予測した気象データを3D地球儀ライブラリのCesiumで可視化してみたという内容の記事でした。 今回の発表はこちらの記事のアペンド的内容となっております。 なので最初にこちらの記事の内容を簡単にご紹介しようと思います。
  • #4: 近年、世界的に异常気象による灾害の被害が増加しています。こういった状况から早期に异常気象を発见するために、长い期间を正确に気象予测する技术が重要视されています。
  • #5: そんな中、Google DeepMindが気象予測AIモデル「GraphCast」を公開しました。 GraphCastは従来のシステムよりも高精度かつ高速に最大10日間先の気象を予測すると発表されました。 また、従来の予測システムよりも予測が難しいとされる異常気象の予測にも強いとされています。
  • #6: この GraphCast の発表を見て予測された気象データを分かりやすく伝えるにはどのように可視化するのがよいのだろうかという点に興味を持ちました。 そこで、弊社でよく使用している 3D 地球儀ライブラリ Cesium を使用して GraphCast の予測気象データの可視化を試してみました。
  • #7: まずGraphCastを使用して実際に気象予測を行ってみました。 GraphCastでの気象予測が実行できるツールが公開されていたのでそちらを使用しました。 実際に気圧をGraphCastで予測してみた結果が左の画像になります。右が実際の気圧ですが、概ね同じような気圧になっており高い精度で予測できていることがわかるかと思います。
  • #8: 気象データを可視化するにあたって、風のように動きがあるものや時系列での変化を表現する場合にはアニメーションでの可視化が効果的です。 そのためGraphCastで予測した気象データをアニメーション可視化してみました。
  • #9: まず、風速の可視化を試してみました。 風速の可視化については、Cesium上で風速をパーティクルアニメーションとして描画する手法がコードとして公開されています。
  • #10: こちらの手法は多次元データの読み込みと表示にも対応しています。気象データですと気圧面や高度などでz軸方向に多次元のデータになっていることがあります。 そこで風速のパーティクルアニメーションを次元ごとに高さを変えて立体的に表示できないか試してみました。
  • #11: 結果としてはうまくいきませんでした。 元のソースコードのパーティクルに対して一律で高さを設定している箇所を改修して、次元ごとに高さを変えるようにしてみましたが、 パーティクル間の重なりについて考慮された表示をしないため立体的に見えませんでした。 そのため今回は風速アニメーションの立体化はあきらめました。
  • #12: 風速以外に可視化アニメーションさせて面白そうな気象データを検討した結果、気圧を可視化してみることにしました。 気圧というと一般的に等高線で表されることが多いですが、等高線では専門知識がないとぱっと見ではわかりにくかったりします。 そこで、同じように等高線で表されることが多い地形の判読に使用されるCS立体図で気圧を可視化し、さらにアニメーションできないか試してみました。 これによって気圧の高低差の変化が分かりやすく表現することが期待できます。
  • #13: 気圧をCS立体図として表示するにあたっては、FOSS4G Japan 2020 onlineで弊社が発表したGeotiff画像を地図タイル化し、Cesium上にWebGLでCS立体図を描画させる手法を用いました。 実際にGraphCastで推論した気圧をCS立体図表示させてみたのが以下の画像になります。気圧の起伏が分かりやすく表示されているのではないでしょうか。
  • #14: さらにCS立体図で表示させた気圧を時系列でアニメーションさせていきます。 アニメーションについては画像レイヤーを重ねて表示して、上から順番に非表示にしていく、古典的なパラパラ漫画の手法で実装しました。 実際にアニメーションさせた動画がこちらになります。 気圧の起伏が時系列で変化していく様子をわかりやすく可視化できたのではないかと思います。
  • #15: 記事の最後におまけとして気圧を3Dで可視化してみていました。 こちらはGeotiff画像から地形タイルを作成して立体的に可視化しています。 表示している画像は2023年8月の台風7号の気圧を立体化させたものですが、台風の部分だけ穴のようになっており気圧がそこだけ非常に低いことがわかり、視覚的にも面白いかなと思います。 ここまでが去年の記事の内容になります。
  • #16: そして、今回何をやったのかというところですが、最後のおまけで気圧を地形タイルにして3Dで可視化したのですが、時間がなかったこともあり3Dでアニメーションさせるところまではできていませんでした。 そこで、今回は気圧データを3Dアニメーションできないか試してみました。
  • #17: Cesiumで3Dアニメーションさせるにはどうすればよいのか実装を模索していたところ、Cesium公式のあるデモを発見しました。 このデモは点群の3Dモデルをカスタムシェーダーによりアニメーションさせるものになります。 この動画を見ていただくと分かるように高速に滑らかに3Dモデルをアニメーションさせています。
  • #18: そこでこのデモのように、気圧データを点群でアニメーションさせることを試してみました。 点群の3Dモデルを用意し、各点を時系列の気圧データに従って高さを変化させてアニメーションさせます。 アニメーションはCesiumのデモと同じようにカスタムシェーダーで実現します。 また、インタラクティブに任意の日時を指定できるようにするため、Cesiumの時系列スライダーで操作できるようにします。
  • #19: こちらを実装するにあたり、主な実装項目としては以下の3つとなります。 1つ目はCesium上に表示する点群の3Dモデルの作成。 2つ目は点群をアニメーションさせるカスタムシェーダーの実装。 3つ目は時系列スライダーの操作により時系列の気圧データを読み込むようにする実装。 これら3つの実装項目についてこれからご説明していきます。
  • #20: まず1つ目の点群3Dモデルの作成についてです。 気圧の時系列データをGeotiffから読み込んで点群3Dモデルに反映させてアニメーションさせます。 この時、点群の頂点とGeotiffの各ピクセルを1対1で対応させて、対応するGeotiffのピクセルの値を点群の頂点の高さなどに反映させる実装を考えました。 これを実現するには、点群の各頂点からGeotiffの対応するピクセルを参照できるようにしなければなりません。
  • #21: そのため点群3DモデルにGeotiffの対応するピクセルの情報を持たせる必要があります。 幸いCesiumに表示可能な3Dモデル形式である「glTF」はその属性情報を保持可能な3Dモデルの形式になります。 そこでGeotiffの属性情報をもつ点群glTFモデルを作成していきます。
  • #22: glTFモデルはGeotiffを元にPythonのスクリプトを組んで生成しました。 まずPythonライブラリのGDALでGeotiffを読み込み、座標情報を3Dモデル用の座標値に変換しました。 座標値の変換には3次元地理座標変換ライブラリであるpymap3dを使用しました。
  • #23: 変換した座標値を持つglTFモデルを作成していきます。 PythonにはglTFの読み書きを行うライブラリがあるのでそちらを使用しました。 3Dモデルの頂点の座標値として先ほど変換した座標値を設定し、さらに対応するGeotiffのピクセルのインデックス情報と後々高さ更新時の位置情報の計算で使用されるWGS84の座標値を属性情報として設定してglTFモデルを書き出します。
  • #24: こうして作成された点群glTFがこちらになります。 GraphCastのGeotiffを元に作成した3Dモデルは全球を覆うような形状となっており、Geotiffの各ピクセルと同じ座標値に点が並んでいます。 また、属性情報として生成元のGeotiffの対応するピクセルのインデックスを保持させることができました。
  • #25: 次に2つ目の実装項目であるカスタムシェーダーについてです。 カスタムシェーダーで気圧の値によって点群モデルの頂点の高度が変わるように実装します。 Cesiumの点群モデルアニメーションのコードを元に実装していきます。 点群の頂点の位置の操作についてはvertexShaderで行います。 以下が実際のコードで、点群モデルの属性情報からGeotiffのインデックス情報を取得して気圧の値を参照し、点群の頂点に新しい高さを設定しています。
  • #26: 点群の高さに加えて色も反映されるようにfragmentShaderを作成します。 取得した気圧値によってCS立体図やカラーマップなどの色を計算して点群の各点に反映させます。
  • #27: 次に時系列データの読み込みについてです。 時系列データはこちらに表示した形式のGeotiffから時系列で読み込もうとしました。 JavascriptライブラリのGeotiff.jsを使用してブラウザから40バンドの時系列データのGeotiffを読み込もうとしたところ、メモリエラーとなってしまいました。
  • #28: そこから試行錯誤した結果、40バンドのGeotiffを1バンドのGeotiff40枚に分離して、1枚ずつ順番に40枚読み込む場合はメモリエラーにはならないことが分かりました。 そのため最終的に、最初に40枚すべての時系列データを読み込む形式で実装しました。 時系列スライダーを動かすと、読み込み済みの時系列データから現在の日時のデータを参照します。
  • #29: ここまでの実装により、時系列気圧データの点群アニメーションができました。 デモを用意しましたので実際の動きをご覧ください。
  • #31: こちらの問題点として、点群であるため近くによってみた場合に点の間が空いてしまっているため、色や起伏が分かりにくい点があります。 そこで、点群のモデルに対して頂点を動かしていましたが、頂点間が面で埋められているメッシュモデルに対しても適用することが可能なのか試してみました。
  • #32: 実装に当たりメッシュ3Dモデルを作成していきます。 点群モデルを作成するPythonスクリプトを改修し、open3dというライブラリで点群をメッシュ化してglTFモデルを作成します。
  • #33: 作成したメッシュモデルがこちらになります。 メッシュの生成がうまくいっていない箇所もありますが、全球を覆うようなメッシュ3Dモデルが作成できました。
  • #34: 先ほどの点群モデルアニメーションをメッシュモデルに差し替えてアニメーションさせてみます。カスタムシェーダーは変更せず、点群モデルに適用したものと同じものを使用しました。 デモを用意しましたので実際の動きをご覧ください。
  • #36: 3Dメッシュモデルでのアニメーションによる可視化ができました。 点群モデルを使用した場合と比較して起伏の変化が分かりやすくなりました。 また、去年のアドベントカレンダーで行った複数枚の画像レイヤーを使用したアニメーションとも比較すると、何十枚と画像レイヤーを重ねていたため動作が重かったのですが、3Dメッシュモデルはそれよりも挙動が軽い結果となりました。 また、リアルタイムでパラメータを変更して反映することも可能です。
  • #37: まとめになります。 今回は気圧データを時系列3Dアニメーションさせてみました。 これにより専門知識が無い人でも気圧の起伏の変化をわかりやすく表現することができました。 今回は気圧という気象データを取り上げましたが、こちらの手法は気象以外でもグリッド形式のデータであれば適用できるため、気象に限らず専門家ではない人にもわかりやすいアニメーション可視化が期待できます。
  • #38: また、今までは全球クラスの時系列データでは2Dで表示することが多く3D表示では動作が重くなってしまう印象がありました。 しかしCesiumのカスタムシェーダーを使用することで従来よりも軽い動作で3D可視化を実現することができました。 実際に今回のアニメーションはGPUがないスマートフォン上でも動作することを確認しております。
  • #39: 今回作成した时系列データの3顿アニメーションのソースコードは骋颈迟丑耻产で公开していますので、兴味がある方はぜひ试してみてください。
  • #40: 最後に今回の実装に当たり、各種オープンソースのGISツールを使用することで比較的簡単に実装することができました。 OSSツールの開発者の皆様ありがとうございました。
  • #41: 発表は以上になります。ご清聴ありがとうございました。