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

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.

Release Notes

v2024.08.18

Added support for macOS keyboard shortcuts.
Changed the "Compile Shader" shortcut to be Ctrl + D (resp. Cmd + D) as Cmd + 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 to v3.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