Hi folks, I’ve been building a new type of GLSL shader graph editor as a nights and weekends project.
I’m calling this type of graph editor a “hybrid graph” editor. It’s “hybrid” because you can write raw GLSL in nodes, including full shaders, and then you can compose nodes together arbitrarily in the graph.
I recently made enough updates to the BabylonJS implementation of the graph editor to feel comfortable sharing it here. Here’s the demo link for Babylon: http://frogger.andrewray.me/editor.html?engine=babylon
Try changing the example dropdown on the top middle to see some cool effects made with this editor. Here’s some screenshots:
There’s a lot to explain in how this demo works, but I’ll only call out a few things in this early preview.
- To get an idea of the “hybrid graph”, try selecting the “Living Diamond” example, then find the green “purple metal” node in the graph, and double click on it. You can see that this is a complete raw GLSL shader program. The hybrid graph engine automatically parsed inputs and outputs from this node, making it composable in a graph.
- Note that the graph is using the full “purple metal” shader node as the
bumpTextureof a Babylon PBRMaterial. The hybrid graph basically lets you replace any source code of any shader with the output of any other GLSL node. So in this case, it’s hijacking the Babylon PBRMaterial source code, replacing the bumpTexture lookup with another shader function.
- You can see the final compiled GLSL output in the “Compiled Source” tab. You can also edit this source code inline and see the updates. It’s useful to see what the engine (Babylon) is doing when compiling shaders.
- This demo is early, and there’s plenty of ways to break it! Lots of edge cases, missing features, etc.
This is a GLSL editor, it’s not specifically a BabylonJS editor. BabylonJS is implemented as a plugin to the hybrid graph editor. You can also change the engine from BabylonJS to ThreeJS, and the exact same graph editor works for ThreeJS.
Right now in the demo you can’t save anything, it’s in-memory only.
This is the next evolution of the tool I built, Shaderfrog (three.js only). This new tool is open source: GitHub - AndrewRayCode/frogger: Experimental Shaderfrog 2.0 Hybrid Graph Shader Composer
To create the Hybrid Graph, I wrote a full GLSL compiler, which is already being used by lots of other projects: GitHub - ShaderFrog/glsl-parser: A GLSL ES 1.0 and 3.0 parser that can preserve whitespace and comments
Feedback welcome! There is a lot more I could add, so questions welcome as well.