Unity-SDF-UI-Toolkit

This Unity plugin provides a UI 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.

Screenshot

Overview 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)
This feature was implemented thanks to tomgiagtz (Most of the implementation) and shino (Gamma space support, color suggestions) Liquid Glass Editor for creating Custom Shapes

Requirement

• com.unity.burst
• com.unity.mathematics
• com.unity.nuget.newtonsoft-json

Install

Unity Package Manager

add package from git URL ...

https://github.com/TLabAltoh/Unity-SDF-UI-Toolkit.git?path=/com.tlabaltoh.sdf-ui-toolkit#upm

Setup

• Enable CachingPreprocesser in ProjectSettins/Editor/ShaderCompilation

Liquid Glass

To use the LiquidGlass effect in both URP and BIRP, an additional package must be imported into your project.

https://github.com/TLabAltoh/Unity-SDF-UI-Toolkit.git?path=/com.tlabaltoh.sdf-ui-toolkit-liquidglass#upm

---

When using the Liquid Glass blur effect in URP, please import the following additional package into your project.

https://github.com/TLabAltoh/Unity-SDF-UI-Toolkit.git?path=/com.tlabaltoh.sdf-ui-toolkit-urp-blur#upm

After importing the package, add the LiquidGlassRenderPass to the RendererFeature you are using.

In the URP environment, the Liquid Glass effect is rendered as a post‑process pass, so please set the UI Canvas to Camera Space. Currently, only URP supports the LiquidGlass blur effect. Support for BIRP will be added once the implementation policy is finalized.

Additionally, because RenderGraph is enabled by default in Unity 6 when using URP, this package uses RenderGraph to implement the Liquid Glass effect in Unity 6 and newer versions. If you need to use the Liquid Glass effect without the RenderGraph API, you must disable RenderGraph first. To do this, enable Capability Mode (RenderGraph disabled) in the Project Settings / Graphics menu.

Additionally, please add the following as a Scripting Define Symbol in the Project Settings/Player.

URP_COMPATIBILITY_MODE

Warning

In Unity 6, there is a bug where the Gaussian blur processing in Liquid Glass does not function until entering Play Mode (likely because the material for the Gaussian blur is not generated correctly). Since the Gaussian blur processing works when entering Play Mode and in the built executable (.exe), I do not consider this a critical issue, but I would like to resolve it at some point.

Warning

Please note that starting from Unity 6.6, disabling the RenderGraph system is no longer supported.

Feature

Vector UI

Vector UI

Vector UI offers advantages in quality and dynamic UI creation. This plugin includes the SDFUI class, and most of the main components inherit from it. Additionally, most SDFUI components render graphics as Vector UI using signed distance functions.

[!NOTE]
SDFSpline is not supported in WebGL platform because SDFSpline uses StructuredBuffer and WebGL doesn't support it.

How to set the default option of SDFUI

Please open SDFUISettings from TLab\UI\SDF\Settings.

Here you can set the default value of SFUUI.

This feature was implemented thanks to AAAYaKo.

Batch rendering

Batch rendering

To optimise performance, this plugin will batch-render SDFUIs that have the same properties. This feature was implemented thanks to AAAYaKo.

SDF Texture Painter

SDF Texture Painter

If the shape is complex (like an SDFSpline, which might be the only one at the moment), it can significantly impact performance. If you want to use a complex shape while considering app performance, replacing the current shape with an SDFTex might be more efficient. The SDF Tex Painter has the ability to edit cubic Bezier curves and convert them to SDF textures (Texture2D).

How to make a new one

Select Create/TLab/UI/SDF/SDF Tex Painter

How to Edit a Bezier Path

Common

• Shift + Left Click: Select Anchor Handles
• Shift + Ctrl + Left Click: Select all Handles of the Bezier segment
• G: Move selected handles
• R: Rotate selected handles
• S: Scale selected handles
• Right Click: Deselect Anchor Handles or Cancel Editing
• Delete: Delete Selected Handle

EditMode "Move"

• Left Click + Mouse Drag: Move Anchor Handle
• Ctrl + Left Click + Mouse Drag: Move Control Handle

EditMode "Add"

• Left Click: Add new Bezier Handle

EditMode "Primitive"

• Left Click: Add new Bezier Primitive (Circle or Box)

Implementation Approach

Cu2Qu

It is difficult to calculate distance from cubic Bezier mathematically. So SDF Text Painter converts the cubic Bezier curve to a quadratic Bezier curve based on this code.

Lisence

This repository is MIT licensed.

References

• Unity-UI-Rounded-Corners created by kirevdokimov
• Unity-UI-SDF created by BlenMiner
• distfunctions2d
• liquidglass