Creating 2D Raymarching Smoke in UE4

FX Artist Dae Hyek Kim talked about the techniques he used to build 2d raymarching smoke in Unreal Engine 4. Previously this technique was used in Uncharted 4.

Introduction

Hi, 80.lv! My name is Dae Hyek Kim, I’m from South Korea and I work as an FX Artist at Smilegate, which is a video game company in South Korea. At Sungkyunkwan University, I majored in Film,TV & Multimedia Studies. After graduation, I studied VFX at Korea Creative Content Agency Academy (KOCCA). It was at KOCCA that I was introduced to Houdini for the first time. It’s an absolutely amazing tool and one that helped finalize my decision to become an FX artist, despite initially wanting to work in the movie industry.

As a real-time FX artist, I’m currently working on CrossFire 2. I’m also very interested in making realistic visual effects for games and love the latest game tech, so I enjoy looking for GDC and Siggraph Presentations, some of which I’ve actually translated into Korean. Ultimately, I would like to participate in AAA-level game development someday!

2D Raymarching Smoke

I’ve always thought about the rendering of smoke. Epic’s Tech Artist Ryan Brucks also has a Raymarching Smoke Tech but it looks heavy for me. Then I saw a list of Uncharted 4 sessions at SIGGRAPH 2015. It dealt with 2D Raymarching Smoke, so I looked for the release PPT. I found it on the Realtime VFX Facebook Group and tried to implement 2D Raymarching Smoke in UE4 and finally succeeded!

Lit Particle makes smoke particles realistic but it can’t handle volumetric shading. Using Normal Map with smoke particles, I can shade volumetric but it sometimes looks 2.5D. It also can’t cover sub surface scattering. 2D Raymarching can cover all of these things (volumetric, SubSurfaceScattering), and 2D Raymarching Smoke requires only alpha texture, which allows us to save texture memory.

Technology

Guerrilla’s raymarching cloud is different than 2D Raymarching Smoke. Guerrilla produces a more physically correct model. 2D Raymarching Smoke is not exactly the most accurate raymarching.

The basic concept behind 2D Raymarching Smoke is to sample the alpha texture in the direction of the light vector. It’s very important to sample the ‘alpha’ and not the ‘diffuse’ in smoke raymarching because you have to think of the alpha as the density of smoke. Where Alpha is 1, it’s a thick area where light cannot penetrate. Where Alpha is 0, there is no smoke, so every light can penetrate.

Here’s an example of the basic concept behind 2D Raymarching.

2D Raymarching Smoke in UE4

Users can decide how much sampling occurs and at what distance it happens. Below is some custom HLSL code.

for (float d = 0.0; d

{

UV += (marchDir*d)/numSteps;

float4 Ldensity = Texture2DSampleLevel(Tex,TexSampler, UV.xy, 0)/(numSteps);

TL *= saturate(1.0 -Ldensity[3]);

}

float3 LI = LightColor * TL.xxx;

LO += LI*density;

return LO;

There are many parameters connected to this custom HLSL code.

Here are the parameters users can adjust: LightColor, MarchDistance, NumSteps, LightVector and Density. TL and LO should be left alone.

Users can adjust 2D Raymarching Smoke’s parameters in UE4. Here’s a video demonstrating such adjustments.

Users can also add explosion FX. Here’s a video of explosion FX in action.

Starting in UE4

First, users need to create a light attribute blueprint, with the light attribute blueprint and Material Parameter Collection settings.

Users can get a LightVector. The light attribute blueprint and Material Parameter Collection settings are the same as the image below.

Light Attribute BluePrint

Material Parameter Collection

Light

Inside the light attribute blueprint, we can obtain light color, light intensity and light vector.

Through the Material Parameter Collection settings, we can control lighting conditions in the material editor.

So, the light attribute blueprint and the material editor are connected together.

If we change the attributes of the blueprint, we can see that it’s reflected in the material editor.

Smoke Subsurface Scattering

In UE3, there is transmission color & mask. They worked well even in translucent type. But in UE4, they disappear and instead have a subsurface color, and UE4’s subsurface color doesn’t work well in translucent.

So, I tweaked it a little—I got the product light vector and the inverse of the camera vector, which only results in the positive value when viewed against the light. It’s a kind of subsurface mask. Then, I multiply LightColor and Intensity.

The mode setting is the same as the image below.

Advice

First, I think it’s important to understand the concept of 2D Raymarching Smoke—it’s not too complicated after all! If users can understand this tech, they can go further, and Houdini is a really awesome tool. Although I made my smoke texture through FumeFX, Houdini’s Pyro is cool. And users can make sprite textures more easily through Houdini with cop node. Houdini 16 also supports game assets for various purposes.

Now, real-time FX artists need to consider using Houdini. From here on out, I think more game effects tech tools will be implemented through Houdini.

This tutorial by Stephen Tucker will provide 80.lv readers with a good start.

Here’s a UE4 example of 2D raymarching. It contains other tech (real-time optical flow, texture-baked animation) as well.

Thanks, 80.lv for reading about my work! Hopefully, you learned a thing or two and can apply this knowledge to future projects of yours!

Dae Hyek Kim, an FX Artist at Smilegate

Interview conducted by Kirill Tokarev. 

Follow 80.lv on Facebook, Twitter and Instagram