QGISにおける3D活用術

QGISには3D機能がデフォルトでついていますが、専門的な要件には使いずらい場面もあり、カスタムな3D表現が可能なPlugin開発手法についてご紹介します。
また、今回はCodex CLI やClaude Code等を使用した"Vibe Coding"（雰囲気コーディング）をメインとして開発しておりましたので、GIS開発などの実務におけるAI駆動開発のTIPSなどもお話いたします。

Transcript

1. ノーザンシステムサービス 研究開発部 板垣 沙映 QGISにおける3D活用術
2. 自己紹介 ▎氏名 板垣 沙映 ▎所属 株式会社ノーザンシステムサービス （2025年4月入社） ▎出身 岩手県滝沢市 ▎趣味 ポケモンカード・マイクラ ドライブ（ラーメン屋巡り・海） 馬にニンジンあげること
3. 背景 2023年福井県開催のFOSS4Gでの弊社の発表 https://speakerdeck.com/nssv/foss4g-2023-japan-at-fukui-ta-tian-ti- niokerucesium-nohuo-yong-cesium-woshi-tutexiao-huo-xing-nixing-kou
4. 今回の発表について 他天体3Dモデルと QGISのレイヤが 連動するプラグインを 作ってみたい！ QGIS標準の 3Dマップビュー機能！ 3Dで連動するものといえば…
5. QGIS標準の3D機能 • OBJなどの3Dファイルを読み込むことができない • 「他天体」の扱いは難しい • DEMやメッシュ、点群などの地形表現 • 鉛直誇張・スカート・タイル解像度設定・光源・影 • 2D⇄3D同期やカメラ できない できる 他の手法はないのだろうか？？
6. 3D機能とQGISが連動可能な技術 PyVista ◆ 主環境 Python（VTKベース） ◆ プラグイン例 PyGIS ◆ 特徴 • 自前の3Dレンダリングエンジンで描画 • 構造格子、非構造格子、体積データ、点群など、 学術データを扱うことが得意 Three.js ◆ 主環境 JavaScript（WebGL/WebGPU） ◆ プラグイン例 QGIS2threejs ◆ 特徴 • WebGLを利用するブラウザ向けレンダリングラ イブラリ • Webエンジン上で動作する Three.jsで使用している、 WEBエンジンを使用してCesiumを活用する手法！
7. 今回の発表について QGIS メジャー バージョン 休日 メジャー ビール 入社したての私が作成した議事録… 知識ゼロの新人がどうやって開発するの………
8. 今回の発表について そこでAI支援による開発に取り組む 入社半年 知識・経験ゼロ “Vibe cooding” （雰囲気コーディング） 人間が自然言語でAIに指示を与え、指示をもとにAIが、 自律的にファイル作成やコードを書いていくコーディン グスタイル。 Codex CLI OpenAIより発表された、AIコーディングエージェント であり、ターミナル上で動作し、自然言語での対話形式 で操作して開発が可能。
9. 開発の準備・初回実装
10. 実装前の準備 開発する機能仕様の認識を合わせる 要件書を読ませ機能仕様を確認させる 指示があいまいでも 仕様に関しては 最初のやり取りで 詰めていける QGISのプラグインを開発してもらいます。 WEBエンジンを使ってCesiumで3Dビュー表示をしたいと考えています。 実装前に以下の仕様書を確認してください。 (仕様書パス貼り付け) 実際の指示例 実装上の不明点について質問させる 不明点について返答
11. AGENTS.mdとは？ ◆概要 • コーディングエージェントが作業時に自動的に読み込むファイル。 • コーディングエージェントに向けて作業ルールを書いておくもの。 ◆記載する内容 • コード規約やフォルダ構成、ビルド/テスト方法、禁則事項など • よく使うコマンド READ.me AGENTS.md CLAUDE.md 人間 Codex Claude Code
12. AGENTS.mdに追加した内容(一例) ## YOU MUST - 回答は日本語で行うこと。 - あいまいな点に関しては質問を優先すること。 - 勝手に実装を進めないこと。 参考記事：https://zenn.dev/solvio/articles/b53d24a41e6d5b
13. 実装結果
14. 実装結果 簡単な指示・短いステップで それっぽいものが作られた！ ここからが地獄の始まり この調子で簡単にできるのでは？
15. 失敗例1
16. 失敗例１ 一見完璧そうに見える…
17. 失敗例１ Cesiumのコア機能を使用せずプリミティブなポリゴンなどを直接表現 “人間には思いつかないかなりトリッキーなコード” Cesiumを使っているがglobe機能をパスしており 扱いにくいためお蔵入りに… テクスチャはすべてUV座標を計算し、計算した座標にテクスチャを 貼るといった複雑な処理
18. 失敗例2
19. 指示を具体的にする 今までの経験をもとに指示内容を具体化 過去の発表 2023年福井開催FOSS4Gでの弊社の発表… 「他天体におけるCesiumの活用」 →Cesium.Ellipsoid.WGS84 = ellipsoid; 指示追加 OBJから エリプソイド定数（楕円体定数）を 計算し、Cesiumのデフォルト楕円体定数を上書き。DEMを作成 して地形としてCesium上に表示して。
20. 失敗例2 DEMの計算をうまく実装できず地形がいびつになった 表示された3Dモデル DEMの計算手法を指定するもうまくいかず… 画素値（RGB値）から標高値h（m）の計算式は下記の とおりです。 ・x = 216R + 28G + B ・x < 223の場合 h = xu ・x = 223の場合 h = NA ・x > 223の場合 h = (x-224)u uは標高分解能（0.01m）を表します。また、無効値 （標高タイル（テキスト形式）の「e」に該当する箇 所）は(R, G, B)=(128, 0, 0)です。 参考:地理院地図｜標高タイルの詳細仕様
21. 失敗例3
22. 失敗例3
23. 失敗例 ## ユーザーに報告・説明する際は以下の点に気を付けること - ユーザーはプログラミングや3D技術、GISの知識があまりありません。 - ユーザーの知識・技術向上につながるような説明・報告をすること。 - ユーザーが理解できるように分かりやすく丁寧に説明・報告すること。 「平均海面コード（MSL）」を本来の意味（ジオイド等を参照）で使い たいご意図でしょうか？もし真のMSL基準へ変更したい場合は、どの MSL/ジオイド定義を使うか、あるいはゼロセンタリングをやめて楕円 体差そのままを使うかをご指定ください。 エージェントからの質問例 AGENTS.mdに追加した内容 エージェントの質問や報告内容を理解できない…
24. 失敗例4
25. 失敗例4 “標高PNG”を”標準PNG”と指示文を誤字ってしまった
26. 3Dモデルを表示するためにしたこと
27. DEMの計算手法を整える 他のエージェントにプログラムを評価させ、修正 ：Codex1のコード ：Codex2が評価・修正 OBJから作成された標高PNG OBJから作成されたDEM
28. 3Dビューにテラインを表示 指示の工夫 ・現状の問題や修正後の理想を丁寧に説明 ・デバックを送り、より現状を把握させる ・計算などの手法を細かく説明 Vibe Coodeing の限界 ・雰囲気だけでの自然言語の指示が通用しない ・現状の修正ではなく新しい手法の提案をされる ・原因となる細かいところまで目が行き届いてい ない が、しかし何も表示されない
29. 3Dモデルを表示 人間（優しい上司）が実際にソースコードを見て修正 → 楕円体の半径（縦,横,高さ）を別の値で定義 Cesiumの仕組みは「丸い地球」を前提にしているため、 縦横高さの比率が異なる値ではCesiumの仕組みが崩れてしまう！！！
30. 3Dモデルを表示 この問題についてはCesiumの開発者も言及！ 表示された3Dモデル https://community.cesium.com/t/use-custom-ellipsoid-when-generating-3d-terrain- on-cesium-ion/4299/3
31. QGISと連携する機能追加と失敗例
32. QGISとの連携 2D(QGIS)上のレイヤを3D上に表示する機能の追加 2D上でベクターやラスターを作成 レイヤ選択（複数選択可） 3Dモデル上に表示 操作手順：
33. 失敗例4 ベクターをGeoJSONで表示しようとするも表示されない • エリプソイドの定数を定義する場所ではないか？ • 非同期で読み込まれており、全部のDEMが計算 される前にベクタを表示することで地下に埋もれ ているのではないか？ • シンプルなエンティティのポリラインはどうか？ 条件を絞るもダメ プリミティブだと表示〇 エージェントの諦め宣言： 「イメージプロバイダーでやりませんか？」
34. 失敗例4 関係ないと思っていたCORSエラーが原因だった！ デバックモードで見てみると… エンティティクラスでJSONなどの外部のアセットが CORSエラーでよみこめない。 見事エンティティが表示されるように！！！
35. プラグインでWEBエンジンを初期化する際の例 一般的なWEB開発では起こらないが、 ローカルのQGISでWEBエンジンを使う際には問題となる可能性がある。
36. QGISとの連携 ベクターはGeoJSON・ラスターはimageryprovider
37. デモ
38. デモ
39. まとめ
40. Vibe coodingで重要なこと エージェントへ理解させる ◆ エージェントと人間の認識を合わせる • 具体的かつ階層的な指示 • 不明点は質問させ、独断で進めないよ うに制御 ◆ エージェントへのアドバイス • 〇〇を修正してだけでは修正できない ことがよくある • 原因の検討や手法の指定等をしてあげ ることで解決！ 人間が理解する ◆ エージェントの報告・確認を理解する • 指示にない手法を実装していないか • 確認事項として開発方針を提案や確認 されることがある • 質問に適切に答えないことでエージェ ントの判断で実装が進むケース • 他者への説明責任 ◆ コードを読める能力も必要 • 人間が修正したほうが速いケース より専門的な分野の開発には… バックボーンとなる知識を持って協調的に開発！
41. バックボーンとなる知識を身に着けるために… 「GISオープン教材」で学習を進める！！！ GISの基本知識を身に着ける AIとの協調的な開発に！ 学習には「GISオープン教材」 にお世話になりました！ 質の良い指示・回答 https://gis-oer.github.io/gitbook/book/
42. 最後に 知識・経験ゼロの新人でも開発できた！！！ だが、しかし… 正しい基礎知識 正しいAIの使い方 上司の経験・知識 来年はもっと成長してこの場に立てるように頑張ります！
43. QGISにおける3D活用術 2025/10/10 株式会社ノーザンシステムサービス 板垣 沙映