Unity-SDF-UI-Toolkit - SDF based Vector UI package

[TLabAltoh]

Unity-SDF-UI-Toolkit is an UI package that provides a uGUI component and utility for rendering UI graphics with features such as outlines, shadows, and rounded corners using signed distance functions (SDF). It supports a variety of simple shapes (e.g., quads, triangles, circles) as well as more complex shapes (currently splines and SDF textures). Additionally, the utility includes an SDF texture painter that allows for editing Bezier curves within the Unity editor and converting them to SDF textures.

Feature

• SDF based Vector UI
• Batch rendering
• SDF Texture Painter

Screenshot

Overview Auto-Fitting Shapes to RectTransform & Shape Outlines and Shadows Parameter-Based Shape Adjustment Inner Fade for Outlines Spline Features (Supporting B-Spline and Polygon) SDFOp: Boolean Operations and Color Blending for Basic Shapes (Union, Subtract, Intersection) Additional UI Effect (Shiny and SDF Tex Pattern) Squircle (left: Basic, right: approximate (lightweight) version) Gradation (Linear, Radial, Conical)  Rainbow Gradation Effect (works with any gradation) Editor for creating Custom Shapes

This plugin is free and opensource on GitHub. Have fun!

■ Repository (upm ready)

GitHub - TLabAltoh/Unity-SDF-UI-Toolkit: UI package for Unity that render shapes with...

[andyz]

Looks interesting already!
Having a soft shadow built into a procedural panel would be very convenient for UI.

But I imagine you could also do a non-UI version for stylized 2d drawing?

[TLabAltoh]

Thank you for your comment ! Currently, non-UI version support is possible. I’ll consider it, but it may only feature for just rendering shape because this plugin uses full rect mesh for each shape and does not have generate tight mesh feature at runtime …

[TLabAltoh]

[Notification] Version 0.0.26 has been released

As this is an important update on a build error fix, we are notified of it here as well.

Fix

• build error coused by SDFPie

[jGate99]

This is amazing, and even though i love its free
thing soemthing this complicated should be paid so it can stay up to date and support unity versions

[TLabAltoh]

Thanks for the comment . I want this package to be accessible to as many developers as possible and needs more feedback for more development. So this plugin will remain OSS and we’ll continue to support the latest version of Unity as much as possible.

[PeaQew]

Hi,
this is very interesting. I’ve been using my own UI SDF solution, which I’m mostly happy with. I’ve been using a smoothing parameter to create things like drop shadows but also to control antialiasing. I noticed though that it’s not consistent across different resolutions and decided to use fwidth to control my AA (which is what I do for my non-UI SDF rendering using shader graph as well).

However I noticed that specifically the box SDF has issues with this, so I looked around and ended up finding this package, which has the same issue! Here’s what I’m talking about:

There is an artifact on the bottom-right corner of the box:

float delta = fwidth(sdf) * 0.5;
float mask = 1.0 - smoothstep(-delta, delta, sdf);
color.a *= mask;

Visualizing the result of fwidth:

color.rgb = fwidth(sdf) * 0.5;

This package seems to have the same issue:

With onion it’s even worse looking:

Again, this is only visible going towards the bottom-right corner, caused by the calculations of fwidth, seemingly only in UI space (as my non-UI SDF shaders made in shader graph, which are using fwidth, do not have these issues).

Any thoughts on this? I’ve been looking for a resolution/size independent AA solution the past few days but can’t seem to figure it out. Maybe I just have to live with this or go back to my old shaders :shrug:

Edit: Mistakenly thought there was an issue with the background when using onion, but that was an oopsie on my end. Updated the screenshot.

[TLabAltoh]

Hi @PeaQew , Thanks for the comment and the information. I just read and was able to reproduce the issue in my environment. First off, I don’t know how the function of such a lower layer (like fwidth) works (I know the use case of it but not its internal implementation), so I can’t go into too much detail about it. But as you say, this issue seems to be related to fwidth because this issue occurs not only in this package but also in other packages that use distance function and fwidth for rendering box shape on the ui space.

Video is here. Does this issue maybe have something to do with resolution or UI positioning? In the video, I mess around with the game view resolution and slide the box UI around a bit.

A similar issue occurs with Unity-UI-Rounded-Corners (Below is a screenshot of ImageWithIndependentRoundedCorners).

So far, I’ve only poked around a little, and I’m kinda stuck since I don’t know the full background on this. Has anyone else run into something like this? I’d love to hear about it (I’ll keep digging into it as much as I can, but feel free to chime in about this or anything else in the meantime—I’m all ears)

[PeaQew]

Glad to see you’re looking into this as well. I’m also stuck…

So far I’ve looked at different packages, and they either avoid fwidth and make you set a smoothness amount manually for each shape (e.g. MPUIkit, DTT Procedural UI, my own private package and probably more), which is inconsistent across different resolutions (not good!), or they use fwidth and have to deal with this weirdness.
It doesn’t even look that bad when the box is decently sized, but if you make it smaller, it gets really bad.

I even looked at Unity’s UGUI shader graph samples (they released a video about it today, lol) and their solution has the same issue. They’re using something like saturate(sdf / length(float2(ddx(sdf), ddy(sdf)) - 0.5) in shader graph, resulting in the same issues.

I also tried looking at how TMP handles their AA, but I’m not enough of a shader/math wizard to understand what’s going on and I don’t know how many things are handled differently due to using textures and other parameters instead. But from what I’m seeing it’s using some sort of scale factor to multiply the distance with at the end - no fwidth nor smoothstep (although it might do some smoothstep-y things somewhere along the way, it’s just not using the instrinsic function).

Oh and, as I was typing this, I tested some more with my SDF library made in shader graph for use outside of UI, and it does seem to have mostly similar issues with the box SDF, so I suppose it’s not the fault of the UI itself. This makes me think it’s not really “solvable” with just fwidth.

This is just rendered to a quad (as it’s usually used in VFX Graph). It’s less noticable and it’s on the top-right corner instead (UVs are different? Idk), but it’s there:

Edit: I just realized it’s “less noticable” because the background in the screenshot is gray, oops. So it’s pretty much the same effect that happens in UI space.

This whole thing wouldn’t be such a big deal if boxes weren’t such an integral part of UI design. Looking at UI Toolkit, visual elements by themselves mostly render boxes and they seem to have it figured out. Perfect looking sub-pixel AA that seemingly works at any resolution. I’d love to see their shader code to see how it’s done, but I’d expect a lot of magic that wouldn’t be of much use to me, lmao.

So yeah… if I figure something out I’ll post it here. I hope some shader wizard (or witch) can chime in to grant us some insight. In the meantime we just gotta deal with it I guess.

[TLabAltoh]

Thanks for the more detailed information. I’ve thought about this a bit. In the end, I can’t think of a good solution, but especially considering a case like this, anti-aliasing without fwidth might not be a bad idea if the smooth amount can be calculated well from the resolution (I haven’t verified this, so maybe it’s a theoretical breakdown).

@PeaQew

I also tried looking at how TMP handles their AA, but I’m not enough of a shader/math wizard to understand what’s going on and I don’t know how many things are handled differently due to using textures and other parameters instead. But from what I’m seeing it’s using some sort of scale factor to multiply the distance with at the end - no fwidth nor smoothstep (although it might do some smoothstep-y things somewhere along the way, it’s just not using the instrinsic function).

This is interesting. So that means …, the TMP implementation seems to be the best reference. I might take a look at the implementation myself (if I can understand it).

Originally, fwidth is rather a little bit heavy category of processing, so when there is a concrete prospect of implementing AA like TMP, I may replace the AA algorithm in this package itself with it. At that time, we would like to introduce it here as well, based on the implementation itself.

[TLabAltoh]

A few days ago, a rainbow color feature was added through a pull request (big thanks to tomgiagtz!). I haven’t had the chance to work on improving the anti-aliasing yet, but it’s definitely still on my timeline. Once I wrap up some of the other tasks I’m juggling, I’ll get back to it.

[TLabAltoh]

Currently considering implementing Liquid Glass as a new feature (However, due to the need for GrabPass, URP support might still be difficult…).

Github :

issue : Add Liquid Glass · Issue #32 · TLabAltoh/Unity-SDF-UI-Toolkit · GitHub

branch : GitHub - TLabAltoh/Unity-SDF-UI-Toolkit at experimental-liquid-glass

[TLabAltoh]

【Update】We now support the Liquid Glass effect in both BIRP and URP. The Liquid Glass blur effect is also supported, though only in URP for now (blur implementation in BIRP is planned for future updates).

[TLabAltoh]

Unity-SDF-UI-Toolkit v0.0.37 has been released !

Update: Only shaders that are actually referenced by materials in scenes or assets (not limited to the Resources folder) are now included in the build. This optimizes both build size and initial load time.

​Additionally, we fixed a bug where parallelograms were displayed as rectangles at game startup, and updated the package itself to support the latest version of Unity (6.5).

​Note: With this update, this package can now only be installed via UPM. (Cloning directly into the Assets folder via Git is no longer supported.) Also, if you use the liquid glass effect, you will need to install com.tlabaltoh.sdf-ui-toolkit-liquidglass in addition to the existing package.

[TLabAltoh]

Unity-SDF-UI-Toolkit v0.0.38 has been released!

Updates:
Added SDFOp. This feature allows you to create complex shapes using boolean operations based on basic geometric shapes. SDFOp also supports color blending for each shape. Supported boolean operations include Union, Subtract, and Intersection.

[jGate99]

Any plans for creating a ui toolkit version?
Btw once again, Great work

[TLabAltoh]

Thanks for the comment! Regarding UI Toolkit support, I still can’t say anything for sure yet. I’ve been looking into it, but due to its many limitations, I’m concerned that I won’t be able to achieve the same level of quality as the uGUI version. That said, I’d really love to make a UI Toolkit version if possible, so I’ll keep experimenting and investigating a bit more.