2014年12月17日

リアルタイムのフォトリアルへの挑戦

作成 Lasse Rode

はじめに

私は「Studio xoio」の Lasse Rode と申します。当スタジオは建築や製品マーケティング向けのビジュアライゼーションとイラスト作成を専門とする規模の小さな会社です。普段は 3ds Max のような「従来」の 3D 環境活用アプリケーションを使っていますが、同時に新たなレンダリング用エンジンを常に見て回っており、現在は Corona Renderer や V-Ray、Octane といったエンジンを主に使用しています。エンジンにはやはりそれぞれに異なる強みがあり、私達は「目的に最適」という原則を基に使い分けています。

私の見る限り、この業界にはいくつかの主だった傾向が存在しています。この傾向というのは、 (写実的な) リアリズムと高速化 (あるいはリアルタイム化) を目指す努力のことを指します。レンダリング結果がレンダー ファームから出力されるのを待つ必要が無くなれば、というのは (特にこれがアニメーションのレンダリングなら尚更) 私達にとっての昔から夢でもありました。

ですが、この「リアルタイム化」には従来大きな問題点を抱えており、プリレンダーされた静止画やアニメーションに比べて品質が低下するという点でした。そのため、たとえ面白い画が作れるとしても、ビジュアライゼーションという用途にリアルタイム レンダリングを応用するのは難しいと思われてきました。実際問題として、建築やブランド関連の要求の高いクライアントを相手に売り込もうとする場合、その「ゲームっぽい見た目」で説得するのは困難でした。

これが今では急速に変わりつつあります。今日使用できるリアルタイム エンジンでなら非常に美しく、同時に現実的な出力映像が実現可能となりました。

なぜアンリアル エンジンなのか?

UE4 はそのリリース当初から私達の業界でも多くの注目を浴び、その可能性も無限大に思えました。物理ベース レンダリング (PBR) のマテリアル システム、モデルのアンリアル エンジンへの移行に使用しやすいインポート関連のパイプライン、そして出力可能な映像の品質といった要素が揃ってしまえば、これはもう試してみるしかありません! 数週間前に各所で取り上げられた Koola さんの作品 (マーケットプレイスからもダウンロード可能) をご覧いただいていればすでにお分かりでしょうが、アンリアル エンジンで実現できる品質の高さは誰もが頷けるものになっています。

本記事では、マーケットプレイスからもダウンロード可能なシーン「Berlin Flat」の制作に使用したワークフローの概要をお見せしながら、その途中で気づいたテクニックや小技をお教えしたいと思います。私自身で見出したものも一部含まれますが、他はインターネット上で見つけた情報から導き出されたものです。アンリアル エンジンのフォーラム技術ドキュメント、エンジンに含まれる初期コンテンツ、そしてマーケットプレイスより入手可能なアセットやシーンは多岐に渡って非常に有用なリソースでした。

「Berlin Flat」

このベルリンにある歴史的建物のアパートを描いた画像シリーズは、2013年から 3ds Max と Corona Renderer を使って作成したものです。このツールはカラーマッピングの取り扱いに柔軟性があり、セット全体の白っぽい雰囲気を引き出すのに大いに役立ちました。またこれが UE4 を試してみようと思った理由のひとつでもあります。

UE4 はライティングが薄暗い、またはテクスチャの情報量が多いシーンで力を発揮しました。当初は白色が非常に強いインテリアで、こんな簡単に正確なシャドウと GI が描けるるとは思っていませんでした。

これは本来であれば中々骨の折れる作業になったはずです!

Realtime Berlin Flate

上の画像は 3ds Max と Corona Renderer を使って作成した元のレンダー画像です。セット全体をご覧いただくには、こちらをクリックしてください。

ですがとりあえずは一番最初から始めたいと思います。

元となったシーン

original scene

モデリング自体は実は 3ds Max での急ぎ仕事で作った物だったりします。なので実際にディテールを加えたのは最終画像に見える箇所のみです。ただこの方法はリアルタイム環境であればとても利用できないため、シーンをアンリアル エンジンで使用するためには、試験的な運用のためだけにスペース全体に手を加えるのは手間が掛かり過ぎるため、規模を狭める必要がありました。

そこで以上スクリーンショットの下部にあるアパート内の 2 部屋だけをエクスポートすることにしました。

アンリアル エンジン用のジオメトリのエキスポート

いくつかしっかり覚えておけば、その手順はごく簡単です!

物事は切り分けてしまうのが良いでしょう。ライトマスはオブジェクトごとに別マップとして計算されるため、壁や天井などの広く平べったいオブジェクトに対して大きな数値を使う場合は注意が必要となります。ですので、実際に可視できる壁の内側の面のみエクスポートしています。

あとで天井と交差させるため、壁の上部と下部を少し延長しています。これはジオメトリが密閉されていなかったり、しっかり交差していない場合に発生する、ライティングのアーティファクト「ライトリーク (光漏れ)」を防ぐことに繋がります。情報量の多いテクスチャを沢山使った薄暗いシーンであれば問題ないのですが、今回は非常に白色の強いスペースのため、 GI を可能な限り (特に角において) 正確に描画するのが重要となります。

exporting the geometry for Unreal Engine

もう一つ重要なのが、アンリアル エンジンのライトマス計算による GI 保存チャンネルに合わせて座標調整された、アンラップされた UV の作成です。3ds Max では「UV-channel 2」がこれに該当します。

「Channel 1」はディフューズ、ラフネス、ノーマルなどその他のテクスチャによって利用されます。アンリアル エンジンではチャンネルが「0」から始まるので、最初はすこし混乱するかもしれませんが、一旦理解できれば割と簡単です。

注: アンラップが関係してくるのはライトマップ用チャンネルのみです! テクスチャ用チャンネルはどんなマッピング (Cubic、Cylindrical など) でも問題ありません。十分な UV 座標を作成するなら、3ds Max のアンラップにある「Flatten Mapping」を使うのが簡単な場合が多いです。

lightmap channel

UE4 で Max-scene と同じようにシーンを組み合わせたい場合、「スペース」全体をそのままの配置にしておくと、オブジェクトの座標調整が簡単になります。イスなどの個別オブジェクトの場合はエクスポートを 1 度おこない、これをインスタンスとしてアンリアル エンジンのシーンに導入するのが一番楽でしょう。移行した際にアンリアル エンジンでのピボット点が 3ds Max の中心近くに設定されるため、これを見越して先に 3ds Max のシーン内の中心近くに移動させておきましょう。

chair 1

chair 2

ここでは LOD 用単純化を使わない高ポリゴン数ジオメトリを使用しているのがお分かりになるかと思います。このような使い方は、もちろん今回のように小さなシーンでしかオススメできません。また滑らかな雰囲気を狙っての事であって、家具にはギザギザ感を残さないためにはこれが最適な方法となりました。とはいえ、さらなる最適化は可能だったと思いますが! ;).

全アセットが同じオブジェクトに統合され、今後 UE4 で様々なマテリアルを扱えるように異なるマテリアル ID を適用しましょう!

次にジオメトリを .fbx ファイルとして保存したら、さっそくアンリアル エンジン エディタで作業を開始できます!

アンリアル エンジン 4

FBX ファイルのアンリアル エンジンへのインポートはごく短い手順で行うことができます。割と簡単です!

まずは分かりやすい別ファイルを用意しました。

  • 部屋のジオメトリを別途 fbx ファイルとして
  • アセットを別途ファイル (それぞれにオブジェクトを含む) として

ここで「Combine Meshes (メッシュ統合)」のチェックを外れていることを確認しておきましょう。これが有効になっているとオブジェクトが個別に出力されず、1 個のメッシュとしてベイクされてしまいます!

Combine Meshes

マテリアルについて

さて、私は非常に単純な人間であり、シンプルな手順が大好きです。哲学や信条的な要素かもしれませんが、出来るだけ小さな努力で行える作業のは、半年後にシーンを開いた時にしか思い出せないような構成を使うより遥かにマシです。

このシェーダーはデサチュレート (非飽和化) させ黒色とブレンドさせたディフューズ マップで構成された、非常にシンプルな物です。このマップの色調補正を行って反転させ、マテリアルのラフネス チャンネルに使用されます。これで終わりです。 :-D

Materials

法線マップだとやり過ぎとなってしまいますが、是非このシーンを使って好きなように色々マテリアルで遊んでみてください!

Normal Map

ここでは、イスとテーブルに木のマテリアルが適用されているのが分かります。暗色染めの木材にはっきりしたつや消しの反射属性をを与えることで、木材の構造と質感が見えるようになっています。

またこの画像には少し面白いマテリアルがさらに 2 つ含まれています。一つが陽光に照らされた、両面のマテリアルであるカーテンです。

back-lit sunlight

このエフェクトを生み出すには、シェーディング モデルを「Subsurface (サブサーフェイス)」に設定し、Constant ノードを「1」以下の数値で追加し、対象マテリアルの Opacity (不透明度) 属性につなげる必要があります。

ちなみに前面の瓶の方は、とてもシンプルなガラスのマテリアルを使用しています。

foreground material

かなり暗めのディフューズ色を使っており、またラフネス値を「0」、スペキュラ値を高めに設定しています。また Fresnel (フレネル) ノードを数値「1.5」で使って不透明度と屈折度を制御しています。もっと複雑な手法でさらにリアルなガラスの質感を生成することもできますが、その制御がかなり面倒だったので、個人的にはこの簡単なガラスで十分かなと思っています。 :)

ここで「Two Sided (両面)」にチェックを入れ、左側タブの [詳細] タブにある Translucency Lighting Mode (透過ライティングモード)を「TLM Surface (TLM サーフェイス)」に設定します。

TLM Surface

さて、ここで唯一法線マップを適用しているマテリアルである床も見ていただきたいと思います。

Material for Floor

ここでマテリアルがディフューズ色、ラフネス テクスチャおよび法線マップによって形成されているのがお分かりになると思います。

使っているディフューズ色は 4 つの定数によって定義された非常に淡いグレーになっています。

ラフネスはもう少し複雑です。左側には TexCoord ノードの異なるスケーリングの同じマップが 3 枚あるのが見えると思います。さらに各マップの赤色チャンネルがそれぞれ他のものと掛け算され、次にアルファとして Linear interpolation (線形補間) ノード (Lerp) につなげて数値をブレンドします。この例における「0.3」と「0.2」の数値では、床板に薄めのノイズの入った反射が写ります。これをさらに「Power (パワー)」ノードで微調整して、十分な見た目のラフネスを作り出します。

法線マップもやはり TexCoord の影響を受けており、「FlattenNormal」ノードを使って大幅にフラット化し、マテリアルに極々薄い凹凸を生み出しています。

アセットの準備

アセットはシーンへ投入する前に、ジオメトリ エディタ内でマテリアルを適用してしまうのが一番です。そうすることで一度やるだけで済み、また必要であればメインシーン内で別のマテリアルを充てることもできます。プロセスは素早い手順で終わりますが、ここで必要に応じて別途マテリアルを設定できるように、オブジェクトに異なるマテリアル ID を適用する重要性がお分かりになるはずです。

Preparing Assets

シーンの組み立て

さて、ここでごく簡単な事を申しますが――今度はこれを組み立ててしまいましょう。まずは部屋のジオメトリをドラッグ操作で投入しましょう。一番の方法は必要な全パーツを選択してから、何もないシーンの中へとドラッグ&ドロップします。あとは全ての家具やアセットを環境内に配置します。

Building the scene

ここで外壁の背面側が見えていないのが分かります。前述の通りより効率的なライトマス計算がされるように、片面のみ表示されるようになっています。

同じ理由で大型オブジェクトのライトマップ解像度を高い数値に設定しておくと良いでしょう。例えばこの壁は「2048」に設定しています。

Lightmap for large objects

また前述したように光漏れが問題になってくる場合があるため、これを防ぐためにシーン全体を黒い箱で覆っています。外側からの見映えはあまり良くありませんが、内側からだと十分清潔な感じに仕上がります。;)

black boxes around whole scene

ライティングとライトマス

ライティングも比較的簡単な構成になっており、窓の前に太陽とスポットライトの付いた平面を設置して疑似的に陽光を作り出す「Koola 手法」を利用しています。これはかなり効果的で、制御も容易です!

これからグローバル イルミネーション計算を行うわけですが、ここでいくつか調整すべき重要な点があります。

Global illumination tweak

光の反射と間接ライティングの品質を大きく上昇させています。また平滑化の値を「0.6」に減らしています。これにより細部がより巧く強調され、陰影もしっかりと残ります。

また直接ライティングを動的シャドウに設定することで、より良いシャドウを作り出せるようにしました。これは後にアニメーションとして光源を動かす時にも大切です。

getting better p with dynamic shadow

最後のステップとして、[Build (ビルド)] ボタンを押す前に「Lighting Quality (ライティング品質)」を「Production (プロダクション品質)」に設定しましょう。

Lighting Quality to Production

これで全面的に滑らかなライティングが出来上がったはずです! 

実は初めてこのステップまで来た時、私はもはや興奮気味でした! こういったスリルを与えてくれるのが、このエンジンの一番の強みではないかと思います。そしてこうして自分の作った「レンダリング」の中をリアルタイムで見て動いて回れたことは大きな喜びでした。

「ポスト プロセス」

最も役立つ仕様のひとつがエディタ内のみで色調補正やカメラ エフェクトの追加です。これはグローバル設定で PostProcessVolume を使うことで利用できます。飽和、収差、ビネット効果、ブルームをある程度調整し、Auto Exposure (自動露出) の最低値・最大値をどちらも「1」に設定することで無効にし、Exposure Bias (露出バイアス) を「1.42」ほどに設定することで全体的な明るさを上昇させました。 またレンズフレア効果も追加したのですが、これがリアルタイムで発生したのには驚きました!

Post Processing

アニメーションの構成

リアルタイム環境では、シーン内を自由に移動し、フィードバックが瞬時に得られるため、アニメーション作成が非常に簡単でやっていて楽しい作業になります。また映像合成ソフトウェアをよく使う人間にとって、内蔵されている「マチネ」ツールの使い方に慣れ、アニメーションを構築慣れてからアニメーションを構築できるようになるまではごく短時間で済みます。その最初の一歩が Matinee Actor を用意することです。

Setting up the Animation

「マチネ」起動時にトラック部とカーブ エディタの入ったウィンドウが表示されます。

カメラとアニメーションに関する設定については、特に説明の必要とする点はありません。動きは他のアニメーション作成ソフトウェアと同じく、キーフレームとカーブによって制御されます。また「カッティング」作業もマチネのエディタ内でやってしまう事が可能です。

私はスペース内で複数のカメラをゆっくりと動かしましたが、実際に自分が何をしているのかをリアルタイムで見れるため、カットのタイミングの調整やカメラの移動速度を調整するのが大変楽になりました。

created a couple cameras

カメラの軌道もエディタ内で確認し、その場での編集ができます!

マチネでの大まかな「カット」が出来上がったら、今度はアニメーション全体を avi 形式でエクスポートし、 Premiere で微調整を行って音楽との合わせ作業を行いました。

結び

まず 3ds Max からのエクスポートとアンリアル エンジン 4 へのインポートから始まり、次にシェーディングとライティングの作業を行い、アニメーションを作成して最後に Youtube にアップロードする、という一連の作業に要した時間はおよそ 1 日でした。この速度は建築ビジュアライゼーションにおいては未だかつて存在しなかったような速度であり、同分野におけるアンリアル エンジン 4 の主な可能性を反映していると思います。

「映像制作」におけるレンダリング時間の少なさは、創作プロセスに大きな柔軟性と自由性を与えてくれます。特に自分自身の操作のフィードバックが瞬時に返ってくるのはまさに革命的です!

私達は現在、この制作プロセスとワークフローを当社の日常作業と環境全体に応用するという可能性について、検討・実験を重ねています。

そして使える応用例は数多く存在し、私はそれを実際に試せる時を楽しみにしています!

私自身のやる気の源とプロセス全体に関してお教えできた事を願いながら、皆様にはシーン「Berlin Flat」をめいっぱいお楽しみいただけたらと思います。 ;)

Lasse

xoio