Improving visual shaders: design consistency and code maintainability

[QbieShay]

Currently, visual shader lacks guidelines for overall design, which has led to inconsistencies in how the nodes are implemented.
Some nodes allow to split the output, some don't. Some nodes allow to change type, some nodes allow to change operation.

Additionally, UX improvement are hanging behind legacy code that's become hard to maintain.

NOTE we will try our best to not break compatibility. This is not meant to be a compatibility breaking update.

Please drop your ideas here, I'll try to organise them in a document.

[JoNax97]

Personally, I've started using it recently and found it confusing that a node can have a drop-down to change operations. Isn't the node itself meant to represent an operation?

If the intention is to make it easy to switch operations on already connected nodes, I think it would be better to have a way to replace the node, while remapping it's connections as best as possible

[Nolkaloid]

Could you give examples of nodes where it's particularly confusing ? Blender does it the same way and I find it pretty ergonomic to be able to quickly switch operations.

[paddy-exe]

@JoNax97 It totally depends if the operations inside a node are actually thematically connected or not. Blend nodes for instance are more useful being one node where you can immediately change the operation.

[JoNax97]

Yeah, in that specific case I agree

[justinbarrett]

all these are good points...what really irks me though is the connections...if you zoom in or out whatsoever it becomes a major hurdle getting sockets connected without connecting to the wrong one or being fed a popup for a new node.
Changing how the sockets work is top priority IMHO.

[QbieShay]

Yeah I agree. That's being worked on already.

[QbieShay]

It's fixed :o godotengine/godot#73137

[DarkMessiah]

I guess this PR (godotengine/godot#67152) will be useful for upgrading UX.

[QbieShay]

Agreed! I'm hyped for it to land. Though it wont solve consistency of operations :D

[paddy-exe]

Okay so I summarized my main ideas for a better UX and functionality in the VS graph editor:

• (UX) Dragging connections from one node to another which is out of view is really annoying (-> Blender „scrolls“ in the direction you are dragging the mouse to)

  Blender Showcase

  Bildschirmaufnahme.2023-01-27.um.17.48.53.mov

• Combine several nodes into one big node (node layer-system like in Blender or MM?) (GraphEdit/GraphNode refactor [V2] godot#67152 should make this possible)

• Copy and paste nodes in text-form into nodes (like MM) -> easier to share specific nodes without sharing the whole file

• (UX) when dragging the connection and dropping it the „Add Node“ dialogue appears. When choosing a node to appear, Godot automatically chooses the connected node input -> give ability to change the input port (like Blender)

• (API) Add ability to create a drop-down menu for several output options in addons (custom nodes): Proposal: Expose Options-Drop-Down in Visual Shader CustomNodes #5075

• Add ability to customize the order of shader parameters of the VS graph -> currently just alphabetical (perhaps let the uniforms be draggable in the inspector?) (Unity does this fairly well)

• (UX) Show node description as an overlay when hovering a specific amount of time over a Node -> could be incredibly useful for custom nodes

• Built-In Shader and Visual Shader Docs inside the VS graph editor. Proposal: Document shader language built-in functions, variables, hints and types in the class reference #3767

• Ability to search through the nodes of a graph and highlight the node names (is that possible?)

[unfa]

I've elaborated a bit more on the Node Group feature you've mentioned here: #6182 (comment)

[warcanin]

If the user experience has to be modified then i believe you should base the new design on the node wrangle addon of blender, there are a lot of feature who allow for a very fast workflow.

Here is i think the essential shortcut that should be available:

• Alt right clicking on a node allows you to drag a connection without having to be precise, then you will be able to drop it on another node. Blender manage this by separating vector/rgb/float imput, in the previous example blender connected the base color to the base color and subsurface color skipping the subsurface and subsurface radius since they are not rgb imput.
• Alt Shift Right click allow you to select where you want to start and where you want to go, a drop down menu is created at the start and at the end of the dragging.
• Ctrl Right click on an empty space allow you to cut links between nodes.
• Shift Righ click allow you to create reroute on link that share the same output (this one is not necessaty but nice to have).
• Ctrl X allows you to delete a node that is between two nodes without destroying the link between them.

[QbieShay]

Color inconsistencies and vector splitting

Color params and constants are vec4, but color functions and operations take vec3.
Param and constants can have split output, but functions and operations can't.

suggestion: make component splitting a first class citizen for all vector types.

[QbieShay]

Clearer conditionals

Conditionals are just very very confusing. I have been looking to use the switch in the past but i couldn't find it at all.

Proposal: remove if block, add tolerance to compare. if block only supports vec3 and it's not useful in most cases, imo.

[Chaosus]

Yeah, it was just a copy/paste of design from a similar node in Unreal Engine. I thought it is useful...

[QbieShay]

To be clear switch is very good. I am not sure how if should work, i guess it's just a non-boolean if and uses a mix between the parts. I appreciate you added it, maybe someone else uses it ^^ I just didn't understand it. This is only my point of view, and I put it out here so that people can discuss

[Chaosus]

Yeah, I mean if. I also found the switch is very useful :)

[QbieShay]

Unify math nodes

Function nodes: there's 4 function nodes, unify them into a single one and allow changing type from all to all. If necessary, change the function list depending on the input type.

NOTE: i think transforms are different enough to warrant separation. int and floats arent. vector and scalar, debatable.

[QbieShay]

Contextual search node highlight

Dragging out a pin into a new node popup should navigate in the list to the entry with the right type.
Here i am draggin from vec3

[QbieShay]

Constants with dropdown menus instead of flat number

I'd prefer a node with dropdown menu for constants too, instead of just making a new constant node with plain text inside.

[paddy-exe]

Should this be a seperate node from a constant node with a text field?

[tetrapod00]

Now tracked in a separate proposal #10819. (I came to this idea independently.)

[QbieShay]

Minor: clamp uses the term float, while smoothstep uses the term scalar.

[QbieShay]

This one's more involved: completely remove the sampler2D parameter and instead have the following:

1. a checkbox to expose the texture as a parameter
   2.a an "advanced" foldable section with all the properties that are now in the texture parameter nodes.
   2.b instead of 2.a, just pop the inspector like for curve textures <- LESS DESIRABLE, INSPECTOR IS CONFUSING FOR VS.

[tetrapod00]

Some overlap with #10793, but I only want the Texture2D node to reach parity, but not necessarily replace the Texture2DParameter node.

[QbieShay]

Merge and enhance curve nodes

Merge the two nodes "curvexyz texture" and "curve texture" into one, with a dropdown selection.
Add an "exposed" checkbox to optionally expose the curve texture in the parameters of the material. Possibly eliminate the usage of the inspector entirely.

[QbieShay]

Nodes search menu improvements: remove configurations, add tags to node, add contextual search

Right now the search menu is incredibly confusing. There's entries that just remap to node configurations that just clutter the node.
I believe this is a consequence of how the search in the nodes work.

Suggestion: rework nodes so that each node support tags and hide entries that are just different configurations on the same node. Coupling this with picking the right type when connecting nodes, will make the menu more usable and less cluttered.

Suggestion 2: rething organization with nodes in a more high level "math", "uv", "vertex" etc.

Example of clutter: this is expanding vector/functions:

there's others like scalar functions too.

[QbieShay]

Varying to output node

Rework varying UX: instead of having them in a separate box that floats, add them to the output of the vertex/fragment stage

Varying from previous stage can still live in a separate node with the dropdown.

[QbieShay]

Instance data preview

For us particle developers: have something set the custom vector of the material while working on it. Perhaps it should be in the inspector for the visual shader itself, as mock properties. Without this, the preview of the current texture is useless for anything that is developed around particles or multimeshes.

[unfa]

Stuff that gets in my way the most in current implementations is :

Reroute Node

A simple dot node that can be used to lay out readable data paths in the graph. Without this at a certain level of complexity everything tangles into big mess. I think MaterialMaker handles this best. You can even insert a reroute between a port and it's destinations (multiple!) t be able to insert something between them without reconneccting all outputs individually. I love how MM and Blender implement this, but I dislike Unity ShaderGraph's take with makes the Reroute node directional (let to right), making laying things out nicely harder than it should be.

[tetrapod00]

Done in godotengine/godot#90534.

[unfa]

Node Groups

Grouping nodes is the ability to encapsulate a subset of the node graph into a single node that could be saved into a file and reused in multiple places in the project like a resource. In Unity's ShaderGraph this is called a Subgraph. Lack of this feature is something that limits Visual Shader's usefulness tremendously. It's like a graphics program without the Layers feature - you can only do so much before the project becomes unmanagable. It'd also allow reusing pieces of visual shaders, reducing duplicated code, easing management and readability.

[Geometror]

For reference, this is now being tracked by a proper proposal: #7730

[unfa]

Space bar to Add Node

Material Maker does a wonderful thing - if you hit space bar it will open the menu for adding nodes where you can type and search for a node name. This speeds work up tremendously. I'm missing this in Unity's ShaderGraph and any other nodes program that doesn't do this. Adding new nodes is such a fundamental action that assigning it to space bar makes a lot of sense.

[RedMser]

Holding spacebar and click-dragging allows you to pan the view.
Also, you can already right-click the add node, which is also very quick and easy to press.

[tetrapod00]

Now tracked in #10390.

[unfa]

Detach the Editor or make it Fullscreen

The Visual Node editor is part of the bottom panel, just like the animation editor. Often I find myself wishing I could put it into the place where Code Editor is instead, or just detach it to a secondary monitor. Though this is probably something of a wider topic to generally rethink how editor panels are managed.

[QbieShay]

For me the biggest issue is how the layout is atm. The fact that the 3D view at the center is unmovable is a problem imo. I can't believe I am saying this but i believe that Unreal's view is better, for when you're focusing on a single object. I think it would be good to promote the central 3D view into something that can be moved around. Not sure how hard it is, probably very. But I think it would be good if the 3D view can go in a corner like this: https://docs.unrealengine.com/4.27/Images/RenderingAndGraphics/Materials/LightingModels/FromMaterialExpression/FromMatExpression.jpg

[QbieShay]

Realistically tho, the shader editor could be a panel that we can make floating and have in another screen. simplest solution.

[unfa]

I think I like the centered 3D view, but what I live even more is what Blender does - where you can pretty much organize the space however you like and each panel possible to place and have more of at will. Unity does this as well.

This is a real problem, because having to work in a small, oddly shaped editor while having barely a good preview of what the result is really limits the comfort of working with Visual Shaders.

But this I think is probably a separate issue - overhauling the UI panel system in Godot editor as a whole. Not sure if it can/should be tackled as part of strictly Visual Shader improvements.

But it is something that I struggle with :P

[QbieShay]

Yeah definitely something to be discussed, but out of the scope of visual shaders improvements

[tetrapod00]

The shader editor is now detachable and maximizable! (Can't track down the PR)

[QbieShay]

Contextual material selection

Right now, with the shader dock being constantly present, it's REALLY easy to lose track of the object that had the material with the shader we're editing. The splitting of parameters into per-instance and per-material makes it even clunkier to work with

Proposal: have a second list other than the open shaders that allows to quick-select a any node in the scene that's using the current shader.

[QbieShay]

TextureTriplanar color output cannot be split

[QbieShay]

Add position, scale and offset to texture triplanar.

Currently, texutre parameter triplanar node

Takes positions and weights. While weights are something that people probably won't want to touch, scale and offsets are more likely to be touched. However, connecting the pos pin completely disregards the parameters of scale and offset, which still are left as parameters. Additionally, weight sharpness cannot be touched or remapped.

Proposal:

1. add scale and offset port to textureparameter triplanar
2. add weights sharpness as a port
3. If any of those ports is connected, remove them from parameters of the shader
4. Name the parameters of the shader by the name of the texture parameters. Instead of "Triplanar Offset" and "Triplanar Scale" they should be "ParamName Triplanar Offset" and "ParamName Triplanar Scale"

[QbieShay]

For context, this is what I'm doing, zelda fan will regonise it immediately.



I know multiple triplanars are inefficient but this is a "hero element of a scene" (in focus and animated only during cutscenes)

[QbieShay]

Cannot split output of vector operations

Split output of vector op:

[paddy-exe]

Would this mean the removal of the Decombine node then?

[QbieShay]

No, there's still usecases for it, but it's way less convenient to use than just a splitted output.

[tetrapod00]

This was implemented but I can't find the PR.

[QbieShay]

Multi variant operations

Multiply add is a different node from multiply and add and you can't swap between them.
Perhaps a math node with variable amount of inputs?

Again a case of change operation in one and change type in the other:

[QbieShay]

Naming of screen textures

It's really unclear which of those is a screen source, other than screen.
Rename them with ScreenDepth, ScreenNormal, ScreenRoughness, ScreenColor.

[lentsius-bark]

oh this would be really good and has my full support

[snektailmeat]

something for paralax depthmapping would be nice

[EduardoLemos567]

Some way to add local variables. Would be nice saving a value in one side of the grid and loading the same value on other side.
The setter node, could have a string input for name and a type, it receives a value and returns the same value, like a pass through node.
The getter node, you select a dropdown setter name and set a type, it has only 1 output socket.
I tried doing that with a expression node, but didn't work.