Background
Hi folks, my name is Andy. A few years ago I built a tool called Shaderfrog (https://shaderfrog.com) which is/was a Three.js shader composer. For the last few years as a nights-and-weekends project I’ve been working on the next iteration of this tool.
Shaderfrog 2.0 is a new type of graph editor I’m calling a “hybrid graph,” that lets you write raw GLSL in nodes, and compose nodes together automatically and building the new final shader source code for you.
Believe it or not, this tool is engine agnostic, since it works with raw GLSL. It supports engines as plugins. I started off building plugins for Three.js and Babylon.js, and recently completed enough work on the PlayCanvas plugin to feel comfortable sharing it here.
Demos
Warning, this demo has plenty of bugs, and it’s easy to cause a Javascript error that requires a page refresh!
There is currently no way to export shaders! This is just a demo / early prototype.
To cut to the chase, here are some cool demos I’ve built with the editor:
Using a custom shader as the vertex displacement map in a PlayCanvas StandardMaterial() (Live)
In any of these demos, you can double click on the red or green source code nodes to edit the GLSL. For example, you can click on the red “Big Wiggles” node in the above graph to see how it generates the vertex displacement in GLSL. You can edit that GLSL, and click “compile”, to update the output.
Using a custom Voronoi shader as the normal map (Live)
Warning: This Voroni demo is pretty slow, I think because the material is double sided and doing unnecessary renders. You can do the same thing here: double click on the green Voroni node
Composing PlayCanvas materials with other shaders (Live)
The hybrid graph lets you treat any GLSL shader as a node in the graph. This demo shows how a full PlayCanvas shader, with refraction and lighting, can be arbitrarily composed with other nodes. This one is harder to explain from a technical context - to fully explain it requires explaining how most of the system works.
Using a custom shader for the diffuse map (Live)
Not as fancy of a demo, but looks cool!
More detail
You can see more shaders at the home page, including Babylons.js and Three.js shaders: Shaderfrog 2.0 The core tech that powers them is the same, and there are plugins defined for each engine to do things like define how the engine’s standard material is created.
I don’t know what the future holds for this demo. Supporting exporting is one of the biggest features I think is important before doing an official launch.
Your feedback is welcome, if you get a chance to try it out!