| 最小 | 212.49 | 5% | 216.99 |
| 最大 | 230.96 | 50% | 221.12 |
| 範囲 | 18.48 | 95% | 227.39 |
| ファイル | 参照フォルダ | 内容 | 技術的位置づけ |
|---|---|---|---|
| 写真点群.laz | Metashape成果フォルダ | UAV写真測量による3次元点群 6,231,929点 66.6MB |
標高データの源。点群をグリッドビニングして1050x1020セルの標高メッシュを生成 |
| 数値写真 サイズ10K.tif | Metashape成果フォルダ | 高解像度オルソモザイク画像 GeoTIFF 約245MB |
3D地形にテクスチャマッピングする航空写真。GeoTIFF座標で自動位置合わせ |
| scheme.prj / .kml | Metashape成果フォルダ | 座標系定義ファイル | JGD2011 平面直角座標第II系 (EPSG:6670) を定義。全データの空間参照 |
| レポート.pdf | Metashape成果フォルダ | Metashape処理レポート | 座標系・処理パラメータ・標定結果等の記録 |
本ビューアの3D地形モデルは、正規格子（グリッド）ベースの三角形メッシュで構成されています。
不整三角網（TIN）ではなく、点群を等間隔の格子に変換し、各格子を対角線で2つの三角形に分割する方式です。
| # | 構成要素 | 内容 | 使用データ |
|---|---|---|---|
| 1 | 標高グリッド | LAZ点群を 1050×1020 セルの等間隔格子に分割し、各セル内の点群平均標高を算出（グリッドビニング） | 写真点群.laz 6,231,929点 |
| 2 | 三角形メッシュ | 格子の各マスを対角線で2分割し三角形を生成（PlaneGeometry）。点群が存在しない範囲はマスク処理で除去し、地形の輪郭を形成 | （標高グリッドから自動生成） |
| 3 | テクスチャ | GeoTIFFオルソ画像を3D地形面に貼り付け。座標系が同一（EPSG:6670）のため回転・縮尺の調整不要で自動位置合わせ | 数値写真 サイズ10K.tif GeoTIFF |
| 4 | 頂点カラー | 標高値を色に変換。表示モード（標高カラー・傾斜量図・微地形強調等）に応じて各頂点の色を切替 | （標高グリッドから計算） |
| 5 | 陰影起伏 | 地表面の法線ベクトルと仮想太陽光の内積で陰影を計算。地形の凹凸を視覚的に強調 | （標高グリッドから計算） |
| 6 | 三角網表示 | 三角形メッシュの辺を黒線で描画（「三角網」チェックボックスで表示切替） | （メッシュ構造の可視化） |
| 7 | ライティング | 環境光 + 指向性光源×2 による立体感の付与（Phong陰影モデル） | （レンダリング設定） |
処理の流れ:
LAZ点群 6,231,929点 → グリッドビニング 1050×1020セル → 三角形メッシュ → マスク適用 有効850,732セル → テクスチャ/色付け → Three.jsで3D表示
※ グリッドのセルサイズは点群の範囲（92.8m × 90.1m）を格子数で割った値。
※ 「三角網」チェックONで、三角形の辺が黒線で確認できます。
Metashape成果の全出力（点群・オルソ・DSM）は同一座標系 EPSG:6670を共有。
そのため回転=0°、スケール=100%、オフセット=0で自動位置合わせが成立。手動調整は不要。
| 技術 | 用途 |
|---|---|
| Three.js r0.160 | WebGL 3Dレンダリング（PlaneGeometry + OrbitControls） |
| CanvasTexture + sRGB | オルソ画像の正確な色再現（頂点カラー方式では色褪せが発生するため） |
| laspy + チャンク読込 | 2GB超の.lazファイルをメモリ効率的に処理（500万点/チャンク） |
| GeoTIFFクロップ | オルソ画像を点群範囲でピクセル精度でクロップ |
| 陰影起伏解析 | 地表面の法線ベクトルと仮想太陽光の内積で陰影を計算 |
| モード | 内容 |
|---|---|
| オルソ画像 | 航空写真をそのまま3D地形にマッピング |
| オルソ＋陰影 | 航空写真 × 陰影起伏（地形の凹凸が強調される） |
| 標高カラー＋陰影 | 標高値を色分け + 陰影起伏 |
| 傾斜量図 | 地表の傾斜角度を可視化 |
| 微地形強調（CS風） | 曲率+傾斜で微細な地形変化を検出 |
| 操作 | 機能 |
|---|---|
| 左ドラッグ | 回転 |
| 中ドラッグ / 右ドラッグ | パン（平行移動） |
| 両ドラッグ（左右同時押し） | ズーム（上→拡大、下→縮小）※Jw_cad風 |
| マウスホイール | ズーム |
| 左クリック | その地点の標高値を表示 |
| 右クリック | 標高表示を消去 |
| 中ボタンダブルクリック | 初期視点にリセット |
3Dモデルの周囲に、国土地理院の地図タイルを3D背景として表示しています（中央は地形モデル本体）。
| 項目 | 内容 |
|---|---|
| 航空写真 | seamlessphoto シームレス空中写真（z=16, 約2.4m/px） |
| 標準地図 | std 電子国土基本図・標準地図（z=16） |
| 標高データ | dem5a_png 5mメッシュDEM → 3D地形化（z=15） |
| 表示範囲 | 3Dモデル周囲の約3倍エリアを立体表示（中央くり抜き） |
| 座標変換 | pyproj EPSG:6670 → WGS84 |
| 用途 | 地区周辺の地形・道路・建物等の立体的な位置関係を把握 |
出典: 国土地理院（https://maps.gsi.go.jp/development/ichiran.html）
この地図の作成に当たっては、国土地理院長の承認を得て、同院発行の基盤地図情報を使用した。
本ビューアは、Claude Code（Anthropic社のAIプログラミングアシスタント）が、Pythonスクリプト
generate_3d_viewer.py を自動生成・更新し、Metashape成果データ（.laz点群・GeoTIFFオルソ・GCP座標等）を
読み込んで、単一HTMLファイル（Three.js 3Dビューア）に変換する方式で開発されています。
開発者が要件や修正を日本語で指示すると、Claude Codeがコードの調査・設計・実装・検証を一貫して行い、 Playwright自動テストによる品質保証まで含めて1つのワークフローとして実行します。
今後、別の地区・工区でも同じ方式で3Dビューアを作成できます。必要なデータ（.laz点群・GeoTIFFオルソ・SIMA座標等）を用意し、 同様の手順でPythonスクリプトを実行すれば、新しい3Dビューアを自動生成できます。
本ビューアは GitHub Pages を利用してインターネット上に公開されています。
| 項目 | 内容 |
|---|---|
| GitHubとは | プログラムのソースコードをバージョン管理・共有するためのクラウドサービス（Microsoft社） |
| GitHub Pagesとは | GitHubのリポジトリ（保管庫）にHTMLファイルを置くだけで、Webサイトとして無料で公開できる仕組み |
| 仕組み | ① Pythonスクリプトが単一HTMLファイルを生成 → ② GitHubリポジトリにアップロード（push） → ③ GitHub Pagesが自動的にWebサイトとして配信 |
| URL | https://toku1107-cyber.github.io/tokunaga-3d-terrain/ |
| アクセス | GitHub PagesのPUBLICリポジトリなのでURLを知っていれば誰でもアクセス可能 |
| 更新方法 | Claude Codeが新しいHTMLを生成し、GitHubにpushすると数分で自動反映 |
Claude Codeは、作業中に遭遇した問題・解決策をスキルファイル（.agent/skills/）として自動記録します。
スキルは「過去の経験の結晶」であり、次回同種の作業を行う際に同じ失敗を繰り返さないための仕組みです。
本ビューアの開発では、以下のスキルが具体的に活用されました。
| スキル名 | 格納先 | 本ビューアへの具体的な貢献 |
|---|---|---|
| 3d-terrain-ortho-viewer | .agent/skills/3d-terrain-ortho-viewer/ |
本ビューアの中核スキル。LAZ点群→グリッドビニング、GeoTIFFアライメント、Three.js PlaneGeometry、CanvasTexture sRGB色補正、陰影起伏解析など、全ての3D表示技術の知見を蓄積。 新しい地区で作成する際、このスキルを読み込むことで初回と同じ試行錯誤を回避できる |
| 10-agent-architecture | .agent/skills/10-agent-architecture/ |
品質保証ワークフロー。PM（要件整理）→ アーキテクト（調査）→ ディスパッチャー（タスク分割）→ 実装 → セルフレビュー → QAの一貫プロセスを適用。 「いきなりコードを書かない、まず調査」の原則により、既存コードとの整合性を確保 |
| windows-terminal-emoji-encode-fix | .agent/skills/windows-terminal-emoji-encode-fix/ |
Windows環境でのPython実行時、cp932エンコードエラーを回避。sys.stdout.reconfigure(encoding='utf-8')をスクリプト冒頭に必ず適用するルール |
| no-overconfidence-protocol | .agent/skills/no-overconfidence-protocol/ |
「原因が特定できました」の禁止ルール。AIが100%の断定をせず、仮説ベースで報告する義務。 「修正します→できていません」の往復ループを防止 |
| excel-screenshot-verification | .agent/skills/excel-screenshot-verification/ |
スクリーンショットによる目視検証手法を、HTMLビューアの品質確認に応用。 Playwrightでスクリーンショットを撮影→Read toolで画像確認→レイアウト崩れ等を検出 |
スキルの仕組み: 難航した経験（差し戻し2回以上、試行錯誤30分以上等）が自動的にスキルとして記録される。 次のセッションでClaude Codeは作業前にスキルを読み込み、「前回のハマりポイント」を事前に把握して着手するため、同じ問題での停滞が激減する。
別の地区・工区でも同じ方式で3Dビューアを作成できます。以下に、人間側の準備とClaude Codeへの指示方法をまとめます。
| # | ファイル | 入手元 | 必須/任意 | 備考 |
|---|---|---|---|---|
| 1 | 写真点群.laz | Metashape成果 | ★必須 | 2GB超でも処理可能（チャンク読込） |
| 2 | 数値写真（オルソ）.tif | Metashape成果 | ★必須 | サイズ10K推奨。GeoTIFF形式（座標埋込） |
| 3 | scheme.prj / .kml | Metashape成果 | ★必須 | 座標系定義。オルソTIFと同じフォルダ |
| 4 | GCP/SIMA座標 | 現場測量 | 任意 | 基準点・水準点を地図上に表示 |
| 5 | 筆界データ | G空間情報センター | 任意 | 登記所備付地図XML（ZIP形式） |
| 6 | 路線データ | 路線測量SIMA | 任意 | 結線情報ありのSIMAファイル |
新しいセッションで以下をコピペして貼り付けるだけで、Claude Codeが作業を開始します。
【】内を実際のパスに置き換えてください。
3D地形ビューアを作成してください。 CLAUDE.mdを厳守してください。 ■ スキル読込（最初に必ず実行） .agent/skills/3d-terrain-ortho-viewer/SKILL.md ■ 作業フォルダ 【G:\マイドライブ _MyAI_Workspace\...\作業フォルダ名】 ■ 入力データ - 点群: 【フォルダ内の】写真点群.laz - オルソ: 【フォルダ内の】数値写真 サイズ10K.tif - 座標系: 【フォルダ内の】scheme.prj, scheme.kml - GCP: 【パス】.sim （任意） - 筆界: 【パス】.zip （任意・G空間情報センター） - 路線: 【パス】.sim （任意・結線ありSIMA） ■ 出力 - 単一HTMLファイル（Three.js 3Dビューア） - GitHub Pages配信（希望する場合） ■ 地区名・タイトル 【例: (有)徳永測量 社屋】 / 【例: R7○○地区】
作業中に以下のような質問をする場合があります。事前に把握しておくとスムーズです。
| 質問 | 意味 | 回答例 |
|---|---|---|
| SIMA座標系は平面直角II系ですか？ | 座標の解釈に必要 | 「はい、II系です」 |
| 筆界ZIPに複数地域が含まれますが対象は？ | 必要な範囲を絞り込む | 「対象地区周辺のみ」 |
| 路線のZ値は計画高ですか、現況高ですか？ | 表示方法に影響 | 「全てZ=0なので地形に沿わせて」 |
| GitHub Pagesで公開しますか？ | インターネット公開の要否 | 「はい」/「今回は不要」 |
| 国土地理院背景は必要ですか？ | 周辺の地図表示 | 「はい、航空写真+標準地図」 |
生成: generate_3d_viewer.py (v23) | Metashape成果データ → HTML変換
(有)徳永測量 社屋 — 自社案件