KLabGames Creative Blog

KLabは、多くのスマートフォン向けゲームを開発・提供しています。このブログでは、KLabのクリエイターがスマートフォン向けのゲームを制作・運営していく中で培った様々な技術や挑戦とそのノウハウについて紹介していきます。

はじめに

この記事は KLab Creative Advent Calendar 2019 の18日目の記事になります。

こんにちは。KLabGames事業本部CGデザイナーのkiyoonです。
映像制作会社での経験を経て、現在はUnityやMaya,AfterEffectsを使用し、エフェクトや演出作成を行う演出チームに所属しています。

AfterEffectsを使っていた人がUnityをはじめて触ると、AfterEffectsなら簡単に出来ていたことが意外と手間がかかったり、基本機能だけでは出来ないこともあるのではないでしょうか。
Unityでは標準機能だけでは難しかった表現も、シェーダーを作ることで解決できることがあります。
Unity2018から、デザイナーでも簡単にシェーダーを作ることができるShaderGraphが搭載されましたので、今回はそんなAfterEffectsでよく使っていた機能をUnityのShaderGraphを使ってシェーダーに置き換える例をいくつかご紹介させて頂きます。

Unityで使いたい機能

使いたい機能はたくさんありますが、その中でもエフェクトを作る際によく使いそうな物だと、

  1. 色合い(Tint)

  2. トライトーン(Tritone)

  3. レベル(Levels)

  4. 色相/彩度(Hue/Saturation)

  5. 白黒(Black & White)

  6. トラックマット

  7. (おまけ)色温度

この辺りが使う機会が多かったので、これらをシェーダーに置き換えて行こうと思います。

色合い(Tint)

画像の各ピクセルの輝度値を見て黒・白を指定した2色で補完するエフェクトです。
モバイル向けのゲームを作る場合、容量を減らす事が大切になりますので、グレースケールのテクスチャを用意して色変更をする際に使い回すことがよくあります。
Unity標準機能のAlphaBlendシェーダーを使い色を変更すると、テクスチャの白色部分を変更することはできるものの、黒色部分は黒のままなので使いにくいと感じる場面もあるのではないでしょうか。

この仕組をShaderGraphで再現したものがこちらとなります。

image12

テクスチャのカラー(今回は赤チャンネルのみ)をLerpノードの「T」の部分に接続し、黒側の入力値をLerpノードの「A」に、白側の入力値をLerpノードの「B」に接続します。Lerpノードの「Out」をMasterの「Color」へ接続すれば完成です。

作成したシェーダーをマテリアルにアサインするとこのように指定した2色で置き換えることができます。

image6

※今回は簡単に作る為、テクスチャの赤チャンネルのみを使用していますので、カラー画像を使った時に正しい輝度値が使われる訳では有りませんが、グレースケールのテクスチャを使う場合はここまで簡略化しても問題ないかと思います。

トライトーン(Tritone)

色合いエフェクトと似ていますが、画像の各ピクセルの輝度値を見て黒・白・中間の色を指定した3色で補完をするエフェクトです。
色合いエフェクトと違い、中間色を指定することも出来ます。

この仕組をShaderGraphで再現したものがこちらとなります。

image5

基本は色合いエフェクトと似ているのですが、黒側の色と中間の色、白側の色と中間の色、この2つをまずLerpノードで計算して、この2つと輝度値を再度Lerpノードで計算することで再現をすることが出来ます。
※今回も簡単に作る為、テクスチャの赤チャンネルのみを使用しています。

作成したシェーダーをマテリアルにアサインするとこのように3色で補完をすることが出来ます。

image8

レベル(Levels)

Photoshopのレベル補正と同じようなエフェクトで、画像のレベル範囲をガンマ値で決めた値に補正するエフェクトです。ただ単に暗くしたり明るくするのではなく、暗い所や明るいところは保持したままコントラストを調整出来ます。

ガンマ関数というのがあるみたいですが、難しいので今回は簡単に似たような表現ができるPowerノード(べき乗を計算するノード)を使った方法をご紹介します。

image11

テクスチャのカラーをPowerノードの「A」に接続し、数値(今回はVector1のスライダー)をPowerノードの「B」に接続します。Powerノードの「Out」をMasterの「Color」へ接続すれば完成です。

作成したシェーダーをマテリアルにアサインしたものがこちらです。

image10

Levelsのスライダーを動かすと色を締めたりできます。

色相/彩度(Hue/Saturation)

画像の色相・彩度・明度を調整することができるエフェクトです。
これを再現しようとするとRGBの画像をHSVに変換をする必要がありますが、ShaderGraphには便利なノードがありますので、今回はこちらを使って作っていきます。

image17

テクスチャのカラーをHueノードの「In」に接続し、0~360の範囲を指定したVector1のスライダーをHueノードの「Offset」に接続します。HueノードのRangeはDegreesにすることでAfter Effects等と同じように角度で調整ができます。
Hueノードの「Out」をSaturationノードの「In」に接続し、スライダー設定したVector1をSatuationノードの「Saturation」に接続します。

作成したシェーダーをマテリアルにアサインしたものがこちらです。

image7

Hue/Saturationの値を変えることで色相を変更したり彩度を変化させることが出来ます。

白黒(Black & White)

カラー画像を白黒にする事ができるエフェクトです。

単純に白黒にするだけなら、赤・緑・青それぞれのチャンネルを足して3で割れば白黒画像にする事ができますが、人間の目は赤・緑・青の見える感度が違うため、画像そのものの明度で白黒にすると違和感が生まれます。そのため、画像の輝度値を使って白黒に補正することで違和感の無いグレースケール画像を作ることが出来ます。

細かい計算式は難しいので割愛しますが、赤・緑・青それぞれの値に特定の係数をかけて足すことでより自然なグレースケールを作ることが出来ます。

image1

赤・緑・青をそれぞれ足して3で割った例です。これでも白黒画像になりますが、カラーと比べた時に違和感が生まれるかと思います。

image2

こちらが赤に「0.299」、緑に「0.587」、青に「0.144」の係数をかけて足したものです。
同じく白黒画像になりますが自然な白黒画像になります。

image15

この計算式は内積を取る計算式に置き換える事ができますので、今回はDotProductノードという内積を取れるノードを使用してみます。
テクスチャのカラーをDotProductノードの「A」に接続し、Vector3ノード(0.299, 0.587, 0.144)をDotProductノードの「B」に接続します。DotProductノードの「Out」をMasterのColorに接続することで完成です。

作成したシェーダーをマテリアルにアサインしたものがこちらです。

image4

違和感の少ないグレースケール画像になるかと思います。

トラックマット(Track Matte)

トラックマットはエフェクトではありませんが、After Effectsを使う上で非常に使用頻度が高いものかと思いますので、同じ様な機能を作ってみます。
Photoshopのクリッピングマスクと似たような機能でマスク用の画像のアルファ値/輝度値を使ってマスクをすることが出来ます。
Unityでマスク機能を使う場合コンポーネントを使用した方法等ありますが、シェーダーを使う方法もありますのでご紹介します。
アルファ値/輝度値を使ったマスクの2種類がありますので、それぞれShaderGraphで作ってみます。

アルファ値を使ったマスク

image13

まずはアルファ値を使ったマスクです。
テクスチャのカラーとマスク用画像のアルファをMultiplyノード(乗算)に接続します。そしてMultiplyノードの「Out」をMasterのAlphaに接続し、MasterのColorにテクスチャのカラーを接続すれば完成です。
今回はAfter Effects同様マスク画像の反転ができるよう、反転ボタンも付けてみます。
マスクテクスチャのアルファをOne Minusノードに接続して反転させ、Branchノードに接続します。画像のようにデフォルトはFalseにつないでTrueの時に反転するようにします。

作成したシェーダーをマテリアルにアサインしたものがこちらです。

image3

マスクテクスチャでくり抜かれているのが分かると思います。

image16

反転をするとマスクテクスチャの部分がくり抜かれます。

輝度値を使ったマスク

image19

今回も簡単に作るために輝度値ではなくマスクテクスチャの赤チャンネルを使用していますが、大まかな組み方はアルファ値を使ったときと同じようになります。

作成したシェーダーをマテリアルにアサインしたものがこちらです。

image18

マスク用のグレースケール画像でマスクされていることが分かります。

色温度(Color Temperature)

After Effectsの標準には無いかもしれませんが、映像や写真を使う人なら良く目にする色温度もShaderGraphには便利なノードがありましたのでご紹介します。

image14

ShaderGraphに用意されているWhite Balanceノードにテクスチャのカラーと色温度・色かぶりの2つを決める値を設定すれば完成です。

作成したシェーダーをマテリアルにアサインしたものがこちらです。

image9

Temperatureの値を大きくすると色温度が温かい色味へと変わっているのが分かるかと思います。

まとめ

After Effectsで使っていたエフェクトでもっと使いたいものはありますが、まずは簡単に実装できそうな物をご紹介させて頂きました。
やっていることは凄く簡単な事なのに意外と標準機能ではできなかった物が多いと思います。
これをコードで書こうと思うとデザイナーの方には敷居が高いと思いますが、ShaderGraphの様なノードベースのエディタを使えば簡単に作ることが出来ます。
色温度や色相/彩度等、ShaderGraphには使いやすいノードが予め用意されているので、様々な表現を簡単に作ることが出来ますが、実は結構高負荷な物もありますので、実際これらをモバイルで使えるかはエンジニアさんに確認が必要です。
また、ShaderGraphで自動生成されたシェーダーは必要ない部分も多く含みますので、実際にゲームで使う際は最適化が必要になると思います。
しかし、デザイナーこそシェーダーを触れるようになれれば表現の幅が広がると思いますので、まずは分かりやすいShaderGraphを触ってみてはいかがでしょうか。

はじめに

はじめまして。KLabで演出を担当している、まぎーたです。

主にゲーム内の新イベントなどのプロモーション映像制作を担当しています。
Adobe After Effectsを主に使用し、基本的には30秒以内の映像尺で日本語版の制作を行い、
サービスを行っているすべての言語に翻訳され配信されています。

今回は映像内に記述されるテロップを3Dで制作し、なおかつ簡単に他の言語にも
簡易的に対応する手法をご紹介します。

エクスプレッションを使用した3Dテキストの作り方

プロモーション映像にテロップ演出はつきものです。
視聴者に伝えたい情報を目を引く形で記載する必要があります。

フォント選びでしたり、炎や雷などの演出を加えるなど、やりかたは様々です。

私の担当しているプロモーション映像は様々な国で翻訳、配信がされる前提のもので
短い期間で他言語版へのローカライズ制作が可能なテロップデザインが求められます。

今回は、そういったテロップデザインの中からAdobe After Effectsの
エクスプレッション機能を用いた、3Dテキストの作り方をご紹介します。

ポイントとしてはAfter Effectsの基本機能だけで実現でき、
サードパーティプラグインに頼らない点です。

1.テキストを用意する

まずは記載したい文章を用意します。
テキストレイヤーでも、Photoshopでpngの画像として制作しても大丈夫です。
ゴージャス感を出すために金色で。
image7

2.テキストを用意する

①テキストを作業コンポジションに配置し、プリコンポーズしてコピーします。
 コピー元の名前は【全言語対応の3D文字を作ろう!】とし、
 コピー先とコピー元を分かりやすく【_メイン】【_コピー】と
 レイヤー名をリネームしました。

②ヌルオブジェクトを作成し、名前を【control】とします。
 このレイヤーで3Dテキストの管理を行います。

③それぞれのレイヤーの【3Dレイヤー】【モーションブラー】スイッチをオンにします。
image8

3.コントロール項目の作成

①【control】レイヤーに、
 エフェクト⇒エクスプレッション制御⇒スライダー制御を適用し、
 名前を【遠近】にリネームし、数値はとりあえず2としておきます。

②【control】レイヤーに、
 エフェクト⇒エクスプレッション制御⇒カラー制御を適用します。
 色は今回黒系の暗い色に設定しました。

【遠近】が3DテキストのZ軸のふくらみ
【カラー制御】がふくらみ部分の色となります。
image1

4.エクスプレッションの適用

①コピーしたテキストコンポジションに【塗り】を適用
・エフェクト⇒塗り を適用
・カラーのストップウォッチを【Alt+左クリック】しエクスプレッションを開く
・以下のエクスプレッションを記載
 thisComp.layer("control").effect("カラー制御")("カラー")
 ピックウィップで【control】のeffect("カラー制御")("カラー")を参照しても大丈夫です。

②位置パラメータにエクスプレッションを打つ
・位置のストップウォッチを【Alt+左クリック】しエクスプレッションを開く
・以下のエクスプレッションを記載

x= thisComp.layer(thisLayer, -1).transform.position[0];
y= thisComp.layer(thisLayer, -1).transform.position[1];
z=thisComp.layer(thisLayer,-1).transform.position[2]
+thisComp.layer("control").effect("遠近")("スライダー");
[x,y,z]

上位のレイヤーより【遠近】のパラメータの数値の分だけテキストのZ軸が前後するという設定です
image4

5.レイヤーの親子付け設定

テキストコンポジションをそれぞれcontrolに親ピックウィップします。
image8

6.コピーレイヤーを複製

コピーレイヤーを更に複製することによりZ軸の膨らみを増やしていきます。
今回は20回ほどコピーしましょう。
コピーを行った回数 × 【遠近】のパラメータ(今回は2) の分だけZ軸が膨らみます。
image5

7.【control】のパラメータを調整して角度や位置を変更

これで【control】レイヤーの位置、角度のパラメータを調整することにより3D化したテキストを動かすことができます。
image3


8.テキストを他の言語に差し替える

テキストコンポジション内の言語を入れ替えるだけで、
簡単に他の言語のデータも制作が行えます。

9.ここまで見て

ここまでの工程を見て、AfterEffectsの3Dレンダラー機能を使えば良いのでは・・・?
と思った方も多いと思います。
演出の内容や意図、作業環境によってはそれでも良いと思います。
ですが、3Dレンダラーは一部の機能が制限されるため、
用途によって使い分けていきましょう。

■CINEMA 4Dで制限される機能
image6

■レイトレース 3Dで制限される機能
image5

10.使用例

アニメーションやエフェクトを加筆した使用例です。
言語の切り替えは、コンポジションの中のテキストを入れ替えるだけでOKです。

おわりに

今回はサードパーティプラグインを使用しない3Dテキストについて解説しました。
同様の工程を行えば、テロップ演出だけにとどまらず、ロゴアニメーションなどにも応用していけます。

少しでも映像制作における演出の、お役にたてましたら幸いです。
今後も機会があればAfterEffectsの小ネタのような物を紹介できたらと思います。

最後までご覧いただき、ありがとうございました。

はじめに

この記事は KLab Creative Advent Calendar 2019 の16日目の記事になります。

こんにちは、KLabで3D演出制作全般の業務を担当している、やまパンです。

さて今回は、昨年書いた「セルルック調の3D雷エフェクトの作り方~素材編~」の続きとなる、アニメーション編について解説します。

こちらは前回の素材をアニメーションさせて作成した「落雷のエフェクト」です。
このエフェクトの作成方法について順を追って解説していきます。

雷の素材をUnityにインポート

前回記事にて作成した雷の各素材をUnityにインポートします。
インポートする素材は2点のみです。

・雷のテクスチャ

image16

・雷のモデル(fbx)

image7

ここでのアセットの名前は
テクスチャを「tex_thunder.png」、モデルを「mdl_thunder.fbx」と命名します。

image2

エフェクト制作前のデータ準備

さて、素材のインポートが終わったら次にそれらの素材をScene上に配置するためのデータの作成を行います。

データのアセット類は以下になります。

・prefab
・マテリアル
・AnimationClip
・AnimatonController

これらのアセットを作成・準備までの手順を以下に記載します。

1.マテリアルの作成

雷のテクスチャをモデルに張り付けるためのマテリアルを作成します。
雷の質感もこのマテリアルにアサインするShaderで確定します。
ここではAdditiveを使用し、雷の質感を加算に設定しましょう。

image13

2.prefabの作成

エフェクトデータの元となるGameObject(Prefab)を作成します。

Prefabの構造は以下です。

・FX_thunder.prefab(親Prefab)
  ∟root(Animationコンポーネント用)
    ∟mdl_thunder(雷のモデル)※ここにマテリアルをアサインする

image4

上記で作成したマテリアルはこの「mdl_thunder」モデルにアサインしておきましょう。

3.Animationアセットデータの作成

prefabに対してアニメーションを作成するための空のタイムライン(AnimationClip・AnimationController)を作成します。

ここでのアセット名前はAnimationClipを「ani_thunder」、AnimationControllerを「cnt_thunder」と命名します。

image3

この二つのアセットの違いについてですが、

・AnimationClip・・・アニメーションのキーフレームを制御する
・AnimationController・・・AnimationClip含めアニメーションの設定を制御する
といった用途の分類になります。

4.Animationアセットデータの設定

次に、Animationアセットデータの設定を行います。

まず、作成したAnimationClipをAnimationController内に格納して設定をして下さい。
「cnt_thunder」のアセットをダブルクリップすると「Animator」というウィンドウが出てきます。
その中に作成した「ani_thunder」をドラッグして入れて下さい。
そうすると以下の図の形が表示されます。

image12

ここまででAnimationアセットの作成と設定が完了となります。

5.AnimationアセットデータをPrefab側に設定

上記で準備したAnimationアセットデータをPrefab側にアタッチし、実際にアニメーションを行うための設定します。

まず、アニメーションを作成する際の親となるprefabを指定します。
ここでは「root」オブジェクトを親とします。
「root」オブジェクトを選択し、InspectorからAddComponentのボタンをクリックします。
これは対象のPrefabに対し、データを作成する上での様々な設定を行うためのコンポーネントを指定するためのものです。
今回は「root」オブジェクトに対してアニメーション付けを行いたいため、「Animator」コンポーネントを設定します。

image14

「Animator」コンポーネントを設定後、Controllerの項目に先ほど上記で作成した「cnt_thunder」をアタッチします。

image15

以上でアニメーション作成前のデータ準備が完了となります。

雷のアニメーションをつける

アニメーションを作成するためのデータ準備が整いました。
いよいよ実際に雷のアニメーション付けを行っていきます。

と、その前に、一度ここで実際に落雷の現象が起きた時の雷の見た目をイメージしてみてください。
落雷はとても瞬間的で、瞬く間に光って消えてしまいますよね。
エフェクトを作成する際もその原理は同じで、より自然現象に近い形のアニメーションを作成することで説得力が生まれてきます。

とはいえ雷を実際にゲームエフェクトとしてアニメーションの作成をする場合、プレイしているユーザーが認識できる記号としてデフォルメされた見た目や動きにアレンジする必要があります。

エフェクトを見る人が分かりやすく、かつより自然な印象に見せるためにどのようなアニメーションを作成するか意識することが大切になってきます。

・フレームレート:30fps
・尺:10~15f

の尺間でアニメーション付けを行いましょう。

テクスチャのUVスクロールでアニメーションを作成する

前回記事で作成したシームレスループ用のテクスチャに対し、「mdl_thunder」モデルのUVのY座標を動かします。
そうすると、UV制御のみでテクスチャの見た目に変化を入れることが出来ます。

その際に心がける点として、実際の落雷と同じようにパパッと短い尺で雷のシルエットが切り替わっていく見た目になるようなアニメーションを意識して制作すると、より自然な雷の見た目に近づきます。

※分かりやすいようにMayaのUVエディタで説明した図です※

image19

この動きを、実際にUnityのアニメーションに落とし込んでいきます。

まず、Animationウインドウから「Add propety」のボタンを選択します。
これはPrefab内のどのオブジェクトに対し、何の種別のアニメーションを制御するのか項目を選択するものになります。
出てきた項目の中から、「mdl_thunder」以下の「Material._Main_Tex_ST」を選んでください。
この項目がUVスクロールをアニメーション制御するためのものになります。

image11

そうすると、以下の形でUVスクロールの項目が現れます。

image20

上から、
「Material._Main_Tex_ST.x」と「Material._Main_Tex_ST.y」がオフセット制御、
「Material._Main_Tex_ST.z」と「Material._Main_Tex_ST.w」がスクロール制御になります。

今回の雷ではUVのY座標のみスクロールアニメーションを入れるため、
「Material._Main_Tex_ST.z」の項目に対してキーフレームを入れていきます。

image10

このように、15f間でランダムにキーを入れていきます。
上記画像はキーの遷移をグラフで表示したものです。

Y軸方向に動くUVスクロールのキーの補完を「Constant」に設定することで、テクスチャのみで雷のパチパチ感を表現することが出来ます。
(逆に、キーの補完を「Linear」に設定するとシームレスな動きになってしまいます)
「Constant」の補完設定でキーを入れた際の実際の動きが以下です。

UVスクロールアニメーションのみで雷のパチパチ感が出ていることが分かります。

スケールのアニメーションを付け加える

次に、より雷の動きを自然に近づけるためにスケールのアニメーションを追加します。

アニメーションの内容は左右の反転です。
UVスクロールのアニメーション時と同じ形の要領で、モデルの左右を反転させるアニメーションを追加することでよりランダムな見た目に近づけることが出来ます。

まず、先ほどと同じくAnimationウインドウから「Add propety」のボタンを選択します。
出てきた項目の中から、「mdl_thunder」以下の「Scale」を選んでください。
この項目がスケールを アニメーション制御するためのものになります。

image18

そうすると、以下の形でスケールの項目が現れます。

image8

上から、X軸・Y軸・Z軸に対してアニメーション制御を入れる項目になります。
今回の雷ではカメラからの見た目を考慮し、Z軸に対して反転のスケールアニメーションを入れて行きます。

今回の雷ではUVのY座標のみスクロールアニメーションを入れるため
「Material._Main_Tex_ST.z」の項目に対してキーフレームを入れていきます。

image17

UVスクロールアニメーションの時と同じように、15f間でランダムにキーを入れていきます。上記画像はキーの遷移をグラフで表示したものです。
Z軸のスケールにマイナス値のキーをいれることで、モデルのスケールを反転します。
スケールアニメーションも同じくキーの補完を「Constant」に設定することで、スケールの切り替えを瞬間的に表現します。

UVスクロール+スケールのアニメーションを融合した際の実際の動きが以下です。

いかがでしょうか。
UVスクロールとスケールのアニメーションを組み合わせることで、雷らしい動きに近づいてきたと思います。

ここからさらにアレンジとして、雷が落ちる瞬間のインパクトを追加します。
雷の「落雷の瞬間が一番大きく輝く」というイメージをスケールアニメーションで表現します。

落ちる瞬間のスケールを大きく表示させることで、エフェクトにインパクトと余韻が追加されました。

おまけ

落雷のエフェクトに対し、その他の要素のエフェクトを追加してみます。

落雷した瞬間のパーティクルと点滅する光を地面に設置したことで、
より落雷のエフェクトに説得力が生まれました。

まとめ

いかがでしたでしょうか!
ここで一度前回の記事のおさらいの意味もこめて、雷のエフェクトを作成する上でのまとめを記載します。

・雷のテクスチャを作成する際は雷のシルエットに注意しながら描画する
・十字の板モデルを作成する際、片方の板のUVはずらして不規則的な見た目にする
・アニメーションはUVスクロールとスケールのみで制御
・アニメーショングラフを【Constant】にすることで雷のパチパチ感を表現する
※落雷の瞬間のインパクト、その後の余韻を意識しながら作成する

「セルルック調の3D雷エフェクトの作り方」シリーズは今回の記事にて完結となります。

全体を通してやっていることは単純な制作になるので、是非試してみてください!

この記事は KLab Creative Advent Calendar 2019 の 15日目の記事です。
はじめまして、こんにちは。クリエイティブ部のはちみつと申します。

唐突ですが、KLabが提供しているゲームタイトルには日本語で制作されている国内向けのもの以外にも、英語やフランス語ドイツ語など多数の言語で制作された海外向けのものが存在します。
言語によってさまざまな特徴があるため、制作にあたって調査を行う場合があるのですが、筆者のはちみつは本年、タイならびにタイ語に関して調べる機会がありましたので、今回はタイ語についてご紹介いたします。

タイ語ってどういう言語?

タイ語は、タイやカンボジアなどで約2,600万人が使用している言語で、シャム文字(タイ文字)を使用して表記されます。
文字を読む方向は日本語と同じく左から右であり、基本的に文字と文字の間にはスペースが入りません。
また、口語の文章においては男性語尾女性語尾が存在します。
タイ料理のお店などで「サワディー クラッ(プ)」や「サワディー カー」というタイ語を耳にしたことはないでしょうか?
この「サワディー」から始まる2種類の言葉、どちらも「こんにちは」という意味なのですが前者を使用するのは男性、後者を使用するのは女性と使い分けされているのです。

image1

タイ文字(シャム文字)って?

タイ文字は、44種類(内2文字廃字)の子音字に9音の母音、5種類の声調を表す符号を組み合わせて使用されます。
子音字と母音符号、声調符号の種類数の合計は約80種類なので、各文字、符号の形のみであれば日本語よりはるかに少ないのですが、文字と符号を組み合わせて発音、声調を表現することを考えると……1音を表現するにあたっての組み合わせの数がどのくらいになるか、なんとなくお察しいただけるのではでしょうか。
実際にどのような形で組み合わせていくかについては、当然ですがしっかりと決まりがあり、子音字を中心にして前後左右に母音符号、右上に声調符号が配置され1音が表現されます。

image2

必ず子音字に母音符号や声調符号が付加されるわけではなく、発音、声調に合わせて付加されます。
また、母音符号の中には子音字とまったく同じ形のものもあります。

タイ文字のフォント

一般的に、タイの文字として思い浮かべる形状は、これまで本記事内にも登場しているクルクルした○がついているものだと思いますが、実はタイ文字のフォントは大きく分けて2種類あります。

  • フォント・ミー・ファ(セリフ)
    image3

    上品、落ち着きのある印象。
    新聞や説明資料、雑誌など読ませるための長い文章の際に多く使用され、フォントの印象から、ファンタジー物の表現に適しています。


  • フォント・マイミー・ファ(サンセリフ)
    image4

    ポップ、活気がある印象。
    広告、ポスターデザイン、ヘッドラインなどの短い文章の際に多く使用され、フォントの印象からスポーツ物の表現に適しています。


フォント・マイミー・ファの文字を見た際に「英語のアルファベットみたいな文字があるな」と思われた方もいらっしゃるのではないでしょうか。
この「英語のアルファベットに形状が似ている文字」を1文字だけでデザインなどに使用した場合、タイ文字として認識されない可能性が高くなります。

また、タイ文字はフォントによっても文字の形状が大きく異なるうえに、元の形状が類似している文字が多数存在します。
デザイン等にタイ文字を使用する際に、文字の形状に手を加える場合は十分注意が必要です。

image5

タイ文字を使ってみる!

ここまでにタイ語(タイ文字)の基本をざっくりとご紹介させていただきましたが、実際に「タイ語を使って何か作ってみたいな」と思われた方が、もしかするといらっしゃるかもしれないので、フォントとadobe製品での設定方法についてもご紹介しておきます。

フォント

おそらく一番入手しやすいのはGoogle Fontsです。
オーソドックスなミー・ファ、マイミー・ファをはじめ、手書き風のものや丸っこいものなど合わせて26フォント存在します。(2019年11月現在)
Google Fonts:https://fonts.google.com/?subset=thai
※実際に使用する際は、フォントの利用規約を必ずご確認ください。

Adobe photoshopの設定

下記の設定をすることで、きれいにタイ文字の表示がされるかと思います。
※設定をしないままタイ文字を使用すると、付加記号の位置が崩れてしまう可能性があります。

  • 環境設定>テキストエンジンオプションで[中東言語と南アジア言語]を選択

  • 文字パネル>[文字間のカーニング:メトリクス]を選択

  • 文字パネル>[付加記号の水平位置:0]を選択

  • 文字パネル>[付加記号の垂直位置:0]を選択

  • 段落パネル>[テキスト方向の設定:左から右]を選択

※ご使用になるバージョンによって設定箇所が異なる場合があります。

さいごに

いかがでしたでしょうか?
文字を読む方向や、文章にスペースが入らない…など日本語と共通する点もありますが、やはり多くの方はなじみのない言語かと思います。
なじみがないからこそ、扱う際には細心の注意が必要となり、扱うための調査が必要になります。

また、言語だけでなくその言語を使用する国の文化や習慣などを知ることで、その国に適した表現が見つかるかもしれませんし、知ってから目にする場合と知らないで目にする場合では、違った見え方をするかもしれません。

ことタイ語に関してのみで言ってしまうと、日常生活の中で触れる機会は少ないかもしれませんが、本記事をきっかけに少しでもタイ語について興味を持っていただけたら幸いです!

ここまでお読みいただきありがとうございました。
image6

この記事はKLab Creative Advent Calendar 2019 の14日目の記事になります。

こんにちは、KLabGames エフェクトデザイナーの丸Qです。

この記事では最近話題になっているSubstance Designerについて語っていきたいと思います。

Substance Designerはテクスチャ制作でお世話になるツールで、元々背景モデルで使用されている印象がありました。
しかし、3Dエフェクトのテクスチャ制作等でも使用されており、実際私が所属している案件でも導入されております。

そんな「Substance Designer」を使用して簡単なエフェクト用テクスチャを制作してみようかと思います。

細かくツールの使い方を理解するというより、とにかく「Substance Designerを使ってテクスチャを作る!」ことを目的に記事を書いておりますので、その点だけご了承ください。

作ってみるテクスチャ

今回は下画像のようなオーラや炎の表現で使用でき、かつ比較的簡単に作れるテクスチャを制作してみようかと思います。

image

ちなみにこんな感じに使用出来たりします。

ツールを起動して新規グラフを追加する

まずはツールを起動してみます。
すると下記のような画面になります。

image24

最初に新規グラフを作成してみましょう。
まずは下の画像のように操作を行ってみてください。

image17

「New Package」を選択すると「未保存のパッケージ」がエクスプローラに追加される。

image19

「未保存のパッケージ」を右クリックして、「New」→「Substance Graph」を選択する

image12

下のような画面が出てくるので、GRAPH TEMPLATEに「Empty」を選んでOKをクリックする

image6

「新規グラフ」が追加される

image15

ノードとは?

まずノードというのは下画像のようなものになります。
ノードには様々なエフェクト効果があります。
このノードを繋ぎ合わせていくことで最終的に欲しいテクスチャを出力していくのです。

image16

ベースとなるテクスチャの制作

それでは早速やってみましょう。

まず最初に「Shape」ノードをグラフエリアに追加して、基盤となる画像を作りましょう。
ここでノードの追加には2通りあります。
お好みの方法でノードを追加してみてください

ノード説明

Shape

ベースとなる形状を選択、入力できるノード
円や四角など、様々な形状がある

【その1】
ライブラリエリアでノードを選択、追加する方法です。
下記の画像の箇所でノードを検索、または選択して追加していくことが出来ます。

image7

image14

【その2】
もう一つの方法で、「Tab」キーを使用してノードを検索、選択する方法があります。
下記の画像を参考に追加してみてください。

image11

画像のような画面が出ますので、そこの検索エリアに「shape」と入力して、目的のノード「Shape」を選択してください。

image2

【結果
さて、これら二つの方法で
グラフエリアに「Shape」ノードが追加してください。

image21

ノードのパラメータを変更してみる

次に呼び出したノードのパラメータを調整みましょう
パラメータエリアは下画像の赤いエリアになります。

image9

それでは先ほど呼び出した「Shape」ノードを選択してみてください。
するとパラメータエリアに選択したノードのパラメータが出てくるかと思います。
そこの中に「INSTANCE PARAMETERS」という項目がありますので、そこのパターンを「放物面」に変更してみてください。

image4

Shapeノードの画像をランダムにタイリングする

次に同じ方法で「Tile Random」ノードを追加して、先ほど作った画像をランダムにタイリングしていきましょう。
「Shape」ノードと「Tile Random」ノードを画像を参考にドラッグ&ドロップで線を接続してみてください。

ノード説明

Tile Random 入力されたノード内容をサイズ、配置場所をランダムにタイリングする

image20

続いて「Tile Random」ノードのパラメータを調整してみます。
下画像の赤枠を参考にパラメータを調整してみてください。

image10

下記画像のような形になったかと思います。

image23

ベーステクスチャを完成させる

さて、どんどんノードを呼び出して接続していきましょう。
画像を参考に追加、接続してみてください。

  • 「Invert Grayscale」ノードで画像を反転させる

  • 「Blur HQ Grayscale」ノードで少し画像をボカす

ノード説明

Invert Grayscale 画像を反転させる
Blur HQ Grayscale 画像をボカす

image8

質感となるテクスチャの制作

さて、次に質感となるノード群を制作してみます。
画像を参考に、次の通りにノードを接続してみてください。

  • ベースとなるテクスチャ画像として「Clouds 2」ノードを追加する

  • 画像の明暗をパッキリさせる「Auto Levels」ノードを追加、「Clouds 2」ノードから接続する
  • ボケと歪みを付ける「Slope Blur Grayscale」ノードを追加、画像を参考に「Auto Levels」ノードから接続する
  • 画像を反転させる「Invert Grayscale」ノードを追加、「Slope Blur Grayscale」ノードから接続する
  • 画像をボケさせる「Blur HQ Grayscale」ノードを追加、「Invert Grayscale」ノードから接続する

ノード説明

Clouds 2 ノイズ系のデフォルト画像の1つ
Auto Levels

レベル補正のこと
階調をコントロールすることで画像の明るさや色を調整できる

Slope Blur Grayscale ブラーの1つで、ボケを足しつつ歪みを入れることができる

image5

制作した2つのノードをブレンドして色味をつける

さて、今皆さんのグラフエリアには2つのノード群が出来ているかと思います。
それらの結果同士をブレンドしてみましょう。

  • 「ブレンド」ノードを呼び出す

  • 1つ目のノード群の「Blur HQ Grayscale」ノードをブレンド端子の真ん中に接続する
  • 2つ目のノード群の「Blur HQ Grayscale」ノードをブレンド端子の一番上に接続する
  • 「ブレンド」パラメータの画像を参考に、二つの画像を加算させる

ノード説明

ブレンド 二つのノードの入力に対して、加算、減算、オーバレイなど様々な効果を掛けることが出来る

image3

ここまでくればもう一息です!

最後に「Gradient Map」ノードを接続して画像のパラメータを参考に色味を付けてみてください。

ノード説明

Gradient Map グレースケールのテクスチャに明度の高いところから低いところにかけて色を付けることが出来る

image13

これにてテクスチャは完成になります!

画像を出力してみる

それではこのテクスチャを出力してみましょう。
まず「出力」ノードを追加し、先ほどの「Gradient Map」ノードと接続します。

※「Tab」キーで出すウィンドウは日本語検索が出来ません。ですのでライブラリエリアで検索するか、「Tab」キーでウィンドウを出した後、下の方にスクロールして「出力」ノードを選択してみてください。

image25

次に下画像のように選択してみてください。

image18

次に出力設定を選択します。
今回は出力先だけ指定してテクスチャを出力してみましょう。
「Export outputs」ボタンで出力したら、「閉じる」ボタンで画面を閉じましょう

image22

これにて無事出力されました!

image1

最後に

如何でしたでしょうか?

とにかく「Substance Designerを使ってテクスチャを作る!」ことを目的に書いてみた形になります。
このツールは上手く使うことで様々なテクスチャを作ることが可能です。
今回の記事がSubstance Designerへのきっかけとなっていただけると幸いです。

最後まで読んでいただきありがとうございました。

はじめに

この記事は KLab Creative Advent Calendar 2019 の 13日目の記事になります。

こんにちは。KLab株式会社クリエイティブ R&DグループのYojiと申します。

現在クリエイティブR&Dグループでは、研究開発の一環としてハイエンドグラフィックの技術を如何にモバイル上で表現するか、PCやコンシューマからモバイルまでを対象に、ゲーム制作を如何にスケーラブルにおこなっていくか等を目的として、UnityHDRPを使用した高品質なグラフィック表現に取り組んでいます。

検証はPBRをベースとして取り組んでいるのですが、PBRと言うとフォトリアルをイメージされる方も多いかと思います。弊社の開発するタイトルでは、比較的カトゥーン系のノンフォトリアルのグラフィックが多いのですが、カトゥーン系のグラフィックにおいてもPBRを用いる事で様々なメリットが得られると考え、PBRを検証のベースとしています。

メリットの一つに、物理的に正しい値を用いる事での一定のルール化があります。
値を共通のルールにする事で、個々のアーティストの技量に委ねる部分が減り、誰でも一定以上のクオリティで制作をおこなう事ができ、大人数でおこなう3Dゲーム制作においては非常に大きなメリットになってきます。
比較的簡単にクオリティが出せるので、絵作りやデザイン等のよりクリエイティブな部分に時間を使う事ができるようになりますし、制作のアプローチが物理的に正しいかどうかといった判断基準もより明確になるので、何かおかしい?クオリティが上がらないけど何故?どうすればいい?といった原因の突き止めや対策もおこないやすくなります。

今回は、初回という事でUnity HDRPの使用方法や簡単な用語解説等も交えつつ、実際にハイエンドグラフィックのシーン、ライティング制作のアプローチを紹介していきたいと思います。Unityの使用バージョンはUnity2019.9.0b3で、3DアセットのShaderはHDRP Litの使用を前提としています。3DアセットやShaderは制作済みの状態から説明をしていますので、アセットが無い場合はUnityのサンプルアセットを使用されてもよいと思います。

「作例1」今回はこちらのシーンを作例として紹介を行っていきます。
image69

HDRP環境設定

HDRPの環境セットアップについてはUnityBlog「HD レンダーパイプライン:アーティストのためのクイックスタートガイド」という記事を参考にさせていただきました。

High Definition Render Pipeline Assetが作成されていて、Sceneが空の状態から説明をしていきます。順を追って説明していけるように、初期状態のアセットも一旦全部削除して3Dアセットを配置した状態から開始していきますので、始める前に3Dのアセット以外は削除しておいてください。

SceneSettingの作成

  1. まず始めに、空や影等の環境設定をおこなうSceneSettingのAssetを作成します。
    こちらが今回主に使用するアセットになります。
    image20

  2. Profileも作成されますので、InspectorのProfileを選択して分かり易いように名前を付けておきましょう。
    image59
    image46

  3. ProjectSettingのHDRP Default Setingsから、Default Volume Profile Assetの項目を選択し、Defaultに先ほど作成したProfile Assetを割当てておきます。
    DefaultのProfile Assetと新しく作成したProfile Assetで、二重に効果が掛かる事があるためです。
    image38

ライティング設定

前準備が整いましたので、実際にシーンのライティングを初めていきましょう。
その前に事前の知識としてライティング成分の分解について簡単に説明しておきます。
実際の物理空間では光が物体に鏡面反射する現象も、拡散反射する現象も全て同じ光源からの反射現象ですが、RealtimeのCG空間では鏡面反射と拡散反射の現象を、それぞれ別のライティングソリューションを用いて表現する事が多いです。

UnityHDRP環境でも複数のライティングソリューションが提供されていますが、どの表現にどのソリューションを用いるか分かり易く整理するため、静的オブジェクト・動的オブジェクトとそれぞれの反射成分に分けてまとめてみました。あくまで一例なので参考までに。

静的オブジェクト
(動かない物)
【鏡面反射成分】
物体の表面で鏡面方向に反射し、目に届く光成分。物体の色成分は持たない。
※金属の場合は反射の際に電磁波の影響を受け色成分を持ちます。
直接光 ・DirectionalLightやPointLight等
スカイライト ・HDRSky
・Procedural Sky
間接光 ・ReflectionProbe
・ScreenSpace Reflection(Bake非対応)
・Planar Reflection Probe(Bake非対応)
【拡散反射成分】
物体の表面や内部で複雑に反射した光が目に届く成分。反射する際に一部の波長が吸光され物体の色が視認できるようになります。
※金属では拡散反射は起こりません
直接光 ・DirectionalLightやPointLight等
スカイライト ・Lightmap
・HDRSky(IBL)
・Procedural Sky(IBL)
間接光 ・Lightmap
【遮蔽】
物体が光を遮蔽する現象
直接光 ・CasscadeShadow
・Contact Shadow
・MicroShadow
間接光 ・SSAO
・Planar Reflection Probe(Bake非対応)
・ScreenSpace Reflection(Bake非対応)
動的オブジェクト
(動く物)
【鏡面反射成分】
物体の表面で鏡面方向に反射し、目に届く光成分。物体の色成分は持たない。
※金属の場合は反射の際に電磁波の影響を受け色成分を持ちます。
直接光 ・DirectionalLightやPointLight等
スカイライト ・HDRSky
・Procedural Sky
間接光 ・ReflectionProbe
・ScreenSpace Reflection(Bake非対応)
・Planar Reflection Probe(Bake非対応)
【拡散反射成分】
物体の表面や内部で複雑に反射した光が目に届く成分。反射する際に一部の波長が吸光され物体の色が視認できるようになります。
※金属では拡散反射は起こりません
直接光 ・DirectionalLightやPointLight等
スカイライト ・HDRSky(IBL)
・Procedural Sky(IBL)
間接光 ・Lightprobe
【遮蔽】
物体が光を遮蔽する現象
直接光 ・CasscadeShadow
・Contact Shadow
・MicroShadow
間接光 ・SSAO
・Planar Reflection Probe(Bake非対応)
・ScreenSpace Reflection(Bake非対応)

EXPOSUREの設定

Unity HDRPではハイダイナミックレンジ(HDR)でデータが扱われていますので、シーンではEXPOSUREのコントロールが必須の要素になります。
ハイダイナミックレンジ(HDR)とは、現実の世界と同じようにとても幅の広い輝度情報をもっているイメージの事で、通常のモニターや端末で見る画像はスタンダートダイナミックレンジ(SDR)とよばれ、8bitの情報でしか表現できませんが、ハイダイナミックレンジ(HDR)は32bitもの情報を持っています。

現実世界の光も、とても大きな幅を持っていて、人間の眼は無意識化に瞳孔を調整し入ってくる光の量にコントロールして最適な見え方を保っています。
暗い所から急に明るい所にでると眩しいと感じる現象も、入ってくる光の量に瞳孔の調整が間に合ってない事からおこります。(時間とともに瞳孔が締まり、次第になれてくるはず)
CGでも、現実に近い光学現象を再現し説得力のある絵作りを行うため、多くの階調が持てるHDRの画像データで表現する事が取り入れられてきました。

データの取り扱いはHDR空間で行われますが、最終的な表示先であるモバイル端末やテレビはLDR空間である事がほとんどですので、HDR空間の光の量をLDR空間の光の量にあてはめて表示する必要があります。最適な光の量にコントロールする機能がExposure機能になります。

  1. HDR空間でのシーン作成では、始めにExposureの設定を必ずおこないます。
    先ほど作成したSky and Fog VolumeのAdd OverrideからExposureを作成します。
    メニューの一番上に項目があると思います。それほど重要という事ですね。
    image64

    ModeはEV値(Exposureの値の略)が固定か動的に変化するかを選べます。
    動的では実際のカメラのように画面の情報を取得し自動で最適なEV値に調整できます。今回は狙った絵作りができるようFixedで設定していきます。
    明るめの室内のイメージにしたいので、EV値はひとまず「10」に設定します。この段階では画面は真っ暗です。以下の表はEV値の目安の一例です。

    晴天の屋外 EV:14
    明るい室内 EV:9
    街燈のある夜景 EV:4

空の設定

次に、空の設定と空からの環境光の設定をおこないます。空の表現には動的な時間変化に対応したProcedural Skyと、固定のHDRの画像データで表現する手法等があります。今回は設定が比較的簡単なHDRIを使用した空を作成したいと思います。

  1. 作りたいシーンにあったHDR画像をUnityProjectの適切なAsset管理場所に保存しておきましょう。画像はデフォルトでは2Dとして扱われているので、HDRIとして扱えるようにInspectorからTextureShapeをCubeに切り替えます。
    image61

  2. Sky and Fog Volumeに戻り、Visual EnviromentのSkyTypeをHDRI Skyに切り替えます。合わせてデフォルトで作成されてるPhysically Based Skyは削除しておきましょう。
    image45
    image32

  1. Add OverrideからHDRI Skyの機能を追加します。
    image4

  2. 先ほど設定したHDRIを、HDRI Skyの項目に紐づけます。
    HDRI SkyのEXPOSUREを設定します。先ほどシーンのExposureを設定したEV値と同じ「EV:10」に設定しました。
    HDRI撮影時の環境下の適正露出が分かっていれば適正露出に設定するのがいいと思いますが、分からない場合は環境の数字を目安に設定しておきます。
    image62

    真っ暗だったシーンに空のイメージが表示され、シーンに配置されている静的オブジェクトに対して空からの鏡面反射成分が情報として加わりました。
    画像が暗くて分かりにくいですが、、、
    image72

空からの環境光による拡散反射表現の設定

本来、色の要素を持つはずの拡散反射成分がないため、全体的にグレーの見た目になっていると思います。空からの環境光が拡散反射成分に影響するよう設定していきます。このシーンでは背景は静的オブジェクトとして、ライティングの設定を進めていきます。空からの拡散反射光表現にはBakeを使用します。

  1. アセットがStaticになっている事を確認します。
    image6

  2. Lighting Settingを開きます。
    Environment(HDRP)のProfileに、先ほどリネームしたSettingProfileを設定します。次にStatic Light SkyにHDRISkyを設定しましょう。
    image34

  3. Bakeのパラメータを設定していきましょう。

    BakedGlobal IlluminationI:ON

    LightingMode:ShadowMask(遮蔽をベイクします。)

    Lightmapper:ProgressiveGPUを使用します。ProgressiveCPUと比べ高速です。
    各Samplesの値は速度と品質に影響するので、PC環境とイテレーション回数に合わ
    せて調整します。最初はイテレーション多く確認していくので適度に低い値で大丈夫です。

    FilteringとMultiple Importance Sampleはノイズ軽減のためONにしておきます。

    Lightmapsize:大きいと品質が上がりますが計算時間が増加します。
    image47

  4. Generate Lightingでベイクすると静的オブジェクトにも空の環境光が反映され物体の色が見えてきました。これで、静的オブジェクトの鏡面反射、拡散反射のそれぞれの成分に空からの環境光が反映された状態となりました。
    image65

直接光の設定

環境光が設定できましたので、次に太陽からの直接光の反射表現を設定していきます。

  1. 太陽光となるDirectionalLightを作成します。
    image58

  2. DirectionalLightは太陽光を想定して「Intensity」の単位はLuxを使用します。Luxは面積に対して照らされた照度で、簡単に言うとその場所の明るさの単位です。太陽光のような広範囲の場所に対して全体的に照らすライトには、分かり易いLuxを用います。傾いた午前の太陽光を想定して65000LUXの値に設定します。色温度も設定できますので、正午の太陽光の5000K近辺に設定します。
    image60
    暑い昼間の太陽光100,000Lux5000〜6500K
    曇り50,000Lux6500K
    日没500Lux2000〜3000K
    満月0.2Lux4000K

  1. 設定した画面は眩しいくらい真っ白になってると思います。太陽光が壁などによって遮蔽されずに突き抜けているので、太陽光の影を設定していきましょう。ShadowのEnableをONに設定。解像度は高い方が品質が上がりますが、リソースと処理負荷を消費します。ここでは、Resolutionを「2048」に設定しました。また、Sky and Fog VolumeのCasscadeShadowの設定と合わせて品質を調整しますが、こちらは後の項に記載します。
    Shadow Softnessの設定で影のエッジがくっきりした影か、ぼやっとした影か設定が出来ます。今回は太陽光なのでハッキリとした影に少しボカしをいれて0.04で設定しました。環境と好みに応じて調整しましょう。
    image27

  2. Shadow Resolutionの上限値等の設定はHDRenderPiplineAssetに設定があるので、デフォルトで設定されている上限以上を使用したい場合はこちらを変更します。
    image5
    image50

  3. Shadowの解像度を上げてもまだまだ荒いので、Sky and Fog VolumeのCasscadeShadowの設定で調整します。AddOverrideからShadowsを作成します。
    image71
  4. Casscade CountはShadowマップが持つ枚数の事で数が多い方が、よりシーン内の影の解像度が高くなり距離に合わせて細かなコントロールが可能になります。但し、数が多いとよりメモリ容量を圧迫します。Splitは、各ShadowMapの使用する範囲を設定します。数値はそれぞれのSplitの適用距離となっていて数値を下げると手前から適用される範囲が狭まり解像度は上がっていきますが、奥の解像度が荒くなっていきます。
    image57

    狭い部屋や広い屋外等のシーンの状況によって調整が必要です。今回は狭い部屋なので、複数枚のShadowMapを狭い範囲に適用し解像度を上げる方向に調整しました。ただ、極端な設定なので少し広いと奥の解像度が極端に下がり破綻してきます。CasscadeShadowは古くからある手法なので、調べれば情報も沢山でてきます。実際に設定を変更し色々試してみてください。
    image41
    image3

間接光表現の設定

これで、直接光で空間が照らされ影が入り、鏡面反射・拡散反射ともに表現されましたが、まだまだ情報が足りません。直接光があたり、物体に反射した光の表現が入っていないので、とても単調で暗いシーンになっています。ここから、反射光を表現するGlobal Illuminationの効果を加えていきましょう。Global Illuminationとは、物体に跳ね返った光が相互反射し伝播していくことを表現するレンダリング手法で、省略してをGIと呼ばれる事もあります。

  1. GIを加えるためLighting SettingでLightmapを再度Bakeします。Bake後、反射光が反映され画面全体が明るくなり、グッと良い絵になったかと思います。
    image22
    image43

  2. 画像の壁部分に、ほんのりと床からの黄色い反射色がのっているのが見えると思います。太陽光が床に跳ね返る時に床の反射能によって、光の波長が吸収され壁を照らした結果です。このような反射表現をカラーブリーディングと呼びます。
    床の色が青であれば青が反射し、赤であれば赤が反射し、白い壁の色に影響を与えます。
    image49

鏡面反射成分の環境光と遮蔽

Global Illuminationが反映され少しまともな見た目となりましたが、まだまだ不自然な部分が残っています。
image33
例えば、上図の床面部分では鏡面反射成分の遮蔽がされていないので、空の光が壁を貫通しそのまま映り込んでしまっている事が原因で、とても不自然に見えてしまっています。拡散反射成分の反射光をLightmapで表現したように、鏡面反射成分の反射光(鏡等の映り込みなども同じ現象)も表現する必要があるので、鏡面反射成分に反射光が入るよう設定していきます。

Reflection Probeの設定

鏡面反射成分の反射光を表現する手法としてReflectionProbeという機能があります。指定の位置から全方位撮影した画像を作成し、それを参照する事で鏡面反射を疑似的に近似します。

  1. まずHierarchyからLight>ReflectionProbeを作成します。
    image37

  2. 今回は動的なオブジェクトがないので、TypeはBakeを選択します。
    image52

  3. ReflectionProbeがオブジェクトに影響を与える範囲を設定します。範囲形状はBOXとSphereの2つから選択します。ここでは部屋に対して範囲は設定し易いBOXを選択して部屋を囲みました。
    image51

  4. 球の位置からReflectionProbeに使用する画像が撮影されるので、適当な位置に調整します。

  5. 位置を決めたら影響範囲を再度確認してBakeします。Bakeが成功すると球に撮影された画像が適用されます。

  6. シーン内のアセットの鏡面反射成分に対し、環境光と遮蔽が反映されたと思います。
    image24
    image12

  7. ReflectionProbeを設定し遮蔽ができましたが、カメラを動かしたりすると反射している画像が滑るようにズレて不自然な反射になる部分が出てくると思います。下図のように、壁があるのに床面には外の空が映り込んでる状態でとても不自然に見えます。次はこちらの対策を進めていきます。
    image1
Planar Reflection Probe

Planar Reflection Probeは、設定された範囲のオブジェクトに対して、指定方向から平面的に撮影された画像を鏡面反射用のマップとして使用する機能で、局所的に反射の精度が上がり自然な鏡面反射に近づきます。
但し、Realtimeのみの対応です。平面の一方向のみの撮影なので、水面や地面、壁などの面に対して有効です。では実際に設定していきます。

  1. HierarchyからLight>Planar ReflectionProbeを作成します。
    image19

  2. Inspectorで反映したい部分を囲むように調整します。今回は床面に適用したいので床を囲むように設定しました。
    image10

  3. Field of view ModeとValueの値で画像を描画する範囲を設定し、適切な見た目に調整します。コントロールがし易いFixedに設定しました。image67
    設定しても、モデルデータの構造によっては画像のように空の光が漏れだしてるケースもあるかと思います。image54

  1. MaterialのNormalmapの法線方向を参照したり、精度の問題で空が映る事もあるので、今回は空のデータを取得しないように設定しました。
    image42

  2. これで、一通りの光の要素が入りました。
    image56

ライトの追加

さらにシーンに説得力を持たせるため、ライトを少し追加していきたいと思います。先ほど、床の鏡面反射に漏れだした空からの光を対処する為に、空の鏡面反射成分を取り除きましたので、それをエリアライトで補います。

  1. HierarchyからArea Lightを作成します。image39

  2. 窓の外側に配置します。窓枠に近すぎると影がハッキリと落ちてしまい、狙った効果が得られないので少し離して配置します。image11

  3. Shapeの項目でArealightの大きさを調整します。
    空色に近い色を設定し、Intensityは一般的な青空の値の15000ルーメンを設定しました。Shadowの項目では解像度を少しあげ、Shadow Coneも調整し意図していない光の漏れがないように設定します。
    image17

  4. Arealightを入れる事で、空からの光が足されて説得力が少し上がっているかと思います。
    image40
    image21image28image9

Postprocessingの設定

次にPostprocessingの設定を行っていきます。Postprocessinとは、文字通りレンダリング画面に対して後処理を加える事で、略してポスプロとも呼ばれています。PBR環境ではポスプロの設定でLookが決まるとても重要な工程です。それぞれのアーティストの個性やセンスがでる部分でもあります。それでは、ポスプロの設定を進めていきましょう。

Ambient Occlusionの追加

Lightmapで間接光のシャドウがある程度表現されていますが、オブジェクト同士が隣接している場所や、接地している部分で明るく不自然に見えている箇所もあると思います。間接光の遮蔽が正確に計算されていない事が原因です。この計算はとても重い計算になるため、境界面の部分的な遮蔽を近似する表現としてAmbient Occlusionがよく用いられます。
特にRealtimeでは非常に効果的な機能ですので、今回もAmbient Occlusionを使用してみます。

  1. Add OberrideからLighting>Ambient Occlusionを作成します。
    image14

  2. パラメータを調整します。Intensity等でOcclusionの強さや影響範囲を調整していきます。あまり入れすぎると不自然に濃い絵になるのでほどほどにしましょう。
    今回はIntensity:0.7と、Radiusを0.75にして影響範囲をさげました。
    image13

  3. ソファの背もたれと座面の合わせ目や、壁との設置部分にOcclusionが落ちている事が確認出来ると思います。
    image23
    image48

Tonemappingの追加

HDRのシーンの放射輝度を最終出力先である、8bitSDRの0〜1の範囲に階調再現を行う機能です。ハイダイナミックレンジの世界を、知覚的に再現するためTonemapping機能を使用します。

  1. SkyandFogVolumeのInspectorを開きAddOverrideからTonemappingを作成します。
    image25

  2. TonemappingのModeにチェックをいれ、「Neutral」を選択しました。
    TonemappingのModeにACESという設定もあります。
    これは、映画業界の色空間規格のACESを近似したマッピングを行います。
    コントラストが強いLookになるので、絵作りのコンセプトに合わせ使用します。
    image31

  3. 白飛びしていた部分が軽減されているかと思います。
    image8
    image55

Bloomの追加

光が溢れた表現を加える機能です。空気感も出るので特に理由がない限り使用をお薦めします。

  1. SkyandFogVolumeのInspectorを開きAdd OverrideからBloomを作成しますimage18

  2. Intensityを上げると効果が見えてきます。パラメータを調整しビジュアルのコンセプトに合わせ好みの効果を得ましょう。
    image53
    image16
    image26

MicroShadowの追加

Micro ShadowはNormalmapの凹凸に対して、光源からの方向性を持った影を加えます。細かい効果ですが、ディティールが加わりより詳細な表現となりますので、そのシーンでの必要性に応じて使用を検討されるのがいいと思います。

  1. SkyandFogVolumeのInspectorを開き、Add OverrideからShadow>MicroShadowを作成します。
    image35

  2. EnableをONにしてOpacityでMicroShadowの透明度を調整します。
    今回はOpacityを「0.7」に設定しました。
    image29image66image63

その他

他にもカラーグレーディングの機能が豊富に用意されています。これらの使用方法は、また次回機会がありましたら紹介していきたいと思います。カラーグレーディングは最終的な絵作りを決定づけるパートなので、時間をかけて説明しないといけませんし。

仕上げ調整

一通りの設定が完了しました。これまで設定した各項目を再度調整し全体の絵作りをおこないます。最後のこの工程で、クオリティも変わってきますので時間をかけて調整しましょう。ここが一番面白い工程ですね。

色々と調整し、最終的に下図のLookに仕上げました。画像は静止画ですが、全てUnity上でリアルタイムで表現されています。

image69

ExposureやHDRIやライティングを変更し夜のシーンも作成してみました。昼から夜へのシーンの変更自体は簡単に行えるので、クリエイティブ面に沢山の時間を費やせますね。
image36

※アナモルフィックレンズフレアのみPhotoshopでの合成ですが、カラーグレーディング含めUnity HDRP上で完結しています。

こちらは同じシーンにDepth of Fieldをいれたケースです。
image44


別カット
image68

最後に

最後にPBR環境でLookを作っていく上でのポイントを少しまとめて記載したいと思います。

現実の環境のように光量が溢れるハイダイナミックレンジの世界では、EVと照度を管理し絵作りをおこなっていく事がとても大事になります。これには制作工程上の大きなメリットもあり、非PBRのアドホックな制作アプローチと違って、絵作りの仕組みを理解し制作する事で、比較的簡単に高品質な結果を得る事ができます。また、昼間・夕方・夜といった時間帯の違うシーン、晴れ・曇り・雨といった天気の違うシーン等への変更も、効率よく制作する事が出来ます。今回のような制作アプローチは、コンシューマゲームに限らず、現在のモバイルゲームにおいても応用出来る有効な制作アプローチであると考えています。

PBR環境でのLook制作は、CGの基礎的な知識の他、カメラやレンズの知識であったり、光学の知識であったり、ライティングの知識であったりと幅広い分野の知識が求められ、それぞれの分野がとても深くどこまで追求しても飽きがこない非常に面白い世界だと思います。興味を持った分野を少しずつ堀り進め、知識を蓄え理解を深めていきたいと思います。

この記事を読まれ、興味を持った方は是非実践してみてください。
有難うございました。

明日のアドベントカレンダーの記事は、「Substance Designerを使ってテクスチャを作る!」です!お楽しみに!