“Hybrid Graph” GLSL shader editor tech preview for Three.js

Showcase
1

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.

Demo link: http://frogger.andrewray.me/editor.html

This is not strictly a Three.js editor, rather, it’s a GLSL editor that supports Three.js as a plugin.

Try changing the example dropdown on the top middle to see some cool effects made with this editor. Here’s some screenshots:

Screen Shot 2023-03-05 at 10.15.29 PM
Screen Shot 2023-03-05 at 10.15.29 PM1920×1057 210 KB

Screen Shot 2023-03-05 at 10.16.01 PM
Screen Shot 2023-03-05 at 10.16.01 PM1920×1041 218 KB

There’s a lot to explain in how this demo works, but I’ll only call out a few things:

  1. 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.
  2. Note that the graph is using the full “purple metal” shader node as the normalMap of a Three MeshPhysicalMaterial. 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 Three MeshPhysicalMaterial source code, replacing the normalMap lookup with another shader function.
  3. 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 (Three) is doing when compiling shaders.
  4. This demo is early, and there’s plenty of ways to break it! Lots of edge cases, missing features, etc.

You can also change the engine from Three to Babylon, and the exact same graph editor works for Babylon.

Right now in the demo you can’t save anything, it’s in-memory only.

The tech demo is open source: GitHub - AndrewRayCode/shaderfrog-2.0-hybrid-graph-demo: 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.

8 Likes
2

Looks awesome, good job!

3

Great. Great tool for making shaders

4

Lots of updates since this first post. The graph editor now lives at Shaderfrog 2.0 . The graph editor supports Three.js, Babylon, and I’ve recently been working on Playcanvas as a plugin.

Here’s a pretty sweet striped glass fireball effect, combining Three’s MeshPhysicalMaterial with a fully custom shader: Glass Striped Fireball - Shaderfrog 2.0 Hybrid Graph Demo

glassfireball
glassfireball1920×1405 233 KB

4 Likes
5

Great! Very Nice Job!

6

I’m working on exporting from the editor into your own project. Here’s an early preview of the Javascript API, demonstrated with a shader as a Three.js normal map.

Live (try editing the GLSL!): Shaderfrog Three.js example - CodeSandbox

Source: https://github.com/ShaderFrog/examples/tree/main/three

normal-map
normal-map2048×1190 325 KB

1 Like
7

Shaderblog blog post explaining more about what the tool is and how it works: Introducing the Shaderfrog 2.0 Hybrid Graph Editor Alpha

2 Likes
8

Well done @Andy_Ray !

And thank you for continuing the work of @andyray

I really like his/her/their tool and I’m glad to see someone developing it further! :heart:

1 Like