Page MenuHome

Nodes Redesign: Colored Links
AbandonedPublic

Authored by Fabian Schempp (fabian_schempp) on Feb 6 2021, 1:52 AM.

Details

Reviewers
None
Summary

This patch makes:

  1. Node links to adapt the colors of the sockets they are linking.
  2. Removes the "shadow" from the links to make them look more flat and modern.
  3. Linkes drawn above the socket, to break the outline and produce a visual flow.

Based on the design of @Pablo Vazquez (pablovazquez) https://ui.pablovazquez.art/

Related Patches:
D10342
D10345
D10348
D10350

Diff Detail

Repository
rB Blender
Branch
blender_nodes_redesign_links (branched from master)
Build Status
Buildable 12688
Build 12688: arc lint + arc unit

Event Timeline

Fabian Schempp (fabian_schempp) requested review of this revision.Feb 6 2021, 1:52 AM
Fabian Schempp (fabian_schempp) edited the summary of this revision. (Show Details)

Fixed order of color application to return highlight and selection color.

We still need a solution for links that are not the same color as the socket. (invalid, highlight)

Added an offset to the links starting and end position into the direction of each other, to make the links just overlap the outline of the socket.

Solved the issue of links that are not the same color as the socket, by making the shader offsetting them into the direction of the other end to just overlapping the outline of the Socket.

Now this patch works with Noodle Curving.

@Pablo Vazquez (pablovazquez)

I fixed the problem of link start and end offsets when noodle curving was used.
The patch should now also work with noodle curving higher than 0.

This patch should probably be updated to include the red error links from the original mockup. Otherwise it's misleading when a vector socket fades into the green geometry socket.

I also think this should be an option. No matter how nice it looks to many, it will probably always be a personal thing.

In addition to the smooth color change, you can also make smooth change the shape of a circle to a line.

Like the shape of a light bulb:


Pablo Vazquez (pablovazquez) abandoned this revision.EditedOct 22 2021, 2:10 PM

Closing this as there is now a similar solution in master. rB9b1b4b

Thanks Fabian for working on this! I like the wires drawn on top of the sockets, to make them look connected to the sockets, however I think we should keep the outline around them to communicate selection and other states. Something that can be research in master.