WebGPU Example

Minimal scaffold:

• WebGPU overlay (visibility pass placeholder)
• CesiumJS globe underlay (terrain)
• Comlink worker skeleton
• WebSocket + Apache Arrow client
• Zustand state

Quick start

pnpm i   # or npm/yarn
pnpm run mock:server
pnpm run dev

Visit http://localhost:5173 . You should see Cesium globe and the overlay renderer running (black transparent canvas).

Notes

• Set CESIUM_BASE_URL (configured in vite.config.ts). Copy Cesium Build/Cesium/Assets, Widgets, ThirdParty to public/cesium or serve via CDN.
• WebGPU demo draws a full-screen triangle; replace with visibility buffer + depth pyramid as you build.
• The mock WS sends a tiny Arrow table every second; hook it into your worker to build tiles/LODs.

Source map

• src/render/webgpu/spheres.ts — pipelines, buffers, textures, frame orchestration.
• src/render/webgpu/shaders/* — prepass, pyramid, cull, mesh.
• src/render/webgpu/OverlayRenderer.tsx — RAF loop & resize/controls.
• src/layers/CesiumLayer.tsx — background globe.
• src/state/store.ts — Zustand state.

HZB Culling of Instanced Spheres

See this page

Optimizations TODO

• Test 256 invocations per workgroup in depthPyramid.