{"id":21991847,"url":"https://github.com/tlabaltoh/unity-sdf-ui-toolkit","last_synced_at":"2025-08-10T11:08:56.421Z","repository":{"id":200381315,"uuid":"705351606","full_name":"TLabAltoh/Unity-SDF-UI-Toolkit","owner":"TLabAltoh","description":"UI package for Unity that render shapes with outlines, shadows and rounded corners using signed distance functions (SDF). And an SDF texture editor that allows users to edit Bezier curves and convert them to SDF textures within the Unity editor.","archived":false,"fork":false,"pushed_at":"2025-08-09T11:34:00.000Z","size":47639,"stargazers_count":133,"open_issues_count":5,"forks_count":9,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-08-09T13:18:05.007Z","etag":null,"topics":["c-sharp","cg","hlsl","plugin","sdf-2d","sdf-ui","shader","shaderlab","ugui","uguicomponent","ui","ui-toolkit","unity","unity-package","unity-plugin","unity-shader","unity2d","unity3d","upm","upm-package"],"latest_commit_sha":null,"homepage":"","language":"C#","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/TLabAltoh.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2023-10-15T19:10:54.000Z","updated_at":"2025-08-09T11:34:04.000Z","dependencies_parsed_at":null,"dependency_job_id":"b2191dad-658e-401a-8deb-f17d937575bd","html_url":"https://github.com/TLabAltoh/Unity-SDF-UI-Toolkit","commit_stats":null,"previous_names":["tlabaltoh/unityr-ui-rounded-corners-extension","tlabaltoh/unity-sdf-ui-toolkit"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/TLabAltoh/Unity-SDF-UI-Toolkit","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TLabAltoh%2FUnity-SDF-UI-Toolkit","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TLabAltoh%2FUnity-SDF-UI-Toolkit/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TLabAltoh%2FUnity-SDF-UI-Toolkit/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TLabAltoh%2FUnity-SDF-UI-Toolkit/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/TLabAltoh","download_url":"https://codeload.github.com/TLabAltoh/Unity-SDF-UI-Toolkit/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TLabAltoh%2FUnity-SDF-UI-Toolkit/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":269713884,"owners_count":24463244,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-08-10T02:00:08.965Z","response_time":71,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["c-sharp","cg","hlsl","plugin","sdf-2d","sdf-ui","shader","shaderlab","ugui","uguicomponent","ui","ui-toolkit","unity","unity-package","unity-plugin","unity-shader","unity2d","unity3d","upm","upm-package"],"created_at":"2024-11-29T20:11:55.996Z","updated_at":"2025-08-10T11:08:54.938Z","avatar_url":"https://github.com/TLabAltoh.png","language":"C#","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cimg src=\"Media/header.png\" width=\"800\"\u003e\u003c/img\u003e\n\n# Unity-SDF-UI-Toolkit\nThis 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.\n\n## Screenshot\n\u003ctable\u003e\n    \u003ccaption\u003eOverview\u003c/caption\u003e\n    \u003ctr\u003e\n        \u003ctd\u003e\u003cimg src=\"Media/overview.png\" width=\"512\"\u003e\u003c/img\u003e  \u003c/td\u003e\n    \u003c/tr\u003e\n\u003c/table\u003e\n\u003ctable\u003e\n    \u003ctr\u003e\n        \u003ctd\u003e\u003cimg src=\"Media/demo.0.gif\" width=\"256\"\u003e\u003cimg\u003e\u003c/td\u003e\n        \u003ctd\u003e\u003cimg src=\"Media/demo.1.gif\" width=\"256\"\u003e\u003cimg\u003e\u003c/td\u003e\n        \u003ctd\u003e\u003cimg src=\"Media/demo.2.gif\" width=\"256\"\u003e\u003cimg\u003e\u003c/td\u003e\n        \u003ctd\u003e\u003cimg src=\"Media/demo.3.gif\" width=\"256\"\u003e\u003cimg\u003e\u003c/td\u003e\n        \u003ctd\u003e\u003cimg src=\"Media/demo.4.gif\" width=\"256\"\u003e\u003cimg\u003e\u003c/td\u003e\n    \u003c/tr\u003e\n\u003c/table\u003e\n\u003ctable\u003e\n    \u003ctr\u003e\n        \u003ctd\u003e\u003cimg src=\"Media/demo.5.gif\" width=\"256\"\u003e\u003cimg\u003e\u003c/td\u003e\n        \u003ctd\u003e\u003cimg src=\"Media/demo.6.gif\" width=\"256\"\u003e\u003cimg\u003e\u003c/td\u003e\n        \u003ctd\u003e\u003cimg src=\"Media/demo.7.gif\" width=\"256\"\u003e\u003cimg\u003e\u003c/td\u003e\n    \u003c/tr\u003e\n\u003c/table\u003e\n\u003ctable\u003e\n    \u003ccaption\u003eAdditional UI Effect (Shiny and SDF Tex Pattern)\u003c/caption\u003e\n    \u003ctr\u003e\n        \u003ctd\u003e\u003cimg src=\"Media/demo.8.png\" width=\"256\"\u003e\u003cimg\u003e\u003c/td\u003e\n        \u003ctd\u003e\u003cimg src=\"Media/demo.9.png\" width=\"256\"\u003e\u003cimg\u003e\u003c/td\u003e\n    \u003c/tr\u003e\n\u003c/table\u003e\n\u003ctable\u003e\n    \u003ccaption\u003eSquircle (left: Basic, right: approximate (lightweight) version)\u003c/caption\u003e\n    \u003ctr\u003e\n        \u003ctd\u003e\u003cimg src=\"Media/demo.10.gif\" width=\"256\"\u003e\u003cimg\u003e\u003c/td\u003e\n        \u003ctd\u003e\u003cimg src=\"Media/demo.11.gif\" width=\"256\"\u003e\u003cimg\u003e\u003c/td\u003e\n    \u003c/tr\u003e\n\u003c/table\u003e\n\u003ctable\u003e\n    \u003ccaption\u003eGradation (Linear, Radial, Conical)\u003c/caption\u003e\n    \u003ctr\u003e\n        \u003ctd\u003e\u003cimg src=\"Media/demo.12.jpg\" width=\"256\"\u003e\u003cimg\u003e\u003c/td\u003e\n        \u003ctd\u003e\u003cimg src=\"Media/demo.13.jpg\" width=\"256\"\u003e\u003cimg\u003e\u003c/td\u003e\n        \u003ctd\u003e\u003cimg src=\"Media/demo.14.jpg\" width=\"256\"\u003e\u003cimg\u003e\u003c/td\u003e\n    \u003c/tr\u003e\n\u003c/table\u003e\n\n\u003ctable\u003e\n    \u003ccaption\u003eRainbow Gradation Effect (works with any gradation)\u003c/br\u003eThis feature was implemented thanks to \u003ca href=\"https://github.com/tomgiagtz\"\u003etomgiagtz\u003c/a\u003e\u003c/caption\u003e\n    \u003ctr\u003e\n        \u003ctd\u003e\u003cimg src=\"Media/demo.15.jpg\" width=\"256\"\u003e\u003cimg\u003e\u003c/td\u003e\n        \u003ctd\u003e\u003cimg src=\"Media/demo.16.jpg\" width=\"256\"\u003e\u003cimg\u003e\u003c/td\u003e\n        \u003ctd\u003e\u003cimg src=\"Media/demo.17.jpg\" width=\"256\"\u003e\u003cimg\u003e\u003c/td\u003e\n    \u003c/tr\u003e\n\u003c/table\u003e\n\u003ctable\u003e\n    \u003ccaption\u003eEditor for creating Custom Shapes\u003c/caption\u003e\n    \u003ctr\u003e\n        \u003ctd\u003e\u003cimg src=\"Media/sdf-tex-painter-path-view.png\" width=\"512\"\u003e\u003cimg\u003e\u003c/td\u003e\n        \u003ctd\u003e\u003cimg src=\"Media/sdf-tex-painter-sdf-view.png\" width=\"512\"\u003e\u003cimg\u003e\u003c/td\u003e\n    \u003c/tr\u003e\n\u003c/table\u003e\n\n## Requirement\n- [com.unity.burst](https://docs.unity3d.com/2021.1/Documentation/Manual/com.unity.burst.html)\n- [com.unity.mathematics](https://docs.unity3d.com/2021.3/Documentation/Manual/com.unity.mathematics.html)\n- [com.unity.nuget.newtonsoft-json](https://docs.unity3d.com/Packages/com.unity.nuget.newtonsoft-json@3.0/manual/index.html)\n\n## Install\n### Git\nClone this repository with the following command\n```\ngit clone https://github.com/TLabAltoh/Unity-SDF-UI-Toolkit.git\n```\n\nor\n\n```\ngit submodule add https://github.com/TLabAltoh/Unity-SDF-UI-Toolkit.git\n```\n### Unity Package Manager\nadd package from git URL ...\n```\nhttps://github.com/TLabAltoh/Unity-SDF-UI-Toolkit.git#upm\n```\n\n### Setup\n- Enable ```CachingPreprocesser``` in ```ProjectSettins/Editor/ShaderCompilation```\n\n## Feature\n### Vector UI\nVector 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.\n\n\u003e [!NOTE]  \n\u003e ```SDFSpline``` is not supported in [WebGL](https://docs.unity3d.com/Manual/webgl.html) platform because ```SDFSpline``` uses [```StructuredBuffer```](https://docs.unity3d.com/ScriptReference/GraphicsBuffer.Target.Structured.html) and WebGL doesn't support it.\n\n\u003cdetails\u003e\u003csummary\u003eHow to set the default option of SDFUI\u003c/summary\u003e\n\nPlease open ```SDFUISettings``` from ```TLab\\UI\\SDF\\Settings```.\n\n\u003cimg src=\"Media/settings-ui.0.png\" width=\"256\"\u003e\u003c/img\u003e  \n\nHere you can set the default value of ```SFUUI```.\n\n\u003cimg src=\"Media/settings-ui.1.png\" width=\"256\"\u003e\u003c/img\u003e\n\nThis feature was implemented thanks to [AAAYaKo](https://github.com/AAAYaKo).\n\n\u003c/details\u003e\n\n### Batch rendering\nTo optimise performance, this plugin will batch-render ```SDFUI```s that have the same properties. This feature was implemented thanks to [AAAYaKo](https://github.com/AAAYaKo).\n\n### SDF Texture Painter\nIf 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```).\n\n#### How to make a new one\nSelect ```Create/TLab/UI/SDF/SDF Tex Painter```\n\n#### How to Edit a Bezier Path\n\u003cimg src=\"Media/sdf-tex-painter-bezier-prop.png\" width=\"256\"\u003e\u003c/img\u003e  \n\n##### Common\n\n- ```Shift``` + ```Left Click```: Select Anchor Handles\n- ```Shift``` + ```Ctrl``` + ```Left Click```: Select all Handles of the Bezier segment\n- ```G```: Move selected handles\n- ```R```: Rotate selected handles\n- ```S```: Scale selected handles\n- ```Right Click```: Deselect Anchor Handles or Cancel Editing\n- ```Delete```: Delete Selected Handle\n\n##### EditMode \"Move\"\n- ```Left Click``` + ```Mouse Drag```: Move Anchor Handle\n- ```Ctrl``` + ```Left Click``` + ```Mouse Drag```: Move Control Handle\n\n##### EditMode \"Add\"\n- ```Left Click```: Add new Bezier Handle\n\n##### EditMode \"Primitive\"\n- ```Left Click```: Add new Bezier Primitive (```Circle``` or ```Box```)\n\n#### Implementation Approach\n##### Cu2Qu\nIt 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](https://github.com/googlefonts/cu2qu). \n\n## Features under consideration\n- [Implementation of Liquid Glass effect](https://github.com/TLabAltoh/Unity-SDF-UI-Toolkit/issues/32)\n[branch:experimental-liquid-glass](https://github.com/TLabAltoh/Unity-SDF-UI-Toolkit/tree/experimental-liquid-glass)\n\n## Lisence\nThis repository is MIT licensed.\n\n## References\n- [Unity-UI-Rounded-Corners](https://github.com/kirevdokimov/Unity-UI-Rounded-Corners) created by [kirevdokimov](https://github.com/kirevdokimov)\n- [Unity-UI-SDF](https://github.com/BlenMiner/Unity-UI-SDF) created by [BlenMiner](https://github.com/BlenMiner)\n- [distfunctions2d](https://iquilezles.org/articles/distfunctions2d/)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftlabaltoh%2Funity-sdf-ui-toolkit","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftlabaltoh%2Funity-sdf-ui-toolkit","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftlabaltoh%2Funity-sdf-ui-toolkit/lists"}