{"id":1452,"date":"2024-11-10T15:33:22","date_gmt":"2024-11-10T06:33:22","guid":{"rendered":"https:\/\/heyyocg.link\/?p=1452"},"modified":"2024-11-10T15:54:32","modified_gmt":"2024-11-10T06:54:32","slug":"normalize-lecture","status":"publish","type":"post","link":"https:\/\/heyyocg.link\/en\/normalize-lecture\/","title":{"rendered":"All You Need is Normalize"},"content":{"rendered":"\n

Introduction<\/h1>\n\n\n\n

This time, I would like to explain “Normalize”, which is commonly used when doing somewhat technical things in visual effect creation.<\/p>\n\n\n\n

\u203b By the way, the title is just an exaggeration as you know. I just wanted to give the title an interesting name…<\/p>\n\n\n\n

Normalization itself is a mathematical term and is a concept that appears not only in visual effect creation and CG production but also in statistics and many other fields. The meaning of the term and the calculations involved can differ depending on the domain, so I don’t intend to go into strict technical details here.<\/p>\n\n\n\n

Furthermore, normalizing is more about an approach or habit for improving efficiency and generalization rather than simply a piece of knowledge. I believe artists who do a little bit of math in tools like Shader, Niagara, or Houdini should definitely make this concept a part of their toolkit.<\/p>\n\n\n\n

I\u2019ll explain using examples from Unreal Engine, but the underlying concept doesn\u2019t depend on the tools used, so even if you’re not using Unreal Engine, I encourage you to take a look!<\/p>\n\n\n\n

The data from the two examples mentioned below are available for sale, so feel free to check them out if you’re interested!<\/p>\n\n\n\n

Procedural High Smoke<\/a><\/p>\n\n\n\n

Procedural Thunder<\/a><\/p>\n\n\n\n

What is Normalize?<\/h1>\n\n\n\n

In CG production, when we talk about normalizing, there are generally two cases: normalizing a single value (float, scalar) and normalizing a vector (Vector2, 3, 4, etc.).<\/p>\n\n\n\n

The core concept is the same in both cases, but for the sake of explanation and examples, it’s easier to separate them. This time, I will focus on normalizing a single value.<\/p>\n\n\n\n

To put it simply, normalizing means “scaling the value range to 0~1.” It’s quite simple.
By the way, normalizing a vector means “making the vector’s length equal to 1.” It seems similar, doesn’t it?<\/p>\n\n\n\n

To explain what it means to normalize a value into a 0~1 range, I\u2019ll use Niagara\u2019s “Normalized Age” as an example.<\/p>\n\n\n\n

Normalized Age<\/h2>\n\n\n\n

As the name suggests, “Normalized Age” refers to the age that has been normalized. Age in this context means the number of seconds that have passed since a particle was created.<\/p>\n\n\n\n

For example, if the lifetime of a particle is set to 2 seconds, the age will be the elapsed time since the particle’s birth, and it will disappear when it reaches 2 seconds. So, the age value will range from 0 to 2.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

Now, what happens when you normalize this age? You scale the range from 0-2 into 0-1, so as shown in the figure, when the age is 1, the normalized value will be 0.5, and when the age is 2, the normalized value will be 1.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

What Are the Benefits?<\/h2>\n\n\n\n

So, what benefits do we gain by normalizing the age to a 0~1 range? Let\u2019s look at how Normalized Age is actually used.<\/p>\n\n\n\n

In most cases, when creating effects, you might want to change attributes like color, size, or opacity according to the particle\u2019s lifetime. For example, when fading out a particle, you might use a scale color node and set a curve on the alpha channel.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

By default, the curve index is set to Normalized Age.<\/p>\n\n\n\n

The curve reads as follows: the vertical axis represents the value returned (which would be the value assigned to Scale Alpha), and the horizontal axis represents the curve index (which is the Normalized Age). So, when the Normalized Age is 0, Scale Alpha is 1; when it’s 0.5, Scale Alpha is 0.5; and when it’s 1, Scale Alpha is 0.<\/p>\n\n\n\n

As shown in the image above, this means that as the particle ages, the alpha gradually decreases, and when it dies, it reaches zero.<\/p>\n\n\n\n

Now, if we set the particle\u2019s lifetime to 2 seconds, we can recreate the same behavior by using Age in place of Normalized Age for the curve index, and setting the end point of the curve at 2 seconds, so that it reaches 0 when the lifetime is 2 seconds.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

This will have the same effect as when using Normalized Age. However, this only works when the particle’s lifetime is exactly 2 seconds. For example, if the lifetime is set to 1 second, the particle will die when the alpha reaches 0.5, and if it’s set to 3 seconds, the alpha will reach 0 before the particle dies.<\/p>\n\n\n\n

In reality, when emitting multiple particles, you often use random ranges to give particles different lifetimes. So, if you create a fade-out curve where alpha becomes 0 when age reaches 2 seconds, the fade-out behavior will change for particles with different lifetimes.<\/p>\n\n\n\n

This is where Normalized Age comes in.<\/p>\n\n\n\n

No matter what the lifetime of each particle is, the Normalized Age represents the particle’s life as a value between 0 and 1. If the lifetime is 2 seconds, 1 second, or 3.45 seconds, the Normalized Age will start at 0 when the particle is created, reach 0.5 at the halfway of its lifetime, and become 1 when the particle dies.<\/p>\n\n\n\n

By using Normalized Age to set the curve, you can ensure that the fade-out occurs evenly for all particles, regardless of their lifetime.<\/p>\n\n\n\n

Challenge Question!<\/h3>\n\n\n\n

How can we calculate Normalized Age? Think about it!
(The answer is at the bottom of this article)<\/p>\n\n\n\n

Using Lerp with Normalized Age<\/h2>\n\n\n\n

You may not yet fully grasp the benefits of normalizing from the example of Normalized Age, so let\u2019s take a look at a simple example where I combine Lerp and Normalize for even more useful applications.<\/p>\n\n\n\n

I often use Lerp and Normalize together when I want to fine-tune the start and end values, or when I want to adjust the transition curve of the start and end values separately.<\/p>\n\n\n\n

By the way, Lerp (Linear Interpolation) takes three inputs: A, B, and Alpha, and it returns a value between A and B, based on the ratio of Alpha.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

If Alpha is 0, Lerp returns the value of A (100% of A); if Alpha is 0.5, it returns the average of A and B (50% of A and 50% of B); and if Alpha is 1, it returns the value of B (100% of B). This is called linear interpolation.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

Now, when would you combine Lerp and Normalize? For example, I often use this approach when I want to apply power to a texture and control the fade-out by setting exponent (Exp) value dynamically through a Dynamic Parameter.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

When applying power to a gradient texture, you can fade smoothly reflecting the texture’s appearance, but the exponent value that controls this fade-out often needs to be fine-tuned according to the desired look.<\/p>\n\n\n\n

Normally, you might just use a curve to control the transition animation of the value and its easing, but the problem with this approach is that when you change the value, the curve\u2019s easing also changes, requiring you to readjust the curve every time you change the value.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n
\n
\"\"
When you chane the value from 1 to 2 at the start point, the easing of the curve also changes.<\/figcaption><\/figure>\n\n\n\n
\"\"
So you need to adjust the easing to be the same as before you change the value<\/figcaption><\/figure>\n<\/figure>\n\n\n\n

If you used just a curve, changing the start value would also change the curve\u2019s easing, requiring you to adjust the curve every time you change a value, which is super inefficient.<\/p>\n\n\n\n

By using Lerp, I set the start and end values as A and B, and use a curve to control the transition speed. This allows me to adjust the transition independently of the start and end values.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

By separating the control of the start and end values from the control of the transition curve, I avoid having to adjust the curve every time I tweak the start or end value. This makes the process much more efficient.<\/p>\n\n\n\n

Even though I haven\u2019t directly used a normalized attribute here, the concept of normalization is still applied. Instead of adjusting the start and end values in the curve, I normalize the curve\u2019s output to a 0\u20131 range and use Lerp to adjust the actual start and end values based on that.<\/p>\n\n\n\n

This illustrates the point I made earlier about Normalize being more of a mindset or habit than just a technical knowledge.<\/p>\n\n\n\n

I hope this gives you a better understanding of how Normalize can improve the workflow!<\/p>\n\n\n\n

(Note: The Lerp example here does add a slight overhead in processing, so if performance is critical, you may want to optimize further. However, the overhead of Lerp isn\u2019t dramatic, and the benefits of making adjustments more efficient often outweigh the extra cost.)<\/p>\n\n\n\n

Example 1: Procedural High Smoke<\/h1>\n\n\n\n

After covering the finer points of Normalization, let’s look at a more fun example. This one involves using Normalization to create a smoke effect that rises high into the air.<\/p>\n\n\n\n

\"\u753b\u50cf\u306b<\/figure>\n\n\n\n

When creating background effects like this, how would you go about making smoke rise high into the air?<\/p>\n\n\n\n

You might consider using Velocity or Force, but adjusting parameters this way can be tricky and time-consuming. It\u2019s hard to get the ideal look, and it\u2019s inefficient to wait for the particle to rise to check the result.<\/p>\n\n\n\n

Instead, let’s reverse-engineer the physics: by understanding the visual behavior of the smoke at different heights, we can control the effect based on that.<\/p>\n\n\n\n

Before jumping into the creation steps, let’s think about what the natural behavior of rising smoke looks like:<\/p>\n\n\n\n