map-from-scratch / WebGPU

「X をしたいから地図を作って」という依頼ごとに作った例です。ブラウザ用の例は操作できます。表示した性能値はリポジトリのハーネスで測ったものです。 比較計測の条件 ・ GitHub

4 件

• htmlcanvas-002-webgpu-map-label

  WebGPUHTML-in-Canvas

  HTML-in-Canvas（WICG drawElementImage）で生成した実 HTML ラベルカードを WebGPU レンダリングパイプラインへ取り込み、 地図上のラベルとして GPU インスタンス描画し、パン・ズーム時に HTML の再レイアウトやテクスチャ再アップロードなしで追従させたい。

  WebGPU + HTML-in-Canvas (CanvasDrawElement) / TypeScript (erasableSyntaxOnly)

  コード 11.4 KB gzip ・ データ 1 KB gzip ・ 初回描画 1693 ms

  ソース ・ spec.yaml ・ 設計と計測 ・ 元例 ↗

  操作する ↗
• webgpu-001-gpu-driven-culling

  WebGPU

  PLATEAU 東京駅周辺 3,992 棟の 3D 建築物モデルに対し、WebGPU の Compute Shader で視錐台カリングを行い、 生存した建物を drawIndexedIndirect で一括描画する GPU-driven レンダラーを作りたい。 CPU 側からの個別 draw call 発行とカリング判定を完全に剥がし、ドラッグで視点周回できるようにする。

  WebGPU / TypeScript (型ストリップ配信)

  コード 6.8 KB gzip ・ データ 27 KB gzip

  ソース ・ spec.yaml ・ 設計と計測 ・ 元例 ↗

  操作する ↗
• webgpu-002-vertex-pulled-roads

  WebGPU

  東京23区の道路線形を WebGPU で描画し、CPU 側で line tessellation / vertex expansion を行わず、 道路ノード列を storage buffer に保持して、Vertex Shader が vertex_index から前後ノードを参照して 画面空間の太線・join・cap を生成したい。

  WebGPU / TypeScript (型ストリップ配信)

  コード 5.9 KB gzip ・ データ 417 KB gzip

  ソース ・ spec.yaml ・ 設計と計測 ・ 元例 ↗

  操作する ↗
• webgpu-003-subgroup-density

  WebGPU

  東京23区の OSM 全域からサンプリングした 104 万点（1,048,576 点）の点密度を WebGPU Compute Shader と Subgroups（SIMD レーン集約）を用いて GPU 上で直接 2D グリッド（512x512）に集計・平滑化し、 Turbo カラーマップのヒートマップとして 60 fps で滑らかに再描画したい。

  TypeScript (erasableSyntaxOnly)

  コード 5.5 KB gzip ・ データ 3614 KB gzip ・ 初回描画 183 ms

  ソース ・ spec.yaml ・ 設計と計測 ・ 元例 ↗

  操作する ↗