「X をしたいから地図を作って」という依頼ごとに作った例です。ブラウザ用の例は操作できます。表示した性能値はリポジトリのハーネスで測ったものです。 比較計測の条件 ・ GitHub
2 件
地図上の地点をクリックしたときに表示する rich popup を DOM overlay や Canvas 自前描画ではなく、 HTML-in-Canvas（WICG drawElementImage）で実 HTML として Canvas 内に描画・操作できることを検証したい。
Canvas 2D + HTML-in-Canvas (CanvasDrawElement) / TypeScript (erasableSyntaxOnly)
コード 8.0 KB gzip ・ データ 1 KB gzip ・ 初回描画 712 ms
ソース ・ spec.yaml ・ 設計と計測 ・ 元例 ↗
操作する ↗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 ・ 設計と計測 ・ 元例 ↗
操作する ↗