About UI Toolkit Filters, Effects & Shaders
- Art & Visuals > VFX
It adds custom filter options to the Filters attribute introduced in Unity 6.3.0f1. It requires 6000.3+ because custom filters have been first introduced in Unity 6.3.
Multiple Filter Effects
Burn, Pixelate, Vignette, Outline, Chromatic Aberration, Dissolve, HSV (a more configurable version than Unitys default HSV), Color Overlay.
Code-Free Workflow
Just add a custom filter and then tweak the properties in the UI Builder. However you can also add them via code. Don't forget that you can tweak the material properties too.
HLSL & Shader Graph included
Your dream effect is not included? No problem! Copy one of the examples and make your own shaders manually with HLSL or with Shader Graph
Scripting API
Just one line to change filter parameters.
Full source code included
I publish this asset with full source code because as a developer I know how helpful it is to have source code access.
VR Support*
Confirmed to work on a Meta Quest S3.
Things you should know
This is NOT a default UI (uGUI) or IMGUI asset. This is for Unitys new UI Toolkit.
You need Unity 6000.3 or higher.
URP "only" (HDRP/Built-in untested): URP is guaranteed to work. HDRP and Built-In RP are not part of the test setup but may work.
Batching: Custom Filters break batching so use them with care. This is not a limitation of this asset but true for all UI Toolkit filters.
Low Resolution: Custom filtered UI content may look like low resolution compared to regular UI. This is a limitation of how Unity built the UI filters.
FAQs
Q: Does it include or can I make a Photoshop like Overlay filter with this?
A: Sadly no as the filters do not have access to the color buffer meaning the filters do not know what pixel color is below them and thus blending effects that require that info (like overlay, add, remove, ...) are impossible at the moment.
Usage
1) Open the UI Builder Window
2) In your element inspector (on the right) scroll down to Filters (only available in Unity 6.3+)
3) Click on the (+) icon and select "Custom".
4) Pick one of the Kamgam.. filter definitions.
5) Tweak to your liking
6) Done.
HINT 1:
The MATERIALS of the filter definitions expose some extra parameters you can tweak. Unity does only support up to 4 filter attributes right now.
HINT 2:
The asset includes shaders written in HLSL as the Unity manual tells you to do BUT it also contains shader graphs that have been tweaked to work with UI Toolkit too (use them as templates). If you want to do your own shaders in Shader Graph then please notice that UI Toolkit your shaders do NOT have access to the frame buffer and Unity does not guarantee that all nodes work.
HINT 3:
You can stack multiple filters on top of each other. Notice the Vignette filter used on the backgrounds in the examples.
Multiple Filter Effects
Burn, Pixelate, Vignette, Outline, Chromatic Aberration, Dissolve, HSV (a more configurable version than Unitys default HSV), Color Overlay.
Code-Free Workflow
Just add a custom filter and then tweak the properties in the UI Builder. However you can also add them via code. Don't forget that you can tweak the material properties too.
HLSL & Shader Graph included
Your dream effect is not included? No problem! Copy one of the examples and make your own shaders manually with HLSL or with Shader Graph
Scripting API
Just one line to change filter parameters.
Full source code included
I publish this asset with full source code because as a developer I know how helpful it is to have source code access.
VR Support*
Confirmed to work on a Meta Quest S3.
Things you should know
This is NOT a default UI (uGUI) or IMGUI asset. This is for Unitys new UI Toolkit.
You need Unity 6000.3 or higher.
URP "only" (HDRP/Built-in untested): URP is guaranteed to work. HDRP and Built-In RP are not part of the test setup but may work.
Batching: Custom Filters break batching so use them with care. This is not a limitation of this asset but true for all UI Toolkit filters.
Low Resolution: Custom filtered UI content may look like low resolution compared to regular UI. This is a limitation of how Unity built the UI filters.
FAQs
Q: Does it include or can I make a Photoshop like Overlay filter with this?
A: Sadly no as the filters do not have access to the color buffer meaning the filters do not know what pixel color is below them and thus blending effects that require that info (like overlay, add, remove, ...) are impossible at the moment.
Usage
1) Open the UI Builder Window
2) In your element inspector (on the right) scroll down to Filters (only available in Unity 6.3+)
3) Click on the (+) icon and select "Custom".
4) Pick one of the Kamgam.. filter definitions.
5) Tweak to your liking
6) Done.
HINT 1:
The MATERIALS of the filter definitions expose some extra parameters you can tweak. Unity does only support up to 4 filter attributes right now.
HINT 2:
The asset includes shaders written in HLSL as the Unity manual tells you to do BUT it also contains shader graphs that have been tweaked to work with UI Toolkit too (use them as templates). If you want to do your own shaders in Shader Graph then please notice that UI Toolkit your shaders do NOT have access to the frame buffer and Unity does not guarantee that all nodes work.
HINT 3:
You can stack multiple filters on top of each other. Notice the Vignette filter used on the backgrounds in the examples.