Creating auroras in UE4

Some time ago I got a job request about the creation of a “northern lights procedural building tool” in Unreal Engine 4.

I was asked to create a shader to simulate different kinds of northern lights and a system to create them with splines inside the editor.

After some researching I found an interesting way to generate static meshes inside the editor, the only issue I had to solve was how to implement the spline.

 

The Shader

The northern lights shader is not over complex.

0.PNG

(The disconnected shading code in the bottom right part is relative to a test that I didn’t finish about the movement of the aurora with WPO. In the end I preferred using just a simple scale variation based on curves on the procedural static meshes.)

 

0-2.PNG

The “procedural” static switch parameter purpose is to make the mesh using the second uv that I generate dynamically from the blueprint (I’ll explain this later).

 

0-3.PNG

Color is a simple lerp of three different colors based on a RGB masks texture, plus other details later.

 

0-5.PNG

This part is relative to the fade in and the fade out, a function that simulates a movement in the space (like a train, for example). I used the smoothcurve function available in the engine content to create the gradient.

 

The Blueprint

Aurora_BP.png

The northern lights blueprint is made by a procedural mesh component and two splines: one for the deformation and the length (the horizontal one), and another for the height (the vertical one).

The first operation in the blueprint construction sequence is a simple overall scale.

 

 

Then we have the procedural generation of the mesh along the horizontal spline and, at the same time, the height along the vertical spline. It’s all about generating quad mesh sections using points along the splines as vertices (think at a mesh section like a quad divided by two triangle in this case.)

Taking advantage of the horizontal spline, the vertical one, and the number of subdivision that the user can set in the detail panel of the blueprint, I get a list of vertices that I give to the Create Mesh Section function with UVs and tris (the list of tris is generated by a static array since is just a link to the vertices position and the UVs for the moment are just an array of 2D vector which defines the 0-1 range).

I am also memorizing the vertices I created for the current mesh section in an array called Mesh Sections as a custom structure named ProceduralGeoInfo to use them later.

2

 

I think this part has been the hardest one. I am really thankful to my expert colleague programmer Fabrizio Perrone for giving me some nice tips on this.

Since the shader was not based on world aligned projections, I had to use UVS, and the result with the first test I made was really bad ( basically the same texture repeating on every mesh section until the end of the spline ).

I had to find a way to generate UVs all along the spline to avoid seams: a single UV going from the first mesh section until the last on the spline.

 

So, in the function Update Sections I iterate the mesh sections array to extract my vertices previously memorized, giving them to the procedural mesh component function Update Mesh Section which basically creates again the section but with updated UVs calculated thanks to the two floats Uv Factor, which basically divide the 0-1 range based on the number of sections we have until this point.

4.PNG5.PNG5b.PNG

The next piece of code is a basic material assignment based on what I said before: if it’s procedural it will use the uv set generated procedurally(this is handled in the shader), if we want a random material it will assign one from the defined array, or we can assign a specific one to it.

Another operation made by the BP is the fade in and fade out delivering values to the shader from two timelines.

7

This part assigns the fade in and fade out values to the procedural mesh material and invoke again the function based on a boolean “Fading” visible and editable by the user and a random timer.

 

Below you can find an example of the final result.

 

 

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s