shadplay

artwork by Maz with SD

Our bevy-shader-cheatsheet

Shadplay is an app designed to help you learn wgsl with minimal friction, specifically for those wanting to learn wgsl to write shaders for Bevy. The idea is to give one the minimal amount of bevy boilerplate etc possible to get started writing glsl asap, and provide a library of examples showing how some things are done, can be done etc.

A secondary goal is to flesh out a relatively comprehensive 'port' of existing cool shader work from places like shadertoy etc -- because there's a few 'gotchas' around the differences in glsl and wgsl syntax, their respective builtins.

A tertiary goal is to surface the builtins/existing library code that Bevy's codebase provides.

---

Why?

I have found, and continue to find the shader-universe impenetrable, however: I'd rather attempt to write up and document the content I wish I'd been able to find in my first google search, than complain.

---

Features

• A large collection of example shaders illustrating creative and educational uses. assets/shaders/yourshadergoeshere.wgsl specifically focusing on wgsl.
• Live preview of shader code on Bevy mesh geometry.
• Textures, see assets/shaders/howto-texture.wgsl.
• Drag and drop .png or .jpg files onto the window to use as said textures.
• Mouse coords over a uniform, see assets/shaders/howto-mouse.wgsl.
• Colour picker with system copy so that you get an immediate vecf3(r, g, b) immediately available for quick pasta action.
• Drag and drop (valid wgsl) shaders onto the app.
• Scripts to format your wgsl work, so it looks more rusty.
• Scripts to pull all the functions from the bevy codebase's shader code so you can easily lookup what's available for import.
• Scripts to search the bevy sourcecode (opening your browser) for specific keywords.
• Automatic recompilation and update of shaders upon saving changes in your editor.
• Quick iteration and experimentation with wgsl shader code.
• Transparent background, with always-on-top (so you can have it on top of your editor, most OSes should be supported).
• Screenshot the shader you're working on with SPACEBAR, this will also version the shader (at assets/shaders/myshader.wgsl) for you i.e:

 screenshots
└──|  01-10-23
    └──| 09-23-29
        ├──|  screenshot.png // Your screenshot
        └──|  screenshot.wgsl// The shader at `assets/shaders/myshader.wgsl`

Keybindings:

The app has some simple hotkeys:

Hotkey	Action
q	Quit
s	Change Shape in 3D
tab	Toggles the colour picker (should be supported on most systems...)
t	Switch to 2D/ShaderToy Mode
h	Switch to 3D
l	Window-Level
d	Toggle Decorations (not all OSes)
t	Toggle Transparency (returning to fully transparent is not supported)
r	Toggle Rotating shape (3d only)
spacebar	Takes a screenshot && versions the current .wgsl
0	Select the texture at index 0
1	Select the texture at index 1 (assuming you drag-n-dropped a tex onto shadplay)
2	Select the texture at index 2
3	Select the texture at index 3
4	Select the texture at index 4
5	Select the texture at index 5
6	Select the texture at index 6
7	Select the texture at index 7
8	Select the texture at index 8
9	Select the texture at index 9

---

To run shadplay, you'll need the following:

• Rust (stable) - Make sure you have Rust installed on your system. You can find installation instructions at https://www.rust-lang.org/tools/install. We assume you can follow their instructions to clear that hurdle

then:

Installation

 $ git clone https://github.com/alphastrata/shadplay.git
 $ cd shadplay
 $ cargo run --release

• Then edit the myshader.wgsl, or myshader_2d.wgsl(if in 2d/shadertoy-mode) file in real time. (h, and t to move between 2d/3d).

---

Contributing:

See the guide

---

TODO:

• [] More shader examples (the entirety of shadertoy ported!)
• [] drag n drop obj/stl/gltf opening?
• [] left/right arrows to swap between shaders from the assets' dir

---

Resources:

• Fantastic implementations of some sdf composed shapes
• GM Shaders
• glsl sandbox
• Shadertoy
• pcf swap by DGriffin91

---

Gallery:

• Any shaders in the assets/shaders not by the repo's owner contain links to the original work, and obviously their original glsl code is, still theirs.
• Some of those can be seen below

---

LICENSE:

This repository is licensed MIT, with the exception of code within the assets/shaders/shadertoy-ports directory, see those individual files' and the links to the original glsl code to ascertain their licensing requirements.