Introduction

WebGPU Shader Toy is a free and open source tool for experimenting with WebGPU fragment shaders and the WebGPU Shader Language (WGSL)

#wasm #webgpu

Tool

The tool is free and live WebGPU Shader Toy!

No ads. No Tracking. No server-side component.

There is a video on YouTube showing some of the primary features.

Project

Note

This section describes the project itself, not the product. Check the WebGPU Shader Toy documentation for information about the tool and its behavior.

History

This project originated from my interest in learning about WebGPU. It also served as a platform for developing a more comprehensive application for my GLFW emscripten implementation: emscripten-glfw.

Technologies used

• emscripten (web assembly) for the compiler
• ImGui
  • ImGui Backend: GLFW with emscripten-glfw implementation (--use-port=contrib.glfw3)
  • ImGui Renderer: WebGPU (-sUSE_WEBGPU=1)

This tool uses emscripten-glfw with its multi (GLFW) window support:

• The pane containing the controls and code editor is a window using ImGui (with a GLFW backend). The code driving this window can be found in the file MainWindow.cpp
• The pane rendering the shader is a GLFW window. The code driving this window can be found in the file FragmentShaderWindow.cpp

Building

Note

This tool is meant to run in a browser and is not a desktop application. As a result, it requires emscripten to compile.

Assuming emscripten and CMake are properly setup and in your path, this project is straightforward to build:

# to build in Debug mode (use Release to build with optimizations)
> mkdir build
> cd build
> emcmake cmake .. -DCMAKE_BUILD_TYPE=Debug
> cmake --build .

Running

Due to cross-site scripting issues, you cannot load the files directly, but you must serve them instead. This is a quick and easy way to do this:

# from the same build folder
> python3 -m http.server 8080

Release Notes

Check the full history of release notes.

Misc

This project uses the following open source projects (some of them are embedded in this source tree under external)

Project	License
Dear ImGui	MIT License
nlohmann/json	MIT License
pongasoft/emscripten-glfw	Apache 2.0
ImGuiColorTextEdit	MIT License

License

• Apache 2.0 License. This project can be used according to the terms of the Apache 2.0 license.