Create a custom swirl filter

Create a custom filter with a swirl effect.

읽는 시간 6분

최근 업데이트: 24일 전

You can create custom filters to apply any effect you want to a visual element. To create a custom filter, define the filter function in a custom filter asset. The custom filter asset defines the filter parameters, passes, and parameter bindings. You can apply the same custom filter to an element and its children with the

filter

property, or to the content behind an element with the

backdrop-filter

property.

This example demonstrates a custom filter, created in the custom filter asset's

Inspector

window. You can also create custom filters in C# code.

Example overview

This example creates a custom filter with a swirl effect, which distorts the visual element by rotating it around a center point.

You can provide custom filter functions with parameters, set in style or directly in the UI Builder. For example, the built-in blur filter function has only one parameter: the blur radius. This custom swirl filter function has two parameters, the angle and the radius of the swirl:

Angle: Sets the angle of the swirl effect.
Radius: Sets the radius of the swirl effect.

This example uses a sample swirl shader and material to create the swirl filter. The shader, which defines the effect, includes two properties—

_Angle

and

_Radius

—to control the swirl’s angle and radius. The material file,

Swirl.mat

, is configured to use the swirl shader. To apply the effect, bind the material properties to the filter parameters.

You can find the completed files for the example in this GitHub repository.

Prerequisites

This guide is for developers familiar with the Unity Editor, UI Toolkit, and C# scripting. Before you start, get familiar with the following:

Create a custom filter asset

Create the filter asset and define the filter parameters, passes, and parameter bindings in the asset's Inspector window.

Create a project in Unity with any template.
In the
```
Assets
```
folder, create a folder named
```
SwirlFilter
```
.
Download and import the following files into the
```
SwirlFilter
```
folder:
- Swirl.shader
- Swirl.mat
To create a
```
FilterFunctionDefinition
```
asset, right-click in the
```
SwirlFilter
```
folder and select Create > UI Toolkit > Filter Function Definition.
Rename the asset to
```
SwirlFilter
```
.
In the Inspector window for the
```
SwirlFilter
```
asset, set Filter Name to
```
swirl
```
.
In the Parameters section, add the two parameters and set the Type of both parameters to
```
float
```
.
Set the name of the first parameter to
```
Angle
```
. This controls the angle of the swirl.
Set the name of the second parameter to
```
Radius
```
. This controls the radius of the swirl.
In the Passes section, add a new element and set the Material to
```
Swirl.shader
```
.
In the Parameter Bindings section, add two bindings.
For the first binding, do the following:
- Set the Index to
```
0
```
  .
- Set the Property to
```
_Angle
```
  .
For the second binding, do the following:
- Set the Index to
```
1
```
  .
- Set the Property to
```
_Radius
```
  .
Define swirl filter in the Inspector window

Create the UI Document and the style sheet

To get the swirl effect, create a UXML file with two VisualElements with different background colors. The first VisualElement is the parent element, and the second VisualElement is the child element. Apply the custom filter to the parent element so that the child element is affected by the filter.

Create a new UI Toolkit USS file named

SwirlFilterExample.uss

with the following content:


.outside {    flex-grow: 1;    position: absolute;    height: 207px;    width: 234px;    top: 46px;    left: 27px;    background-color: rgb(255, 0, 0);}.inside {    flex-grow: 1;    position: absolute;    height: 75px;    width: 100px;    top: 46px;    left: 27px;    background-color: rgb(0, 255, 247);}

Create a new UI Toolkit UXML file named

SwirlFilterExample.uxml

with the following content:


<engine:UXML xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:engine="UnityEngine.UIElements" xmlns:editor="UnityEditor.UIElements" noNamespaceSchemaLocation="../UIElementsSchema/UIElements.xsd" editor-extension-mode="False">    <Style src="SwirlFilterExample.uss" />    <engine:VisualElement class="outside">        <engine:VisualElement class="inside" />    </engine:VisualElement></engine:UXML>

Apply the custom filter in the UI Builder

To apply the custom filter in the UI Builder, add the custom filter function to the UI Builder and set the parameters.

Double-click the
```
SwirlFilterExample.uxml
```
file to open it in the UI Builder.
In the StyleSheets panel, select + > Add Existing USS and select
```
SwirlFilterExample.uss
```
.
In the Hierarchy window, select the parent VisualElement.
In the Inspector window, select Inline Styles > Filter.
In the Filter section, select Add(+).
Set Function to Custom.
Set Definition to
```
SwirlFilter
```
.
In the Angle field, set the angle value, such as
```
58.9
```
.
In the Radius field, set the radius value, such as
```
2.3
```
.
Apply swirl filter in UI Builder
You can adjust the angle and radius values to check the effect of the swirl filter in the
ViewPort
?
of the UI Builder.

Save the filter function to USS

You can save the filter function to the USS file instead of applying it as the inline style.

In the Inspector window of the parent VisualElement, click in the Style Class List field and enter
```
.filter-effect
```
.
Select Extract Inlined Style to New Class. This adds the following USS class to the
```
SwirlFilterExample.uss
```
file and applies the class to the parent VisualElement:
```
.filter-effect {    filter: filter("SwirlFilter/SwirlFilter.asset" 58.9 2.3);}
```

Apply the custom filter behind an element

The

filter

property applies the swirl to the element and its children. To swirl the content that Unity renders behind an element instead, apply the same custom filter with the

backdrop-filter

property. Both properties accept the same filter functions, so the

SwirlFilter

asset works with either one.

To swirl the parent element's background behind the child element, do the following:

In the Hierarchy window, select the child VisualElement.
In the Inspector window, select Background > Color and set the alpha value to
```
50
```
. The element's own background renders on top of the filtered backdrop, so an opaque background hides the effect.
Select Inline Styles > Backdrop Filter.
In the Backdrop Filter section, select Add(+).
Set Function to Custom.
Set Definition to
```
SwirlFilter
```
.
In the Angle field, set the angle value, such as
```
58.9
```
.
In the Radius field, set the radius value, such as
```
2.3
```
.

The child element swirls the red background of the parent element instead of its own content.

To apply the same effect from a style sheet, use the custom filter function in the

backdrop-filter

property:


.backdrop-swirl {    backdrop-filter: filter("SwirlFilter/SwirlFilter.asset" 58.9 2.3);    background-color: rgba(0, 255, 247, 0.2);}

참고

A backdrop filter samples only the area directly behind the element and clamps the result at the element's edges. Read margins don't expand the captured area, so a custom filter can't sample content outside the element's bounds when you use it as a backdrop filter.

기술 자료

Development

User Acquisition

Monetization

산업 분야

Unity Engine

User Manual

Script Reference