To make the swirl inside the portal, you need to create a material and use it on a Static Mesh disc. To make the swirl material, you can use the provided Green_Layer_Swirl.png below, or create your own swirling image and import it into your UEFN project.
Creating a Swirling Material
Open the Content Browser in the editor and follow these steps to create a material.
-
In the Content Browser right-click to open the context menu.
-
Select Material from the context menu. A Material thumbnail appears in the Content Browser.
-
Name the Material Mystic_Swirl_Mat.
Creating the Main Configuration
Open the Material editor to build the portal material. You’ll need to create 3 main configurations of nodes, then group the nodes by turning Constant material nodes into parameters to control the material color, rotation speed, and opacity.
-
Double-click the Material thumbnail to open the Material editor.
- Add the following material nodes to the material graph:
- Texture Sample
- Rotator
- Time
- Constant3Vector
- Clamp
- 2 x Add
- 4 x Constant
- 5 x Multiply
Click image to enlarge.
-
On the Time node, drag off the pin and plug it into the A input on the Multiply node. On the Constant node, drag off the pin and plug it into the B input on the Multiply node.
This node section controls the timing of the material.
-
On the Multiply node, drag off the pin and plug it into the Time input on the Rotator node.
The multiply node takes the Constant node value and multiplies it by Time on the rotator node. This determines the speed the material turns.
-
Select the Texture node in the material graph and the Texture node options appear in the Details panel.
-
In the Details panel, add the Green_Layer_Swirl.png to the Texture option. The swirl texture is added to the Texture node.
-
On the Rotator node, drag off the pin and plug it into the UV input on the Texture Sample node.
This Rotator node targets the UVs of the texture and determines how quickly the UVs rotate.
-
On the Texture Sample node, drag off the Red pin and plug it into the A input on the Second Multiply node. Drag off the second Constant node pin and plug into the B input on the Multiply node.
The opacity of the texture’s Red channel is controlled by the value entered on the Constant node. The Red channel opacity value is then multiplied by the Multiply node.
-
Click and drag to select the entire node configuration, then press Ctrll + C to copy the configuration and Ctrl + V to paste the configuration two more times.
The first configuration set controls the values for the Core material, the second configuration set controls the values for the Vortex, the last configuration set controls the values for the Sparks.
-
On the Multiply node at the end of the connection of the second configuration, right-click the A input on the Multiply node and select Break This Link from the context menu. This disconnects the Texture node from the Multiply node.
-
On the Texture node of the second configuration, drag off the Green pin and plug it into the A input on the Multiply node. This connects the G channel of the texture to the Multiply node.
The opacity value of the texture’s Green channel is now targeted by the Constant node and the Multiply node.
-
On the Multiply node, at the end of the connection of the third configuration, right-click the A input on the Multiply node and select Break This Link from the context menu. This disconnects the Texture node from the Multiply node.
-
On the Texture node, drag off the Blue pin and plug it into the A input on the Multiply node. This connects the B channel of the texture to the Multiply node.
The opacity value of the texture’s Blue channel is now targeted by the Constant node and the Multiply node.
Creating Parameter Groups
The material is controlled through parameter groups that determine the rotation speed, opacity, and color. They also provide a way to easily adjust these levels when you create a Material Instance from the Mystic Swirl Material.
To control parameters, you will turn the Constant nodes into named parameters.
Color Group
-
Select the Constant3Vector node in the material graph. In theDetails panel, click the Constant option to select a color from the Color Picker. Click OK to use the selected color.
-
On the Constant3Vector node, drag off the white pin and plug it into the A input on a Multiply node. Drag off a Constant node and plug it into the B input on the Multiply node.
These nodes control the emissive color of the material.
- On the Constant3Vector node, right-click and select Convert to Parameter from the context menu. Name the new parameter Color. In the Details panel, change the following options:
- Group = 1
- Set Priority = 1
- On the Constant node, set the Value to 0.5. Right-click and select Convert to Parameter from the context menu. Name the new parameter Emissive Color. In the Details panel, change the following options:
- Group = 1
- Set Priority = 2
Speed Group
- Select the Constant node on the end of the first configuration, then right-click and select Convert to Parameter from the context menu. Name the new parameter Core Rotation Speed. In the Details panel, set the following parameter options:
- Default Value = 30.0
- Group = 2
- Set Priority = 1
This controls the speed the UVs of the main material turn.
- Select the Constant node on the end of the second configuration, then right-click and select Convert to Parameter from the context menu. Name the new parameter Vortex Rotation Speed. In the Details panel, set the following parameter options:
- Default Value = -5.0
- Group = 3
- Set Priority = 2
This controls the speed the UVs of the vortex material turn.
- Select the Constant node on the end of the third configuration, then right-click and select Convert to Parameter from the context menu. Name the new parameter Spark Rotation Speed. In the Details panel, set the following parameter options:
- Default Value = 3.0
- Group = 3
- Set Priority = 3
This controls the speed the UVs of the spark material turn.
Opacity Group
- Select the second Constant node at the beginning of the first configuration, then right-click and select Convert to Parameter from the context menu. Name the new parameter Core Opacity. In the Details panel, set the following parameter options:
- Default Value = 1.0
- Group = 2
- Set Priority = 1
This controls the opacity levels for the core material.
- Select the second Constant node at the beginning of the second configuration, then right-click and select Convert to Parameter from the context menu. Name the new parameter Vortex Opacity. In the Details panel, set the following parameter options:
- Default Value = 1.0
- Group = 2
- Set Priority = 2
This controls the opacity levels for the vortex material.
- Select the second Constant node at the beginning of the second configuration, then right-click and select Convert to Parameter from the context menu. Name the new parameter Spark Opacity. In the Details panel, set the following parameter options:
- Default Value = 1.0
- Group = 2
- Set Priority = 3
This controls the opacity level for the spark material.
Set Up the Main Material Node
To test your material at this stage, you need to set up the Main Material Node (MMN). Select the MMN. In the Details panel, set the following options:
- Blend Mode = Additive
- Shading Model = Unlit
- Two Sided = Enable
This enables the Opacity input and disables other input options you don’t need. It also makes the material cover both sides of the Static Mesh so the portal swirl can be seen on both sides.
In the viewport, select the cube mesh to preview the material. Separately plug each node configuration into the MMN by dragging off the last Multiply node pin and plugging into the Emissive Color and Opacity inputs on the MMN. This shows you how each layer of the material behaves.
You’ll need to move the viewport camera to view the material on the cube surface.
| Configurations | GIF |
|---|---|
| Core Configuration |  |
| Vortex Configuration |  |
| Spark Configuration |  |
Clamping the Groups Together
All node configurations and color groups must be added together. You’ll also add a Constant node to control the overall opacity of the material by turning it into a parameter. Last of all, you will clamp these configurations and the Overall Opacity together to control the different layers and color of the swirling material.
-
Place an Add node between the Core node configuration and the Vortex node configuration. Drag off the Core Multiply pin and plug it into the A input on the Add node, then drag off the Vortex Multiply pin and plug it into the B input on the Add node.
This layers the Core material and the Votex material by adding themtogether.
-
Place a second Add node between the first Add node and the Spark node configuration. Drag off the first Add pin and plug it into the A input on the second Add node, then drag off the Spark Multiply pin and plug it into the B input on the second Add node.
This adds the Spark material as a third layer to the material through the second Add node.
-
Place a Multiply node between the Color Multiply node and the second Add node. Drag off the Color Multiply pin and plug it into the A input on the Multiply node.
-
Right-click the Material Graph and select Utility > Add Reroute Node… from the Node options. A reroute nodule appears.
-
Drag off the Add pin and plug it into the input on the reroute node, then drag off the reroute pin and plug it into the B input on the Multiply node.
-
Place a second Multiply node between the first Multiply node and the reroute node. Drag off the reroute pin and plug it into the A input on the second Multiply node.
-
Behind the second Multiply node, press 1 and left-click to place a Constant node, then drag off the Constant pin and plug it into the B input on the Multiply node. Right-click the Constant node and select Convert to Parameter from the context menu. Name the parameter Overall Opacity.
-
On the first Multiply node, drag off the Multiply pin and plug it into the Emissive Color output on the MMN.
-
Place a Clamp node in front of the second Multiply node, then drag off the Multiply pin and plug it into the blank input on the Clamp node.
-
On the Clamp node, drag off the Clamp pin and plug it into the Opacity input on the MMN.
The viewport displays all configurations of the material swirling together at different speeds.
-
Click Apply > Save to save the material.
-
Exit out of the Material editor and back to the Content Browser. Right-click Mystic_Swirl_Mat and select Create Material Instance from the context menu. A Material Instance is created in the Content Browser.
Next, you’ll model a disc to place the material on.