Portal / Vortex for UE5

01

Visual Target

Polar UV Rim Emission Distortion Ready

What we are building: a blue portal with a crisp outer rim, visible swirl motion, darker center pull, and enough value separation that the player can read it from a gameplay camera.

The rim is the silhouette. The swirl is the motion. The center is the depth cue. Do not let all three fight for attention.

02

Use Cases

Hero Teleport gate A large readable opening for a level transition, spawn point, or cinematic beat.

Gameplay Spawn / despawn hole Drive radius, rim width, and emission from Blueprint or Niagara when enemies or spells appear.

Targeting Magic reticle A flattened version can work as a ground indicator if the rim stays clean and the interior stays subtle.

Do not use this as-is for a physically accurate black hole, realistic lensing, or heavy screen distortion. This is a stylized material language for readable game VFX.

03

Mental Model

Think in rings, not noise

The portal should be designed from the outside inward. First establish the outer rim, then the inner swirl, then the center. Noise is only there to break up the surface; it should not define the whole shape.

Polar UVs give the portal its language

Convert regular UVs into radius and angle. Radius gives you rings. Angle gives you rotation. Once those are separate, the material becomes much easier to art-direct.

04

Graph Steps

Center UV Radius + angle Ring mask Swirl motion Center pull Emission + distortion

1. Center the UVs

Subtract 0.5 from the UV so the portal center becomes zero. From there, `length(centeredUV)` gives you distance from the center and `atan2` gives you the angle around the circle.

Beginner check: preview radius as grayscale. It should look like a clean circular gradient.

2. Build the outer rim first

Use two SmoothStep operations or a radial band function to create the rim. This rim is the portal silhouette, so keep it cleaner than the interior.

Senior note: rim thickness should usually be stable in screen readability, not just pretty in the material preview.

3. Make the swirl from polar UVs

Use angle plus time for rotation, then mix in radius so the inner area can move differently from the outer area. This is where the portal starts feeling like it has direction.

4. Darken the center

Add a center mask that reduces brightness near the middle. This small value drop is what stops the portal from looking like a glowing coin.

5. Add interior noise carefully

Layer noise over the swirl, but keep the noise contrast lower than the rim. The player should see motion, not a noisy texture sample.

6. Mask distortion

If you add scene distortion, keep it strongest near the rim or center pull. Full-surface distortion looks expensive, busy, and often makes the portal harder to read.

05

Artist Controls

Shape Outer Radius Defines the usable portal size. Useful for open and close animations.

Shape Rim Width Controls silhouette strength. Too thin disappears; too thick feels like a tire.

Motion Swirl Speed Main rotation speed. Keep this readable from the actual gameplay camera.

Motion Swirl Strength How strongly the interior bends around the center. High values feel unstable.

Depth Center Hole Size Controls how dark or open the middle feels. A little darkness sells depth.

Cost Distortion Strength Keep this separate so background portals can use a cheaper instance.

06

HLSL Sketch

float2 p = UV - 0.5;
float radius = length(p) * 2.0;
float angle = atan2(p.y, p.x) / 6.28318;

float rimOuter = 1.0 - smoothstep(OuterRadius, OuterRadius + RimSoftness, radius);
float rimInner = smoothstep(OuterRadius - RimWidth, OuterRadius - RimWidth + RimSoftness, radius);
float rim = saturate(rimOuter * rimInner);

float swirlAngle = angle + Time * SwirlSpeed + radius * SwirlStrength;
float2 polarUV = float2(swirlAngle, radius * InteriorScale);
float interiorNoise = NoiseTexture.Sample(Sampler, polarUV).r;

float centerHole = 1.0 - smoothstep(CenterSize, CenterSize + CenterSoftness, radius);
float interior = saturate(interiorNoise * (1.0 - centerHole));

float3 color = lerp(InteriorColor, RimColor, rim);
float emission = interior * InteriorEmission + rim * RimEmission;

return float4(color * emission, saturate(interior + rim));

07

Senior Notes

Watch the polar seam

Polar UVs have a seam where the angle wraps. Hide it with circular noise, blurrier interior detail, or place the seam where it is least visible in the effect.

Do not over-detail the center

The center can stretch or alias quickly because many UV directions collapse into a small area. Darkening it is often cheaper and cleaner than trying to keep tiny detail there.

Distortion is a taste and cost decision

It can look great in a hero shot, but it can also fight readability in combat. Make it optional per instance.

Separate portal states

Idle, opening, active, and closing usually need different parameters. One material can support all four if the controls are designed around state changes instead of a single pretty screenshot.

08

Troubleshooting

It looks like a flat spinner

Break the timing. Let the rim pulse slowly, the interior swirl steadily, and the center stay darker or calmer.

The seam is visible

Reduce high-frequency detail near the angle wrap, rotate the seam away from camera focus, or use noise that hides the join.

The rim feels too heavy

Lower rim width before lowering emission. Shape usually fixes the read better than brightness.

The background gets smeared

Distortion is too broad. Mask it tighter to the rim or center and keep a no-distortion instance for dense scenes.

09