compute.toys is a WebGPU-based compute shader playground that lets you write, compile, and run compute shaders directly in the browser. It uses the Slang shading language, which gets transpiled to WGSL and executed on your GPU via WebGPU.
- Frontend: Next.js with React, Material-UI, and Monaco Editor
- Deployment: Cloudflare Workers (via OpenNext)
- Database: Supabase (PostgreSQL) with real-time features
- Shader Compilation: Slang compiler running as WebAssembly
- Graphics: WebGPU for compute shader execution and rendering
To install dependencies:
- make sure you've cloned submodules:
git submodule update --init --recursive - run
yarn
To start the development server, run yarn dev, or use the debug configuration in VS Code.
Some other useful commands are:
yarn buildto check everything builds properly (the CI will check this for PRs)yarn lintto only check for lint errors and warningsyarn fixto automatically fix lint errors where possible
Run npx supabase start to start a local instance of the compute.toys database.
Copy the "anon key" from the output and set it as NEXT_PUBLIC_SUPABASE_PUBLIC_API_KEY in the .env file.
You'll also need to set NEXT_PUBLIC_SUPABASE_URL=http://127.0.0.1:54321
If you're using codespaces, you can instead set the URL to the forwarded port, it'll need to have public visibility.
You should also set api_url in supabase/config.toml to the same address.
A local test user is available to login with username user@example.com and password pass
This project is tested with BrowserStack