top of page

Exploring & Learning Star Portal fx

Writer's picture: Will TzsFxWill TzsFx

8th July 2023

 

Learning & exploration aim:

  • To familiarize more using Niagara for creating real-time Vfx

  • Create a working start shaped portal Niagara fx

  • Portal shape can be easily switched to different predefined shape mesh generated & provided by Houdini

  • Diving into more fx layers & elements that comes together to form a complex Vfx with timing differences

Continuing the effort of diving into Unreal Vfx & exploration, I’ve gained a bit more understanding how to approach a Vfx using Niagara.

With that, I’ve decided to tackle a Vfx I’ve always wanted to try previously. America’s star shaped portal from Dr. Strange – Multiverse Madness.

I initially planned to try this out as a Houdini Vfx but decided to give it a go as a real-time Vfx.

This time, I do not have a proper tutorial to depend on. So I will be heavily relying on the Dr. Strange movie & a youtube vfx video portfolio by a Korean real-time artist for visual references & guide (ref img below).



 

Result of Niagara Star Shaped Portal

3 different shaped version of America’s star shaped portal

  • Left – clover shaped portal

  • Mid – 6 pointed star shaped portal

  • Right – default star shaped portal

 

America's Star Shaped Niagara Portal Breakdown

Fx layers that make up the star shaped portal

All key fx elements & layers visually saperated:

  1. Top layer – general cracks & lightning arcs fx elements & layers

  2. Mid layer (right area) – general glow & lens flare fx elements & layers

  3. Mid layer (middle area) – distortion & outward forces fx element & layer

  4. Mid layer (left area) – portal material & star shaped edge fx elements & layers

  5. Bottom layer – extra fx layers & elements like glass shatter pieces fx, edge emitting forces fx & more star shaped edge fx element

 

Foundational shaped mesh prepped & export from Houdini for star shaped portal

In Houdini 19.5, we’re blessed with a new nifty node known as the super formula shape node that we can easily use to generate complex base shape outline mesh.

These meshes will be used for Niagara to sample from & to generate fx from there.

Here, I’ve decided to create a typical star shape, a rounded 6 pointed star shape & a clover shape.

 

For all the shape variation, I’ve prepared different types of mesh for this Vfx. All UV & mesh modification are either procedurally / semi-procedurally generated.

  1. A thick outline mesh & a thin outline mesh – used for mesh sample spawning (top section)

  2. A flat shape mesh – used for mesh sample spawning (bottom left)

  3. A concave type mesh – used for portal opening material fx (bottom right)

 

Portal opening for star shaped portal

A cube map world space material will be use to apply on the concave mesh to look like a portal opening.

An edge mask texture, generated & baked from Houdini, is used to slightly dither fade the harsh mesh edge

Quick simple preview of how the portal opening look like in real-time (vid above)

 

Portal edge Fx for star shaped portal in Niagara

The challenge of creating this portal edge fx is quite tough & confusing for me as I’m still slightly unfamiliar with how to approach Vfx in Unreal.

Luckily, looking at the reference, this Fx can be achieve with a few layers in Niagara. (which is shown in Slide No.4)

This is where the Houdini provided meshes comes to play. The thick & thin outline mesh and the flat shaped mesh will be used for Niagara to sample the mesh, then spawn the required Fx from it.

The initial actual struggle I faced for making this portal edge Fx is the visual look of the cuboid stuff that surrounds the portal edge.

I initially test it with just a simple cube mesh with refracting material, but was unable to achieve the glowing effect needed.

I then test it with a custom UVed cube mesh with a corner edge mask texture both generated from Houdini. Applied roughly the same refracting material. Still was not successful with achieving the glowing look. Both previous attempts look a bit of with the result.

Then I decided to settle with a smaller cube nested inside an outer bigger cube. The inner cube will have a glowing material & the outer cube will have semi transparent & refracting material.

 

Portal edge Fx for star shaped portal in Niagara


To the top, is the initial 2 attempts result & to the bottom is the 3rd attempt which bares the best result.

The initial result of the portal edge Fx (vid above)

 

Niagara setup for star shaped portal

This is the current Niagara setup for the star shaped portal.

I’ve decided to make this whole portal fx in a single Niagara system.

  • I’m not entirely sure if this is a wise move? Probably not an efficient way to do so.

  • I did also found out having so many emitter in a single Niagara system does cause a sluggish respond when iteration or tweaks are made to it.

    1. Every changes made will cause a compiling message to show up & required to wait for several seconds for Niagara to respond

  • I do plan to look into this for future research and projects if this is a practical approach.

  • The reason I decided to do this is that all the re-timing for which emitter to fire 1st or last can all be controlled & preview in a single place as this is the only way I currently know how.

 
  1. Blue comment shell – is the initial stage of the fx (before the main portal show up)

  2. Light blue comment shell – is the main portal fx

 

Current finished result of the various shaped portal Niagara fx

General Star Shape Portal (vid above)

Rounded 6 Pointed Star Shape Portal (vid above)

Clover Shape Portal (vid above)

 

Run around preview for Star Shaped Portal Niagara Fx

 


36 views0 comments

Recent Posts

See All

Comments


bottom of page