WebGPU SDF

A WebGPU-based signed distance field (SDF) renderer with interactive shape manipulation.

Requirements

• A modern browser with WebGPU support (Chrome 113+, Edge 113+, or Safari 18+)
• A local web server (required to load shader files)

Running the Project

Option 1: Python HTTP Server

python3 -m http.server 8000

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

Option 2: Node.js HTTP Server

If you have Node.js installed:

npx http-server -p 8000

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

Option 3: VS Code Live Server

If you're using VS Code, install the "Live Server" extension and click "Go Live" in the status bar.

Features

• Interactive SDF rendering with circles and squares
• Drag and drop shapes with your mouse
• Smooth blending between overlapping shapes