https://github.com/demskie/webgpu-galaxy-simulator
Interactive, GPU-accelerated galaxy simulator built with TypeScript and WebGPU
https://github.com/demskie/webgpu-galaxy-simulator
gpgpu simulation typescript webgpu
Last synced: 5 months ago
JSON representation
Interactive, GPU-accelerated galaxy simulator built with TypeScript and WebGPU
- Host: GitHub
- URL: https://github.com/demskie/webgpu-galaxy-simulator
- Owner: demskie
- License: mit
- Created: 2025-07-16T05:56:49.000Z (11 months ago)
- Default Branch: main
- Last Pushed: 2025-12-15T07:50:53.000Z (6 months ago)
- Last Synced: 2025-12-18T05:34:53.947Z (6 months ago)
- Topics: gpgpu, simulation, typescript, webgpu
- Language: TypeScript
- Homepage: https://demskie.github.io/webgpu-galaxy-simulator/
- Size: 160 KB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# WebGPU Galaxy Simulator
An interactive GPU-accelerated galaxy simulator built with TypeScript and WebGPU. Tweak astrophysical and rendering parameters live, explore presets, and profile performance.
[](https://www.youtube.com/embed/EqLCjZXcEWg)
## Features
- Real-time particle-based galaxy rendering with WebGPU
- Temporal accumulation with 16-slice ring buffer for smooth visuals
- Post-processing: HDR, bloom, tone mapping, exposure/saturation controls
- Overdraw limiting and optional overdraw heatmap
- Extensive UI with live sliders and preset management (create, save, rename, delete, export)
- Built-in CPU/GPU timing and VRAM usage estimates (advanced options)
## Browser requirements
- A browser with WebGPU support (https://caniuse.com/webgpu)
- Chrome 113+ recommended
- Safari 26+
- Firefox 141+ (behind flag)
- If the app reports “WebGPU not supported,” switch to a supported browser and ensure the page loads over HTTPS.
## Quick start (local)
```
npm install
npm run dev
Visit http://localhost:8080
```
## Scripts
- Start local dev server with `npm run dev`
- Dev build to `public/` with `npm run build`
- Prod build to `public/` with `npm run prod`
## Using the app
- The canvas auto-scales and the simulator starts on load.
- Use the left/right control panels to tune:
- Galaxy shape and distribution (radius, spiral parameters, densities, counts)
- Star/dust sizing and brightness
- Temperature and color response
- Rendering parameters (exposure, saturation, bloom, tone map curve)
- Performance controls (temporal accumulation, framerate limit, overdraw)
- Presets
- Backed by `localStorage` under key `galaxy-presets`
- Buttons let you Save/Reset/Create/Rename/Delete/Export
- Default presets come from `src/galaxy-presets.json`
- Advanced options
- Toggle shows GPU timings, VRAM estimates, and debug tools
- Setting is saved in `localStorage` as `showAdvancedOptions`
## Project structure (key parts)
```
public/
index.html, styles.css, galaxy-simulator-bundle.js (build output)
src/
index.ts # App entry; bootstraps GalaxySimulator
GalaxySimulator.ts # Orchestrates managers, main loop
entities/Galaxy.ts # Galaxy model, presets, localStorage
managers/ # Camera, FPS, Resource, Rendering, UI, Accumulation
compute/Particles.ts # Compute pipeline populating particle buffer
resources/ # GPU resource managers (MSAA, HDR, Bloom, ToneMap, etc.)
shaders/ # WGSL shaders (core, compute, postprocessing)
utils/ # Packing, math, helpers
```
## Troubleshooting
- “WebGPU not supported”
- Use a recent Chrome/Edge, ensure HTTPS, or enable WebGPU in your browser flags/preferences
- Black screen or no stars
- Ensure your GPU/driver supports WebGPU; try lowering star count and enabling performance mode
- Sudden dimming/ghosting after changing presets
- Accumulation ring buffers are cleared automatically; one frame may appear darker as weights reset
- GPU timing shows N/A
- `timestamp-query` isn’t available on your device; CPU timing still works
## Development notes
- TypeScript + webpack 5; bundles to `public/galaxy-simulator-bundle.js`
- Uniform packing shared via `src/utils/GalaxyUniformPacker.ts` and `src/constants/uniformLayout.ts`
- Temporal accumulation ring uses 16 RGBA16F layers blended via `postprocessing/accum.average.frag.wgsl`
- Switching presets forces a clear of the 16 layers to avoid ghosting from stale data
- Overdraw counting uses an atomic buffer and can be visualized with the debug shader
- `Max Overdraw = 4096` disables overdraw buffers and overdraw debug (performance mode)