shadplay

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 wgsl 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:

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
• GLSL2WGSL converter, it's a mixed bag..
• bevy_shadertoy_wgsl

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

FAQ:

Q: I grabbed a shader from the examples, but it's not working! A: It could be that the shader was contributed some time ago and was, likely made with a bevy version < 0.12.x so it's likely a formatting thing -- if the naga (the thing which parses and compiles the .wgsl code) error doesn't tell you how to solve the issue please make a bug report and we'll try to get it updated!

Q: What version of bevy are you targeting? A: {version = "*"}

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.