I have been working on the usability of my “hybrid graph” shader graph editor, Shaderfrog.
This graph editor is a blend of a code editor and a graph editor. My question is: How easy is it for you to find the code editor? For example, if you create a new Three.js shader graph (direct link https://shaderfrog.com/2/editor/create/three), it defaults you to the graph view:
Another option I am considering is defaulting you to the fragment/vertex GLSL code view. I think this is more intuitive for writing code, but less intuitive for composing effects together, which is the main point of the tool. For example, the real power of this graph editor comes from composing shader modules together with Three.js materials, like this https://shaderfrog.com/2/editor/cm7id98j5005gpaxic875daxk
- How would you rate the usability of editing code in this graph editor?
- What do you think the default / first screen should be? The graph? Or the code editor?
3 Likes
First off.. big fan. Shaderfrog is rad!
I myself would probably prefer a view that defaults to the fragment shader source code, but I know a lot of folks are seeking graph node style editors when searching for shader editing online.
I recall checking shaderfrog recently and not realizing the frag editor was still available.
On a slightly different topic.. i know you’re not soliciting new feature requests so much, but it would be nice to have access to this info for the builtin materials… I use this site a lot when hacking built in shaders, and if this level of detail would be neat.
1 Like
Excellent work !
I guess that graph view should be default, as the editor is mostly interested in this feature -
source code editing is possible in any other (for ex. I prefer VSCode). At the same time editing source right in the editor gives more flexibility and is useful for learning purposes also.
Thank you for the feedback! Can you say more about what you’re looking for when showing the Three.js source code includes list?
I’m aware traditional Three.js shader hacking is done with string replacement anchored to #include lines in the Three.js pre-built GLSL. Shaderfrog does something similar but more complex: It parses the full Three.js material code into an AST, and makes any part of the AST replaceable. You can do things like replace all references to a variable in a Three.js shader, for example, for more powerful manipulation.
All that being said, you can see the expanded Three.js material source code if there is a Three material in the graph. For example, if you double click on the green MeshPhysicalMaterial node in this graph, you can see the expanded GLSL, so one level expanded past Three.js includes. Does this give you what you’re looking for? Or are you looking for something different?
2 Likes
This is exactly what i meant. That’s fantastic.
1 Like
