demo.

今回は、デモの中間部で出てくる火の玉の エフェクトについて見て行きましょう。

Today we're going to take a look at the fireball effect that was seen about halfway through

シニア・ビジュアル・エフェクト・アーティスト のフランソワ・アントワンに来てもらいました。

that demonstration.

ようこそフランソワ。

Joining me is senior visual effects artist Francois Antoine.

よろしく、ザック。

Hi Francois.

簡単に経歴を教えてもらいませんか？

Hey Zak. How are you?

はい。エピックに入る前は、10 年間映画の ビジュアル エフェクトの仕事をしていました。

Doing well.

今日はとても楽しみです。これからお見せする 爆発は、映画のビジュアル エフェクトで使われる…

So why don't you start by telling us a little bit about yourself.

テクニックと同じものが使われているのですから。

Sure. So, before coming to Epic, I worked in film visual effects for ten years.

この爆発エフェクトの特別な点は、 どういったところでしょうか？

I'm excited about this demo today because we're going to be showing an explosion which

それは「ボリューム テクスチャ」と呼ばれる 新しいテクニックで作られている点です。

uses some of the same techniques that we use in film visual effects.

このテクスチャは、基本的に 3 次元のテクスチャです。

Can you give us an overview of what's so special about this effect?

GPU パーティクルと組み合わせることで 「ボリューム爆発」なるものができます。

Well, we had to create this explosion with a new technique called a volume texture and

従来のスプライト ベースの爆発は、まとまり感 が欠けていました。

it's basically a texture that's three-dimensional.

それに対して、ボリューム爆発はこの短所を 克服して火の玉がジオメトリの中を実際に…

That in combination with GPU particles allowed us to create what we call our volume explosion.

回転しているように見せることができるのです。

Traditionally, sprite-based explosions don't have that cohesive feel but the volume explosion

まず最初のステップとして、ボリューム爆発のための データを作成します。

can overcome those limitations and give the impression that it's really rolling through

そのためには、3ds Max で FumeFX プラグインを 使って、3D 流体シミュレーションを生成します。

the geometry and expanding.

ご覧のように、アンリアル・エンジンから ジオメトリをインポートして、FBX を使います。

The first step was to create the data for the volume explosion.

FBX を使えば、全ジオメトリの配置を保存できます。 また、カメラアングルと各種レンズの設定を伴って…

For that, I went into 3ds Max and used the FumeFX plugin to generate a 3D fluid simulation.

カメラをインポートできるようになります。

You can see that here we imported the geometry from Unreal Engine and are using FBX.

流体シミュレーションを利用する場合に 役立つのでしょうね。

It actually saves the placement of all the geometry and also allows you to import camera

その通りです。カメラがあるので、カメラに対して カスタマイズおよびアニメートすることによって…

with the camera angle and the different lens settings.

時間を大幅に節約できます。カメラに映らない ものをアニメートするという無駄が省けるのです。

Which I imagine would be useful here, where you need to wrap a fluid simulation around

爆発が起きたら、流体シミュレーションの 断面 10 個を真上からの視点で…

that.

レンダリングします。

Yes, absolutely. Actually, having the camera allows you to really customize and animate

このように、各断面は、これらの平面間の ボリュームによって表現されています。

to the camera, which can be a big time saver so you don't waste time animating things that

さて、これでレンダリングされ書き出され ました。断面の 1 つはこのように見えます。

won't be seen on camera.

この断面は中間に位置しているため、 爆発内部を見ることになります。

Once we have the explosion going, what I did is render ten cross sections of the fluid

すべての断面をレンダリングして書き出した後は、 それらを After Effects 内部でまとめました。

simulation from a top down point of view.

こちら左側には、10 個の断面が 積み重なっています。

And you can see that each of these cross sections is represented by the volume between each

このようにして、レンダリング アーティファクト やシャドウがないことを確かめます。

of these planes.

層を一つずつ。

So these are now rendered out, and one of the cross sections looks just like this.

また、アンリアル・エンジンにこれらの情報を 取り込む前に、すべて適切な状態にあることを…

And you can actually see inside the explosion right there because this is a middle cross

確かめています。

section.

さて、これらの各スライスをサブ UV テクスチャ としてインポートしていきます。

Alright, so once I had all of these cross sections rendered out, I brought them together

これは最下層の 1 つです。

inside After Effects.

レンダリングされた各フレームの断面を 見ることができます。

Over here as you can see on the left, I have all ten cross sections stacked on top of each

これは、低い方のスライスですね？

other.

その通りです。

This was just a way to test to make sure that there were no rendering artifacts or shadows

爆発が上昇して行くと、煙が残ります。

from one layer into another.

高いレベルの火の玉スライスを見てみましょう。

And it was to make sure everything was properly sorted before bringing that information into

最初には何も見えないですね。これは、 火の玉が流体シミュレーションの…

Unreal Engine.

その部分まで達していないからです。

Now we're going to import each of these slices as a sub-UV texture.

最上位の断面はここです。

So this is one of the bottom-most layers.

次のステップでは、 各スライス間の情報を再現します。

You can see the cross section for each of the frames of the render.

これは、私たちが書いたマテリアルの内部です。

And I imagine this would be one of the lower slices?

ボリューム テクスチャ サンプルというノードが ありますね。これは 3D ボリューム テクスチャを…

That's exactly right.

作るものです。

As the explosion moves up, it just leaves behind smoke.

青くハイライト表示されているように、 関数でもあります。

So what we could do is look at one of the higher level fireball slices.

基本的に関数とは、簡単に再利用できるノードの ネットワークです。スニペットのようなものです。

You can see here that you have nothing in the beginning because the fireball hasn't

これはアーティストが作ったもので、コーダーに 書いてもらわなくても良かったのですね？

reached that area of the fluid simulation.

その通りです。

Then the top cross section is right here.

そこがアンリアルの強みです。アーティストの ツールを使ってこの種の機能をプロトタイプ化…

The next step is to recreate the information between each of these slices.

できるのです。

Here we are inside the material that we wrote.

このように、他にも関数がありますね。

You can see there is a node called the Volume Texture Sample and this is where we create

各関数は、すでにレンダリングしてアンリアル・ エンジンに取り込まれたスライスの 1 つを参照…

the 3D volume texture.

します。

It is also a function; as you can see it is highlighted in blue.

ここには、アーティストがセットできる 追加のパラメータもあります。たとえば…

A function is basically a network of nodes that can be re-used very easily, kind of like

ボリュームの XY サイズやスライス間の スペースなどを決めることができます。

a snippet of code.

後に必要に応じて若干カスタマイズ するのですね。

And this was created by artists; you didn't have to bring in a coder to write this.

そうです。

That's right, yes.

これらはパラメータであるため、後に爆発のため に接続するマテリアル インスタンスに…

And that's where the power of Unreal is, is that we can actually prototype these kinds

エクスポーズされることになります。

of features using artist tools.

いいですね。さて、この時点でマテリアルが できていますが、次のステップはどうなりますか？

You can see right here we have more functions.

次のステップは、ボリューム テクスチャを 実際に表示できるようにすることです。

Each of these functions references one of the slices that we rendered out earlier and

ボリューム テクスチャを表示するには普通、レイ トレースするのですが、負荷がとても高いのです。

brought into Unreal Engine.

だから私たちは、そのような手法を 取りませんでした。

You also see there are also extra parameters here that artists can set, which is like the

代わりに、パーティクルのポイント クラウド を使用しました。

XY_Size of the volume, and the space between each slice.

これによって、パーティクルの 1 つずつが、 ボリューム テクスチャ空間内の特定の点を…

So a little bit of customization if you need it later?

ルックアップして、それらのカラー値を 表示するようになります。

Yes.

パーティクルは動いておらず、 ワイヤーフレームの中で見えているのですね。

And because these are parameters, they will be exposed to the material instance which

それぞれが静的なモニターのようなもの になっているのでしょうか？

we'll plug in later for the explosion.

その通りです。

Very nice. OK, so you've got your material at this point - what's the next step?

動きはパーティクルの中にはありません。実際に アニメートされるテクスチャの中にあります。

The next step is to actually be able to display that volume texture.

基本的に必要なものは、そのテクスチャを サンプリングして表示する多数の小さな…

Typically, a way to display volume texture is to ray trace it, but that is very expensive

ビルボードなのです。 そのような理由で、動いていないのです。

so we didn't want to use that approach.

さて、この GPU パーティクル システムには 500 個の GPU パーティクルがあります。

Instead, what we are using is a point cloud of particles.

カメラからある程度離れている場合は、この数で 良いのですが、ここでは爆発をごく近くから…

What's going to happen is that each one of these particles is going to look up a certain

見ているので、この数を増やして…

point in space of the volume texture and display those color values.

間近での爆発をビジュアル化します。

I notice the particles aren't moving; we're looking at this in wire frame right now.

2000 パーティクルというのは GPU の基準から 見て、まだ負荷が非常に低いと言えます。

I guess each one of these is kind of like a static monitor?

これで、カメラがショットを撮っている位置である 真上から爆発の様子が見られるようになりました。

That's exactly right, yes.

素晴らしい。カメラまで爆発が這い登ってくる かのようです。

The motion is not in the particles; it is in the texture that is actually animated.

ええ、それこそ求めていた感じです。

We basically just need a lot of tiny little billboards that will sample that texture and

これは従来の 2D スプライトによる爆発では 得られないものです。

display it, so they aren't moving for that reason.

従来型では、各爆発のつながりに一体感がなく…

Right here we have about 500 GPU particles in the GPU particle system.

このように増大するボリュームもありません。

That's the right amount when we are kind of far from the camera, but here because we are

スライスから構成されているため、横からの視点 に切り替えると、マテリアルの働きが分かります。

looking at the explosion very closely, I'm going to increase that count just for the

10 個のスライスがエフェクトにありますね。 マテリアルがそれらスライス間を補間する…

sake of visualizing the explosion up close.

データを作成しているのが分かります。

2,000 particles is still very cheap by GPU standards.

実際的には、ディテールを必要としない より効率的な補間データを使用して、

Now we can see the explosion happening and if we go to the top view, which is where our

上から下に向かって爆発を 正確に再現しています。

camera is for the shot...

全角度から完璧に見えるわけではありませんが、 それでもエフェクト全体で広い視野角と…

Oh that is amazing, you can actually feel it creeping up at the camera.

多くのモーション、深みが確保されていますね。

Yes, and that's exactly the feeling we wanted.

その通りです。横から爆発を見せる必要があるなら、 スライスの数、質を向上させたり…

That's something we don't traditionally get with regular 2D sprite explosions because

全く違うテクニックを使うことになるでしょうね。

they don't have the coherance between each other and they don't have this kind of growing

ただし、今回必要なものは、わずかな視差と、 回転モーションです。

volume.

つまりこのショットに適したものです。

Because this is made of slices, if you switch to the side view you'll be able to see what

いいですね。

our material is doing.

テクスチャ ノードの出力では、BlackBody の ノードが接続されています。

You can see each of the ten slices in the effect here and you can see our material is

BlackBody ノードで特別な点は、 ケルビン温度を受け取り、カラーを返す点です。

creating interpolated data between each of these slices.

これによって、よりリアルな爆発の色を決める ことができるのです。

So, in effect, we're recreating the explosion accurately from the top down by using more

炎に最適の色を求めて苦労することはもう ありませんね。

efficient interpolated data where we don't need the detail.

そうです。

So it's not going to be perfect from all angles but you've still got a wide range of visible

さて、次のステップですが、シネマティックに 取り込んで見れるようにします。

areas and a lot of motion and depth in the overall effect.

シネマティック ツールのマチネに多数の トラックを作りました。

Exactly, if we needed to see this explosion from the side, we probably would have increased

爆発のための Toggle トラックを使って、 このように爆発をトリガーしています。

the quality of the number of slices or used a different technique altogether.

それは爆発のスイッチを入れるだけですか？

But for what we need, which is some subtle parallax and that rolling motion, this is

そうです。爆発をトリガーして、 作動させるだけです。

just the right fit for that shot.

環境にもっと合うようにするために、 ライトを伴ったトラックも作ります。

Awesome.

Explosion Light という名前がついています。 光を作り出し、環境を吹き飛ばすような…

You can see here on the output of our volume texture node, we're plugging into the BlackBody

感じにすることによって、 リアリティのある爆発にします。

node.

さらにディストーション (歪み) の層が 置かれていますね。この辺りです。

What's special about the BlackBody node is that it takes in a temperature in Kelvin and

このディストーションは、ディストーションの マテリアルを適用させるシートです。

returns a color.

爆発の最上位に置かれて、爆発とともに上昇して 行くことになります。

In effect, this allows us to color the explosion in a more realistic way.

だから、爆発がカメラに近づいて来るにつれ、 熱や陽炎の感じが出てくるのです。

No more having to fight and figure out what the best color for fire is.

シネマティック全体を実行すると、完全な エフェクトを見ることができます。

Yes, that's right.

ところで、アンリアル・エンジン 4 による エフェクト制作はいかがでしたか？

Ok, so the next step is to get it into the cinematic so we can see it.

アンリアル・エンジン 4 以前でもこのような 制作は可能でしたか？

I created a number of tracks in the cinematic tool, which is Matinee.

以前は困難だったでしょうね。というのも、 マテリアル表現式のエディタで…

You can see I'm triggering the explosion using the Toggle track for the explosion.

カスタムのマテリアル関数を 使用しているからです。

That's just going to turn on the explosion and that's all?

その上、GPU パーティクルを 使わなければなりません。

That's correct, that just triggers the explosion and has it running.

今日はありがとうございました。

But because we want it to sit better in the environment, I also create a track with lights.

それでは次回のインサイド・アンリアルで またお会いしましょう。

This is called Explosion Light and that just creates light right here and it kind of blows

out the environment so you really get the feeling that there is an explosion going off.

On top of that you can see there's a layer of distortion right there.

The distortion is just a sheet that has a distortion material applied to it that sits

on top of the explosion and moves up with it.

So as it gets closer to the camera, you start getting the feeling of heat and heat shimmer.

If we run through the cinematic we can see the completed effect.

Tell me, how did Unreal Engine 4 enable you to make this effect?

Is this something you could have done previously?

It would have been hard to do previously because we are using custom material functions in

the material expression editor.

And on top of that, we need to use GPU particles.

Well, Francois thank you very much for your time and thank you for joining us.

We will catch you on the next Inside Unreal.