A real-time GPU-accelerated galaxy simulation using WebGPU, Three.js, and TSL (Three.js Shading Language). Experience an interactive spiral galaxy with up to 750,000 particles, dynamic bloom effects, and customizable parameters.

• GPU-Accelerated Physics - Particle simulation runs entirely on the GPU using WebGPU compute shaders
• Interactive Controls - Click and drag to interact with the galaxy using mouse forces
• Real-time Parameters - Adjust galaxy properties in real-time with Tweakpane UI
• Bloom Post-Processing - Beautiful HDR bloom effects for enhanced visuals
• Procedural Generation - Spiral arm generation with configurable parameters
• Dust Clouds - Realistic nebula clouds with alpha-blended particles
• Starfield Background - Spherical starfield with color variation

Visit the live demo at: https://dgreenheck.github.io/webgpu-galaxy/

• Three.js (WebGPU) - 3D rendering engine with WebGPU backend
• TSL - Three.js Shading Language for GPU compute shaders
• Vite - Fast build tool and dev server
• Tweakpane - UI controls for parameter adjustment

• A browser with WebGPU support (Chrome 113+, Edge 113+, or other compatible browsers)
• GPU with WebGPU capabilities

npm install

npm run dev

Open your browser to http://localhost:5173 (or the port shown in the terminal).

npm run build

The built files will be in the dist directory.

npm run preview

• Left Mouse Drag - Orbit camera around galaxy
• Right Mouse Drag - Pan camera
• Mouse Wheel - Zoom in/out
• Click & Drag on Galaxy - Apply force to particles
• Right Panel - Adjust galaxy parameters in real-time

• Star count
• Rotation speed
• Spiral tightness
• Arm count
• Arm width
• Randomness
• Galaxy radius and thickness

• Particle size and brightness
• Color gradients (dense vs sparse regions)
• Bloom strength, radius, and threshold
• Cloud count, size, and opacity

• Mouse force strength
• Mouse interaction radius

MIT

Built with Three.js and WebGPU