「X をしたいから地図を作って」という依頼ごとに作った例です。ブラウザ用の例は操作できます。表示した性能値はリポジトリのハーネスで測ったものです。 比較計測の条件 ・ GitHub
10 件
forge3d の代表例「Mount Rainier」のように、Mt. Rainier の DEM を 3D 地形として表示し、 オービットカメラで回転・ズームして山体を眺めたい。太陽は西北 302°・高度 24°に固定。 外部ライブラリなし、WebGL2 の 1 ドローコールで最速・最小に実装する。
WebGL2 / TypeScript (型ストリップ配信)
性能は未計測
ソース ・ spec.yaml ・ 設計と計測 ・ 元例 ↗
操作する ↗forge3d の例「Mount Fuji Labels」のように、富士山の地形を 3D で表示し、山頂と登山道の五合目・各合目・ 麓の地名をラベルで載せたい。ドラッグで回り、ホイールで寄れるようにし、山の向こう側に隠れた地名や、 重なってしまう地名は出さない。外部ライブラリなしで、最速・最小に。
WebGL2 (地形) と Canvas 2D (ラベル) / TypeScript (型ストリップ配信)
性能は未計測
ソース ・ spec.yaml ・ 設計と計測 ・ 元例 ↗
操作する ↗forge3d の例「Swiss Land-Cover」のように、スイスの地形に 2024 年の土地被覆 (森林、農地、市街地、草地、 雪氷など) を色で重ね、北西からの陰影で起伏が読めるようにしたい。国境の外は描かず、ほぼ真上から国全体を見せ、 題、出典、凡例を付ける。ドラッグで回り、ホイールで寄れるようにする。外部ライブラリなしで、最速・最小に。
WebGL2 / TypeScript (型ストリップ配信)
性能は未計測
ソース ・ spec.yaml ・ 設計と計測 ・ 元例 ↗
操作する ↗forge3d のギャラリー例「Luxembourg rail network」のように、ルクセンブルクの領土ジオメトリの上に、 主要鉄道網（CFL）のベクターラインを重ね合わせた輸送オーバーレイ地図を表示したい。 ドラッグでパン、ホイールで拡大縮小でき、ラインが地理座標に固定されて追従すること。外部ライブラリなし、Canvas 2D で最速・最小で実装する。
Canvas 2D / TypeScript (型ストリップ配信)
コード 2.7 KB gzip ・ データ 0 KB gzip ・ 初回描画 5 ms
ソース ・ spec.yaml ・ 設計と計測 ・ 元例 ↗
操作する ↗forge3d の例「3D Buildings」のように、オランダの 3D 建物データ (3DBAG の CityJSON タイル 1 枚、デン・ハーグ中心部の 277 棟) を三角形のメッシュにして立体で見たい。地面に 100 m の格子を引き、ドラッグで回り、ホイールで寄れて、 建物をクリックするとその建物の BAG の番号、建築年、高さ、屋根の形を出す。外部ライブラリなしで、最速・最小に。
WebGL2 / TypeScript (型ストリップ配信)
性能は未計測
ソース ・ spec.yaml ・ 設計と計測 ・ 元例 ↗
操作する ↗forge3d のギャラリー例「Point Cloud」のように、セントヘレンズ火山火口（Mt. St. Helens）の 3D LiDAR 点群（10,000点）を、標高・深度カラーマッピングと 3D オービットカメラにより 60 fps で高速に回転・ズーム描画したい。 ドラッグで回転、ホイールで拡大縮小できること。外部ライブラリなし、Canvas 2D で最速・最小で実装する。
Canvas 2D / TypeScript (型ストリップ配信)
コード 2.8 KB gzip ・ データ 45 KB gzip ・ 初回描画 52 ms
ソース ・ spec.yaml ・ 設計と計測 ・ 元例 ↗
操作する ↗forge3d の例「Camera Flyover」のように、レーニア山の地形の上をカメラが飛ぶアニメーションを作りたい。 山頂を回るオービット、登山道を登る人を後ろから追うフォロー、北側を横切るレールの 3 つのカメラワークを切り替えられ、 再生と一時停止、時刻のスライダーで好きな瞬間に飛べる。カメラは地面に潜らない。0°、120°、240° のコマも並べる。 外部ライブラリなしで、最速・最小に。
WebGL2 と Canvas 2D (コマの縮小) / TypeScript (型ストリップ配信)
性能は未計測
ソース ・ spec.yaml ・ 設計と計測 ・ 元例 ↗
操作する ↗forge3d のギャラリー例「Vector export」のように、表示中の地図（ルクセンブルクの 鉄道網）をベクター形式（SVG）として書き出せる地図がほしい。画面の地図は Canvas 2D で 最速・最小に描き、書き出しは表示と同じジオメトリ・色・画面座標で行う。外部ライブラリなし。
Canvas 2D + SVG 文字列出力 / TypeScript (型ストリップ配信)
性能は未計測
ソース ・ spec.yaml ・ 設計と計測 ・ 元例 ↗
操作する ↗forge3d のギャラリー例「Shadow Comparison」のように、Mt. Rainier の DEM から作った 同じ陰影起伏図を、影（キャストシャドウ）なしと影ありで左右に分割表示し、スライダーで 境界を動かして比較したい。パンとホイールズームで地形を動かせること。 外部ライブラリなし、Canvas 2D で最速・最小に実装する。
Canvas 2D / TypeScript (型ストリップ配信)
性能は未計測
ソース ・ spec.yaml ・ 設計と計測 ・ 元例 ↗
操作する ↗forge3d のギャラリー例「Map plate」のように、マウント・レーニア周辺の Mini DEM 標高データに基づく 高精細な陰影段彩レリーフを、二重ニートライン（外枠）、タイトルバナー、方位記号、スケールバー、標高凡例と 統合した完成地図版（Map Plate）として表示したい。ドラッグでパン、ホイールで拡大縮小でき、 枠と家具が正確に配置されること。外部ライブラリなし、Canvas 2D で最速・最小で実装する。
Canvas 2D / TypeScript (型ストリップ配信)
コード 3.8 KB gzip ・ データ 19 KB gzip ・ 初回描画 44 ms
ソース ・ spec.yaml ・ 設計と計測 ・ 元例 ↗
操作する ↗