About Shaderfrog 2.0
The Shaderfrog Shaderblog. Published October 2023.Hi, my name is Andy. Almost 8 years ago, I created a tool called Shaderfrog. Shaderfrog is a Three.js shader editor and ‟composer.” Shaderfrog lets you author shader GLSL in nodes, and then combine them together using a graph editor.
I've spent the last several years working on the next version, Shaderfrog 2.0, which you're looking at now! This post talks about what this tool is and how it works.
How Shaderfrog 1.0 Came About
I made Shaderfrog 1.0 to help make the background for a WebGL game. I wanted to make the background an underwater scene. I searched for a ‟water pattern” shader, and a ‟light rays” shader, and I manually combined those two shaders together to make my effect. I hypothesized that I could build a tool to automate shader composition. That journey led to Shaderfrog 1.0.
It was an incredibly cool experience to build something from zero to one, and launch it. I quit my job to work on Shaderfrog full time. Since launch, Shaderfrog has gained over 5,000 members, and has been used in several university courses.
After losing lots of money building and hosting Shaderfrog, I eventually returned to full time employment. Shaderfrog 1.0 has advertisements for paid features, but I never implemented them. I haven't made significant updates to Shaderfrog 1.0 since its launch.
Shaderfrog was a great experiment, but it has some significant flaws:
- It doesn't let you use Three.js engine effects like lighting, animation, refraction, animation, etc.
- It has significant bugs and has a pretty limited editor.
- The runtime Javascript library has fallen into disarray, and no longer works with modern Three.js.
Introducing Shaderfrog 2.0
‟Striped glass fireball” in Shaderfrog 2.0Shaderfrog 2.0 is a tool that:
- Introduces a new concept of shader editing, called a ‟hybrid graph,” which lets you compose GLSL nodes together in a new kind of module system.
- Supports any WebGL Javascript engine, including Three.js, Babylonjs, and PlayCanvas as plugins. No other tool does this!
- It's completely open source.
Multiple Engines
WebGL ‟engines” are Javascript libraries that provide convenience functions and systems on top of the raw WebGL API. Some popular 3D engines include Three.js, Babylon.js, and PlayCanvas. All of these engines generate shader code to support their features. A WebGL shader is a computer program written in a language called ‟GLSL” (graphics library shading language) that the GPU executes. Three.js and others build a shader program string dynamically, based on the attributes of the scene (like how many lights there are), and pass that string off to the GPU.
There's no standard way to write a shader, nor should there be. The popular WebGL engines implement features like cameras, lighting, and transparency, with different code and data structures. It's impossible for a shader editor to work across WebGL engines. At least it was, until now.
How Shaderfrog 2.0 works
Shaderfrog 2.0 lets you write full shader source code in graph nodes. It parses the source code into an AST, and marks specific parts of that AST as replaceable. When you connect two nodes together in the graph, you're saying ‟replace part of shader x with the output of shader y.” Shaderfrog 2.0 then does the heavy lifting of composing the two shader programs together into a single program.
Shaderfrog works with GLSL, making it engine agnostic. As long as your engine generates GLSL (which all WebGL engines do), then Shaderfrog can manipulate that GLSL.
How does Shaderfrog 2.0 support engines? At a high level:
- You define your engine as a plugin to Shaderfrog, which tells Shaderfrog how you generate GLSL. For example, the Three.js plugin tells Shaderfrog how to get the GLSL from its standard MeshPhysicalMaterial.
- Shaderfrog lets the engine plugin generate GLSL, then parses the source code into an AST for manipulation.
- Shaderfrog composes the other shader GLSL in the graph with the engine GLSL, and puts the result back into the engine material.
Said another way, Shaderfrog hijacks the GLSL creation of engine materials, and runs its own algorithm on it. The same core algorithm works for any engine, which is how the Shaderfrog graph editor supports multiple engines.
The connections between nodes in the graph represent you injecting your own source code into someone else's shader. I call this process ‟static monkeypatching.” You can modify anyone else's code (‟monkeypatch”), and Shaderfrog generates code for you (‟static” codgen, as opposed to dynamic monkeypatching, like in Ruby, which happens at runtime).
Status of Shaderfrog 2.0
You can try out Shaderfrog 2.0 today! This tool is still in alpha, and has many bugs and UX issues. But the foundations of the hybrid graph editor are in place for you to try. Right now there isn't a standard way to export shaders into your own WebGL games/projects, but here's an early preview of exporting.
Shaderfrog has been a passion project of mine for almost 10 years. It may never be complete. I've been working nights and weekends on version 2.0, but there's still a long way to go in terms of features. The next milestone I'm aiming for is fully replacing shaderfrog.com with the new version.
Feedback? Comments? Suggestions?
I believe the best way to improve a product is through user feedback. If you get a chance to play around with the editor, or even just view someone else's shader, I'd love to hear any feedback that comes to mind. You can reach me at contact@shaderfrog.com, or DM me on Twitter or Reddit.
- Andy Ray, October 2023