WebGPU Shader Toy
Product Info
WebGPU Shader Toy is a free tool for experimenting with WebGPU fragment shaders and the WebGPU Shading Language (WGSL).Main Features
- Edit fragment shader code (WGSL) and compile for instant feedback
- Tabbed interface to work on multiple shaders
- Control time (forward / backward / reset)
- See value of inputs (ex: mouse position) live
- Take a screenshot
- Light/Dark style
- Manual/Automatic layout
- Drag and Drop
- Error handling
- Fullscreen support
- Hi/Low DPI support
- Automatically save full project
- Export/Import shaders
- Export/Import full project
- Free. No ads. No Tracking.
Run in your browser
WebGPU shader toy is an application that runs in your browser.
This tool requires a browser that supports WebGPU. At this time, Google Chrome and Microsoft Edge are working. Check this site for details.
Look & Feel
![Main Window (dark style)](/images/webgpu-shader-toy/webgpu-shader-toy-dark.jpg)
You can check a video of the tool on YouTube.
Usage
The tool is pretty self-explanatory and has a built-in help menu for shortcuts. Here are some details about certain specific topics.Browser environment
This tool runs in the browser and as a result is limited to the restrictions that are implemented in most web browsers. In particular:
- Being a WebAssembly tool, Javascript is required and cannot run if Javascript is disabled.
- The first time you paste from the clipboard, the browser should ask for your permission to do so. If you don't enable it, Paste will only be available within the tool itself (meaning you can Copy something from any shader loaded in the tool) and you won't be able to Paste anything from outside the tool.
- When toggling fullscreen, you might also have to enable it (depending on the browser)
- When exporting a file (project or shader), you can only control the name and not where to store it: the browser will store it in the folder you have selected for "Download".
Fragment Shader
The main goal of this tool is to write a fragment shader in WGSL similarly to the popular project Shadertoy.
The fragment shader sent to the GPU, looks like this:
// Begin WebGPU Shader Toy Header
struct ShaderToyInputs {
size: vec4f,
mouse: vec4f,
time: f32,
frame: i32,
};
@group(0) @binding(0) var<uniform> inputs: ShaderToyInputs;
// End WebGPU Shader Toy Header
// YOUR SHADER CODE GOES HERE
The example called
Tutorial
was designed to explain how to write the shader code including how to use the inputs provided by the tool.
Storage
This tool runs in your browser and does not use any server. For persisting your work, it uses the localStorage API.
- The entire project is saved regularly as well as when the page is navigated away: if you come back later on, you will be back to where you left of.
- You can export the project in its entirety: this will download a json file that you can later on reimport (or drag and drop).
- You can export a single shader file (only the content will be exported) that you can later on reimport (or drag and drop).
Since this tool does not have a server component, you can export the project and save it on a shared folder (like Google Drive) so that you can import it on a different machine.
Selecting
Reset
, either in the main menu or at the bottom of the page, deletes the storage entirely. Make sure you export the project before doing so!
Drag and Drop
You can drag and drop either a shader file (wgsl) or a (json) project file (previously exported) anywhere in the window (as you hover above the area, it will get highlighted)Keyboard shortcuts
Shortcut (macOS) | Shortcut (other) | Description |
---|---|---|
Cmd + D | Ctrl + D | Compile the shader |
Cmd + C | Ctrl + C | Copy selection / Copy Line (no selection) |
Cmd + X | Ctrl + X | Cut selection / Cut Line (no selection) |
Cmd + V | Ctrl + V | Paste |
Cmd + Z | Ctrl + Z | Undo |
Cmd + Shift + Z | Ctrl + Shift + Z | Redo |
Cmd + Shift + A | Ctrl + Shift + A | Select All |
Cmd + [ or ] | Ctrl + [ or ] | Indentation change |
Cmd + / | Ctrl + / | Toggle line comment |
Cmd + A | Ctrl + A | Beginning of line |
Cmd + E | Ctrl + E | End of line |
Home or End | Beginning or End of line | |
<Nav. Key> | Arrows, Home, End, PgUp, PgDn: move cursor | |
Shift + <Nav. Key> | Select text |
Screenshot
You can take screenshots of the currently rendered shader:
- : takes a screenshot instantly, using the default or previously used settings
- : open a window to choose the filename and image settings (this icon is enabled when holding the
Alt
key)
Fullscreen
You can render the shader in fullscreen mode:
- : resize the shader to occupy the entire screen
- : maintain the current shader window size/ratio (this icon is enabled when holding the
Alt
key)
Layout
The tool offers two different layouts:
- In
Automatic
layout, the two panes fill the browser window. To resize the panes, resize the browser window. The space in between the two panes can be clicked and dragged to resize each pane proportionally. Double-clicking on this space will split the two panes evenly again. - In
Manual
layout, each pane has a little handle at the bottom right which allows each pane to be resized independently.
Resolution
The tool lets you toggle between Hi DPI / Low DPI. If you are having issues with the framerate, consider switching to Low DPI.
The input
inputs.size.w
(resp. inputs.size.z
) represents the scaling factor along the x-axis (resp. y-axis). Because of the environment this code is running in (a browser), both values will always be equal. When there is no scaling (Low DPI), it will be 1.0. When there is scaling, it will be >> 1.0. For example, on a retina display it could be 2.0. On a Windows machine with 175% scaling, it will be 1.75.
Note that this setting only works if the monitor supports Hi DPI: the true meaning of this setting is "Hi DPI Aware".
Enabling/Disabling Rendering
The editor and the shader rendering panes share the same GPU rendering loop. A drastic drop in the framerate, due to complex shader code, can cause the editor to become sluggish and less responsive. By turning off the rendering, the editor's responsiveness can be improved, making it easier to edit the code efficiently.Sponsor
pongasoft produces a variety of high quality and free/open source software. If you would like to support my work and help offset the cost of development tools, web hosting, etc. here are a couple ways to do so:
- Send money via PayPal
- Sponsor Me on github
Release Notes
v2024.08.18
- Added support for macOS keyboard shortcuts.
- Changed the "Compile Shader" shortcut to be
Ctrl + D
(resp.Cmd + D
) asCmd + Space
is already taken. - Added an alternate way of rendering the shader in fullscreen mode: holding the
Alt
key preserves the size/ratio of the shader window. - Upgraded
emscripten-glfw
tov3.4.0.20240817
which enables using macOS shortcuts and copy/paste in any text field (not just the editor). - Source Code v2024.08.18
v2024.07.29
- Added the ability to swap the panes.
- Source Code v2024.07.29
v2024.07.21
- In automatic layout mode, added the ability to resize the two panes easily by clicking and dragging the space between them. Double-clicking will revert to an even split.
- Source Code v2024.07.21
v2024.07.19
- Added the ability to duplicate a shader (right-click on its name for a popup or select the option in the
Shader
menu) - Handle error cases in dialogs (empty name, duplicate name, invalid size, etc...)
- Added Ctrl + A and Ctrl + E shortcuts for beginning / end of line shortcuts (Select All is now Ctrl + Shift + A)
- Source Code v2024.07.19
v2024.07.15
- Tweaked keyboard navigation: make sure that the editor always has preference
- Limit the size of the error message window
- Tweaked version number to make it more readable
- Source Code v2024.07.15
v2024.07.14
- Added the ability to take a screenshot
- : take a screenshot instantly (use the previous/default format)
- : open the menu to select a format and a filename
- Added the ability to enable/disable shader rendering ()
- Source Code v2024.07.14
v2024.07.09
- First public release
- Source Code v2024.07.09