8th July 2023
![](https://static.wixstatic.com/media/9402fd_09d7be678ab041139272022213138ba2~mv2.jpg/v1/fill/w_980,h_513,al_c,q_85,usm_0.66_1.00_0.01,enc_auto/9402fd_09d7be678ab041139272022213138ba2~mv2.jpg)
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).
![](https://static.wixstatic.com/media/9402fd_8e8674abc81143f19c22e80a4c72fa3d~mv2.jpg/v1/fill/w_547,h_425,al_c,q_80,enc_auto/9402fd_8e8674abc81143f19c22e80a4c72fa3d~mv2.jpg)
![](https://static.wixstatic.com/media/9402fd_1a3fabcd8d2a4121bd025151a9e454ea~mv2.jpg/v1/fill/w_649,h_408,al_c,q_80,enc_auto/9402fd_1a3fabcd8d2a4121bd025151a9e454ea~mv2.jpg)
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:
Top layer – general cracks & lightning arcs fx elements & layers
Mid layer (right area) – general glow & lens flare fx elements & layers
Mid layer (middle area) – distortion & outward forces fx element & layer
Mid layer (left area) – portal material & star shaped edge fx elements & layers
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
![](https://static.wixstatic.com/media/9402fd_be038ad2c5cd40179b5665da9fe372ed~mv2.png/v1/fill/w_980,h_369,al_c,q_90,usm_0.66_1.00_0.01,enc_auto/9402fd_be038ad2c5cd40179b5665da9fe372ed~mv2.png)
![](https://static.wixstatic.com/media/9402fd_f1c2c8485fc64ebe884cfe0739ebe394~mv2.png/v1/fill/w_980,h_370,al_c,q_90,usm_0.66_1.00_0.01,enc_auto/9402fd_f1c2c8485fc64ebe884cfe0739ebe394~mv2.png)
![](https://static.wixstatic.com/media/9402fd_2dd6d452a119462680f6b465e40d3f9d~mv2.png/v1/fill/w_980,h_382,al_c,q_90,usm_0.66_1.00_0.01,enc_auto/9402fd_2dd6d452a119462680f6b465e40d3f9d~mv2.png)
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.
![](https://static.wixstatic.com/media/9402fd_2dc6e3ab5c21440a8471ed89e4d8c5c6~mv2.png/v1/fill/w_943,h_1032,al_c,q_90,enc_auto/9402fd_2dc6e3ab5c21440a8471ed89e4d8c5c6~mv2.png)
![](https://static.wixstatic.com/media/9402fd_c9bda06a97d94fe99d5581d71b91f2b1~mv2.png/v1/fill/w_881,h_1022,al_c,q_90,enc_auto/9402fd_c9bda06a97d94fe99d5581d71b91f2b1~mv2.png)
![](https://static.wixstatic.com/media/9402fd_9d203dce98b7407d9deff6f520f721e9~mv2.png/v1/fill/w_900,h_1011,al_c,q_90,enc_auto/9402fd_9d203dce98b7407d9deff6f520f721e9~mv2.png)
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.
A thick outline mesh & a thin outline mesh – used for mesh sample spawning (top section)
A flat shape mesh – used for mesh sample spawning (bottom left)
A concave type mesh – used for portal opening material fx (bottom right)
Portal opening for star shaped portal
![](https://static.wixstatic.com/media/9402fd_62243cef7d374b668ea34420bd56929c~mv2.png/v1/fill/w_825,h_429,al_c,q_85,enc_auto/9402fd_62243cef7d374b668ea34420bd56929c~mv2.png)
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.
![](https://static.wixstatic.com/media/9402fd_5d97fc9525d3438a98d6cfb310dd163d~mv2.png/v1/fill/w_980,h_950,al_c,q_90,usm_0.66_1.00_0.01,enc_auto/9402fd_5d97fc9525d3438a98d6cfb310dd163d~mv2.png)
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
![](https://static.wixstatic.com/media/9402fd_24000d12d96e49f9acfa1b5d801f3745~mv2.png/v1/fill/w_668,h_680,al_c,q_90,enc_auto/9402fd_24000d12d96e49f9acfa1b5d801f3745~mv2.png)
![](https://static.wixstatic.com/media/9402fd_2dc9247423de4b8ebd346f97cbe99b53~mv2.png/v1/fill/w_706,h_679,al_c,q_90,enc_auto/9402fd_2dc9247423de4b8ebd346f97cbe99b53~mv2.png)
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
![](https://static.wixstatic.com/media/9402fd_2d2f50bc08db45eb8f4bf96e025eda8d~mv2.png/v1/fill/w_980,h_948,al_c,q_90,usm_0.66_1.00_0.01,enc_auto/9402fd_2d2f50bc08db45eb8f4bf96e025eda8d~mv2.png)
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.
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.
Blue comment shell – is the initial stage of the fx (before the main portal show up)
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
Comments