Skip to content
fangdePublic

About

Interactive 3D physics simulation powered by WebGPU

Resources

Stars

1 star

Watchers

0 watching

Forks

Latest commit

 

History

1 Commit

Folders and files

NameName
Last commit message
Last commit date
 
 
 
 

Repository files navigation

Genesis — WebGPU 3D Physics Simulation

An interactive 3D physics simulation environment powered by WebGPU with real-time gravity, collisions, and dynamic object spawning.

WebGPU Three.js Physics

✨ Features

  • WebGPU Rendering — Cutting-edge GPU-accelerated graphics via Three.js WebGPU renderer
  • Real-time Physics — Gravity, collisions, friction, and bounciness powered by cannon-es
  • Interactive Spawning — Click on the ground or press Space to spawn objects
  • Multiple Shapes — Cubes, spheres, and cylinders with randomized colors
  • Adjustable Parameters — Gravity, object scale, and bounciness sliders
  • Auto-spawn Mode — Toggle continuous object rain
  • Visual Effects — Glowing spawn animations, dynamic colored lights, ambient particles
  • Sci-fi Aesthetic — Dark theme with glassmorphism UI and cyan grid floor

🚀 Getting Started

Prerequisites

A browser with WebGPU support:

  • Chrome 113+ (enabled by default)
  • Edge 113+ (enabled by default)
  • Firefox Nightly (with dom.webgpu.enabled flag)

Run Locally

Since the app uses ES modules, it needs to be served over HTTP:

# Using npx (no install needed)
npx serve .

# Or Python
python -m http.server 3000

# Or any static file server

Then open http://localhost:3000 in your browser.

🎮 Controls

Input Action
🖱️ Click ground Spawn object at cursor
⌨️ Space Spawn random object
⌨️ R Reset scene
🖱️ Drag Orbit camera
🖱️ Scroll Zoom in/out

🛠️ Tech Stack

  • Three.js (WebGPU renderer) — 3D rendering
  • cannon-es — Physics engine
  • Vanilla HTML/CSS/JS — Zero build step

📄 License

MIT

About

Interactive 3D physics simulation powered by WebGPU

Resources

Stars

1 star

Watchers

0 watching

Forks

Releases

Packages

Contributors

Languages