https://github.com/joshbrew/webgpu_fractals
Fractals in WebGPU compute shaders, with a twist! Make infinite never-seen variations of famous fractals and more.
https://github.com/joshbrew/webgpu_fractals
Last synced: 15 days ago
JSON representation
Fractals in WebGPU compute shaders, with a twist! Make infinite never-seen variations of famous fractals and more.
- Host: GitHub
- URL: https://github.com/joshbrew/webgpu_fractals
- Owner: joshbrew
- License: mit
- Created: 2025-11-21T06:28:37.000Z (7 months ago)
- Default Branch: main
- Last Pushed: 2026-02-27T06:40:44.000Z (3 months ago)
- Last Synced: 2026-05-24T13:35:20.839Z (15 days ago)
- Language: JavaScript
- Homepage:
- Size: 1.89 MB
- Stars: 1
- Watchers: 0
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
## WebGPU Fractals
### ----> [Make your own fractals!](https://webgpufractals.netlify.app/) <----
#### [Codepen alt url](https://codepen.io/joshbrew/pen/ByNxqKB)
#### See also: [3D point cloud fractals](https://github.com/joshbrew/3D_Fractals_Scale_Space) (earlier non-WebGPU version)
This is a comprehensive WebGPU fractal rendering system built on compute shaders. It features a lot of well known fractals plus a bunch of custom ones that mostly build off of newton's fractals. It is written in pure javascript and WGSL with zero dependencies.
There are 71 fractal formulas to mess around with plus dozens of modifiers that alter the coordinates per-iteration in combinable ways. There are infinite possibilites, you might be surprised what you find.
You can:
- Control pan, zoom, iteration count, resolution (up to 8K!), escape radius, convergence...
- Modify the per-iteration math with a variety of cumulative effects.
- Add displacement mapping and lighting with flexible mesh resolution.
- Control which parts of the fractal are visible.
- Change color and hue in a very wide range, plus a simple optional lighting and specular model.
- Edit in real time with instantaneous updates to fine tune your favorite images.
- Click on the canvas to get camera control with WASD support. Press esc to quit.
- Download the image at full resolution (use reset camera if you moved so you can get the full image!). 8K images can be up to 50MB raw
- Play music (requires isolated context to use the audio worklet system correctly, see tinybuild.config.js for headers used)
- Animate the fractals to the music
Some limits:
- No deep zoom as we rely on base 32 bit float precision. We make up for it with the modifiers. It bottoms out around 7 decimals of precision.
- Julia sets don't work well with the modifiers so they're excluded, but you can still mess with the classic one.
## Build and run
With `tinybuild` installed globally (`npm i -g tinybuild`): `npm start`
## Configuration
See [`./tinybuild.config.js`](./tinybuild.config.js) for settings.
Add build:true for build-only, add serve:true for serve-only, or set bundle or server to false alternatively.
Click to go to youtube:
[](https://www.youtube.com/watch?v=G-FtKNiawx0)
[](https://www.youtube.com/watch?v=3Sco25ak8AA)
Click to go to youtube:
[](https://www.youtube.com/watch?v=3WHPgqEGz9A)
#### More screenshots:
Click to go to youtube:
[](https://www.youtube.com/watch?v=uiNGqn5zEUs)
Click to go to youtube:
[](https://www.youtube.com/watch?v=89uVpb0QUw8)