BlogKLabは、多くのスマートフォン向けゲームを開発・提供しています。このブログでは、KLabのクリエイターがスマートフォン向けのゲームを制作・運営していく中で培った様々な技術や挑戦とそのノウハウについて紹介していきます。18日目の記事になります。KLabGames事業本部CGデザイナーのkiyoonです。映像制作会社での経験を経て、現在はUnityやMaya,AfterEffectsを使用し、エフェクトや演出作成を行う演出チームに所属しています。AfterEffectsを使っていた人がUnityをはじめて触ると、AfterEffectsなら簡単に出来ていたことが意外と手間がかかったり、基本機能だけでは出来ないこともあるのではないでしょうか。Unityでは標準機能だけでは難しかった表現も、シェーダーを作ることで解決できることがあります。Unity2018から、デザイナーでも簡単にシェーダーを作ることができるShaderGraphが搭載されましたので、今回はそんなAfterEffectsでよく使っていた機能をUnityのShaderGraphを使ってシェーダーに置き換える例をいくつかご紹介させて頂きます。White)トラックマット(おまけ)色温度この辺りが使う機会が多かったので、これらをシェーダーに置き換えて行こうと思います。色合い(Tint)画像の各ピクセルの輝度値を見て黒・白を指定した2色で補完するエフェクトです。モバイル向けのゲームを作る場合、容量を減らす事が大切になりますので、グレースケールのテクスチャを用意して色変更をする際に使い回すことがよくあります。Unity標準機能のAlphaBlendシェーダーを使い色を変更すると、テクスチャの白色部分を変更することはできるものの、黒色部分は黒のままなので使いにくいと感じる場面もあるのではないでしょうか。この仕組をShaderGraphで再現したものがこちらとなります。テクスチャのカラー(今回は赤チャンネルのみ)をLerpノードの「T」の部分に接続し、黒側の入力値をLerpノードの「A」に、白側の入力値をLerpノードの「B」に接続します。Lerpノードの「Out」をMasterの「Color」へ接続すれば完成です。作成したシェーダーをマテリアルにアサインするとこのように指定した2色で置き換えることができます。※今回は簡単に作る為、テクスチャの赤チャンネルのみを使用していますので、カラー画像を使った時に正しい輝度値が使われる訳では有りませんが、グレースケールのテクスチャを使う場合はここまで簡略化しても問題ないかと思います。トライトーン(Tritone)色合いエフェクトと似ていますが、画像の各ピクセルの輝度値を見て黒・白・中間の色を指定した3色で補完をするエフェクトです。色合いエフェクトと違い、中間色を指定することも出来ます。この仕組をShaderGraphで再現したものがこちらとなります。基本は色合いエフェクトと似ているのですが、黒側の色と中間の色、白側の色と中間の色、この2つをまずLerpノードで計算して、この2つと輝度値を再度Lerpノードで計算することで再現をすることが出来ます。※今回も簡単に作る為、テクスチャの赤チャンネルのみを使用しています。作成したシェーダーをマテリアルにアサインするとこのように3色で補完をすることが出来ます。レベル(Levels)Photoshopのレベル補正と同じようなエフェクトで、画像のレベル範囲をガンマ値で決めた値に補正するエフェクトです。暗くしたり明るくするのではなく、暗い所や明るいところは保持したままコントラストを調整出来ます。ガンマ関数というのがあるみたいですが、難しいので今回は簡単に似たような表現ができるPowerノード(べき乗を計算するノード)を使った方法をご紹介します。テクスチャのカラーをPowerノードの「A」に接続し、数値(今回はVector1のスライダー)をPowerノードの「B」に接続します。Powerノードの「Out」をMasterの「Color」へ接続すれば完成です。作成したシェーダーをマテリアルにアサインしたものがこちらです。Levelsのスライダーを動かすと色を締めたりできます。色相/彩度(Hue/Saturation)画像の色相・彩度・明度を調整することができるエフェクトです。これを再現しようとするとRGBの画像をHSVに変換をする必要がありますが、ShaderGraphには便利なノードがありますので、今回はこちらを使って作っていきます。テクスチャのカラーをHueノードの「In」に接続し、0~360の範囲を指定したVector1のスライダーをHueノードの「Offset」に接続します。Effects等と同じように角度で調整ができます。Hueノードの「Out」をSaturationノードの「In」に接続し、スライダー設定したVector1をSatuationノードの「Saturation」に接続します。作成したシェーダーをマテリアルにアサインしたものがこちらです。Hue/Saturationの値を変えることで色相を変更したり彩度を変化させることが出来ます。White)カラー画像を白黒にする事ができるエフェクトです。単純に白黒にするだけなら、赤・緑・青それぞれのチャンネルを足して3で割れば白黒画像にする事ができますが、人間の目は赤・緑・青の見える感度が違うため、画像そのものの明度で白黒にすると違和感が生まれます。そのため、画像の輝度値を使って白黒に補正することで違和感の無いグレースケール画像を作ることが出来ます。細かい計算式は難しいので割愛しますが、赤・緑・青それぞれの値に特定の係数をかけて足すことでより自然なグレースケールを作ることが出来ます。赤・緑・青をそれぞれ足して3で割った例です。これでも白黒画像になりますが、カラーと比べた時に違和感が生まれるかと思います。こちらが赤に「0.299」、緑に「0.587」、青に「0.144」の係数をかけて足したものです。白黒画像になりますが自然な白黒画像になります。この計算式は内積を取る計算式に置き換える事ができますので、今回はDotProductノードという内積を取れるノードを使用してみます。0.144)をDotProductノードの「B」に接続します。DotProductノードの「Out」をMasterのColorに接続することで完成です。作成したシェーダーをマテリアルにアサインしたものがこちらです。違和感の少ないグレースケール画像になるかと思います。Effectsを使う上で非常に使用頻度が高いものかと思いますので、同じ様な機能を作ってみます。Photoshopのクリッピングマスクと似たような機能でマスク用の画像のアルファ値/輝度値を使ってマスクをすることが出来ます。Unityでマスク機能を使う場合コンポーネントを使用した方法等ありますが、シェーダーを使う方法もありますのでご紹介します。アルファ値/輝度値を使ったマスクの2種類がありますので、それぞれShaderGraphで作ってみます。アルファ値を使ったマスクまずはアルファ値を使ったマスクです。テクスチャのカラーとマスク用画像のアルファをMultiplyノード(乗算)に接続します。Multiplyノードの「Out」をMasterのAlphaに接続し、MasterのColorにテクスチャのカラーを接続すれば完成です。Effects同様マスク画像の反転ができるよう、反転ボタンも付けてみます。Minusノードに接続して反転させ、Branchノードに接続します。画像のようにデフォルトはFalseにつないでTrueの時に反転するようにします。作成したシェーダーをマテリアルにアサインしたものがこちらです。マスクテクスチャでくり抜かれているのが分かると思います。反転をするとマスクテクスチャの部分がくり抜かれます。輝度値を使ったマスク今回も簡単に作るために輝度値ではなくマスクテクスチャの赤チャンネルを使用していますが、大まかな組み方はアルファ値を使ったときと同じようになります。作成したシェーダーをマテリアルにアサインしたものがこちらです。マスク用のグレースケール画像でマスクされていることが分かります。Effectsの標準には無いかもしれませんが、映像や写真を使う人なら良く目にする色温度もShaderGraphには便利なノードがありましたのでご紹介します。Balanceノードにテクスチャのカラーと色温度・色かぶりの2つを決める値を設定すれば完成です。作成したシェーダーをマテリアルにアサインしたものがこちらです。Temperatureの値を大きくすると色温度が温かい色味へと変わっているのが分かるかと思います。Effectsで使っていたエフェクトでもっと使いたいものはありますが、まずは簡単に実装できそうな物をご紹介させて頂きました。やっていることは凄く簡単な事なのに意外と標準機能ではできなかった物が多いと思います。これをコードで書こうと思うとデザイナーの方には敷居が高いと思いますが、ShaderGraphの様なノードベースのエディタを使えば簡単に作ることが出来ます。色温度や色相/彩度等、ShaderGraphには使いやすいノードが予め用意されているので、様々な表現を簡単に作ることが出来ますが、実は結構高負荷な物もありますので、実際これらをモバイルで使えるかはエンジニアさんに確認が必要です。ShaderGraphで自動生成されたシェーダーは必要ない部分も多く含みますので、実際にゲームで使う際は最適化が必要になると思います。デザイナーこそシェーダーを触れるようになれれば表現の幅が広がると思いますので、まずは分かりやすいShaderGraphを触ってみてはいかがでしょうか。カテゴリ:Shader2019年12月17日エクスプレッションを使用した3Dテキストの作り方はじめにはじめまして。KLabで演出を担当している、まぎーたです。ゲーム内の新イベントなどのプロモーション映像制作を担当しています。Effectsを主に使用し、基本的には30秒以内の映像尺で日本語版の制作を行い、サービスを行っているすべての言語に翻訳され配信されています。今回は映像内に記述されるテロップを3Dで制作し、なおかつ簡単に他の言語にも簡易的に対応する手法をご紹介します。エクスプレッションを使用した3Dテキストの作り方プロモーション映像にテロップ演出はつきものです。視聴者に伝えたい情報を目を引く形で記載する必要があります。フォント選びでしたり、炎や雷などの演出を加えるなど、やりかたは様々です。私の担当しているプロモーション映像は様々な国で翻訳、配信がされる前提のもので短い期間で他言語版へのローカライズ制作が可能なテロップデザインが求められます。Effectsのエクスプレッション機能を用いた、3Dテキストの作り方をご紹介します。Effectsの基本機能だけで実現でき、サードパーティプラグインに頼らない点です。1.テキストを用意するまずは記載したい文章を用意します。テキストレイヤーでも、Photoshopでpngの画像として制作しても大丈夫です。ゴージャス感を出すために金色で。2.テキストを用意する1テキストを作業コンポジションに配置し、プリコンポーズしてコピーします。コピー元の名前は【全言語対応の3D文字を作ろう!】とし、コピー先とコピー元を分かりやすく【_メイン】【_コピー】とレイヤー名をリネームしました。2ヌルオブジェクトを作成し、名前を【control】とします。このレイヤーで3Dテキストの管理を行います。3それぞれのレイヤーの【3Dレイヤー】【モーションブラー】スイッチをオンにします。名前を【遠近】にリネームし、数値はとりあえず2としておきます。2【control】レイヤーに、エフェクト⇒エクスプレッション制御⇒カラー制御を適用します。色は今回黒系の暗い色に設定しました。【遠近】が3DテキストのZ軸のふくらみ【カラー制御】がふくらみ部分の色となります。・カラーのストップウォッチを【Alt+左クリック】しエクスプレッションを開く・以下のエクスプレッションを記載thisComp.layer("control").effect("カラー制御")("カラー")ピックウィップで【control】のeffect("カラー制御")("カラー")を参照しても大丈夫です。-1).transform.position[1];z=thisComp.layer(thisLayer,-1).transform.position[2]+thisComp.layer("control").effect("遠近")("スライダー");[x,y,z]上位のレイヤーより【遠近】のパラメータの数値の分だけテキストのZ軸が前後するという設定です5.レイヤーの親子付け設定テキストコンポジションをそれぞれcontrolに親ピックウィップします。6.コピーレイヤーを複製コピーレイヤーを更に複製することによりZ軸の膨らみを増やしていきます。今回は20回ほどコピーしましょう。分だけZ軸が膨らみます。7.【control】のパラメータを調整して角度や位置を変更これで【control】レイヤーの位置、角度のパラメータを調整することにより3D化したテキストを動かすことができます。簡単に他の言語のデータも制作が行えます。9.ここまで見てここまでの工程を見て、AfterEffectsの3Dレンダラー機能を使えば良いのでは・・・?と思った方も多いと思います。演出の内容や意図、作業環境によってはそれでも良いと思います。用途によって使い分けていきましょう。3Dで制限される機能10.使用例アニメーションやエフェクトを加筆した使用例です。言語の切り替えは、コンポジションの中のテキストを入れ替えるだけでOKです。おわりに今回はサードパーティプラグインを使用しない3Dテキストについて解説しました。同様の工程を行えば、テロップ演出だけにとどまらず、ロゴアニメーションなどにも応用していけます。映像制作における演出の、お役にたてましたら幸いです。今後も機会があればAfterEffectsの小ネタのような物を紹介できたらと思います。最後までご覧いただき、ありがとうございました。16日目の記事になります。こんにちは、KLabで3D演出制作全般の業務を担当している、やまパンです。今回は、昨年書いた「セルルック調の3D雷エフェクトの作り方~素材編~」の続きとなる、アニメーション編について解説します。こちらは前回の素材をアニメーションさせて作成した「落雷のエフェクト」です。このエフェクトの作成方法について順を追って解説していきます。雷の素材をUnityにインポート前回記事にて作成した雷の各素材をUnityにインポートします。インポートする素材は2点のみです。・雷のテクスチャ・雷のモデル(fbx)ここでのアセットの名前はテクスチャを「tex_thunder.png」、モデルを「mdl_thunder.fbx」と命名します。エフェクト制作前のデータ準備さて、素材のインポートが終わったら次にそれらの素材をScene上に配置するためのデータの作成を行います。データのアセット類は以下になります。・prefab・マテリアル・AnimationClip・AnimatonControllerこれらのアセットを作成・準備までの手順を以下に記載します。雷のテクスチャをモデルに張り付けるためのマテリアルを作成します。雷の質感もこのマテリアルにアサインするShaderで確定します。ここではAdditiveを使用し、雷の質感を加算に設定しましょう。2.prefabの作成エフェクトデータの元となるGameObject(Prefab)を作成します。Prefabの構造は以下です。・FX_thunder.prefab(親Prefab)∟root(Animationコンポーネント用)∟mdl_thunder(雷のモデル)※ここにマテリアルをアサインする上記で作成したマテリアルはこの「mdl_thunder」モデルにアサインしておきましょう。3.Animationアセットデータの作成prefabに対してアニメーションを作成するための空のタイムライン(AnimationClip・AnimationController)を作成します。ここでのアセット名前はAnimationClipを「ani_thunder」、AnimationControllerを「cnt_thunder」と命名します。・AnimationClip・・・アニメーションのキーフレームを制御する・AnimationController・・・AnimationClip含めアニメーションの設定を制御するといった用途の分類になります。次に、Animationアセットデータの設定を行います。作成したAnimationClipをAnimationController内に格納して設定をして下さい。「cnt_thunder」のアセットをダブルクリップすると「Animator」というウィンドウが出てきます。その中に作成した「ani_thunder」をドラッグして入れて下さい。すると以下の図の形が表示されます。ここまででAnimationアセットの作成と設定が完了となります。上記で準備したAnimationアセットデータをPrefab側にアタッチし、実際にアニメーションを行うための設定します。アニメーションを作成する際の親となるprefabを指定します。ここでは「root」オブジェクトを親とします。「root」オブジェクトを選択し、InspectorからAddComponentのボタンをクリックします。これは対象のPrefabに対し、データを作成する上での様々な設定を行うためのコンポーネントを指定するためのものです。今回は「root」オブジェクトに対してアニメーション付けを行いたいため、「Animator」コンポーネントを設定します。「Animator」コンポーネントを設定後、Controllerの項目に先ほど上記で作成した「cnt_thunder」をアタッチします。以上でアニメーション作成前のデータ準備が完了となります。雷のアニメーションをつけるアニメーションを作成するためのデータ準備が整いました。実際に雷のアニメーション付けを行っていきます。その前に、一度ここで実際に落雷の現象が起きた時の雷の見た目をイメージしてみてください。落雷はとても瞬間的で、瞬く間に光って消えてしまいますよね。エフェクトを作成する際もその原理は同じで、より自然現象に近い形のアニメーションを作成することで説得力が生まれてきます。いえ雷を実際にゲームエフェクトとしてアニメーションの作成をする場合、プレイしているユーザーが認識できる記号としてデフォルメされた見た目や動きにアレンジする必要があります。エフェクトを見る人が分かりやすく、かつより自然な印象に見せるためにどのようなアニメーションを作成するか意識することが大切になってきます。・フレームレート:30fps・尺:10~15fの尺間でアニメーション付けを行いましょう。テクスチャのUVスクロールでアニメーションを作成する前回記事で作成したシームレスループ用のテクスチャに対し、「mdl_thunder」モデルのUVのY座標を動かします。すると、UV制御のみでテクスチャの見た目に変化を入れることが出来ます。その際に心がける点として、実際の落雷と同じようにパパッと短い尺で雷のシルエットが切り替わっていく見た目になるようなアニメーションを意識して制作すると、より自然な雷の見た目に近づきます。※分かりやすいようにMayaのUVエディタで説明した図です※この動きを、実際にUnityのアニメーションに落とし込んでいきます。propety」のボタンを選択します。これはPrefab内のどのオブジェクトに対し、何の種別のアニメーションを制御するのか項目を選択するものになります。出てきた項目の中から、「mdl_thunder」以下の「Material._Main_Tex_ST」を選んでください。この項目がUVスクロールをアニメーション制御するためのものになります。すると、以下の形でUVスクロールの項目が現れます。「Material._Main_Tex_ST.z」と「Material._Main_Tex_ST.w」がスクロール制御になります。「Material._Main_Tex_ST.z」の項目に対してキーフレームを入れていきます。このように、15f間でランダムにキーを入れていきます。上記画像はキーの遷移をグラフで表示したものです。Y軸方向に動くUVスクロールのキーの補完を「Constant」に設定することで、テクスチャのみで雷のパチパチ感を表現することが出来ます。(逆に、キーの補完を「Linear」に設定するとシームレスな動きになってしまいます)「Constant」の補完設定でキーを入れた際の実際の動きが以下です。UVスクロールアニメーションのみで雷のパチパチ感が出ていることが分かります。スケールのアニメーションを付け加える次に、より雷の動きを自然に近づけるためにスケールのアニメーションを追加します。アニメーションの内容は左右の反転です。UVスクロールのアニメーション時と同じ形の要領で、モデルの左右を反転させるアニメーションを追加することでよりランダムな見た目に近づけることが出来ます。propety」のボタンを選択します。出てきた項目の中から、「mdl_thunder」以下の「Scale」を選んでください。アニメーション制御するためのものになります。すると、以下の形でスケールの項目が現れます。上から、X軸・Y軸・Z軸に対してアニメーション制御を入れる項目になります。今回の雷ではカメラからの見た目を考慮し、Z軸に対して反転のスケールアニメーションを入れて行きます。今回の雷ではUVのY座標のみスクロールアニメーションを入れるため「Material._Main_Tex_ST.z」の項目に対してキーフレームを入れていきます。UVスクロールアニメーションの時と同じように、15f間でランダムにキーを入れていきます。上記画像はキーの遷移をグラフで表示したものです。Z軸のスケールにマイナス値のキーをいれることで、モデルのスケールを反転します。スケールアニメーションも同じくキーの補完を「Constant」に設定することで、スケールの切り替えを瞬間的に表現します。UVスクロール+スケールのアニメーションを融合した際の実際の動きが以下です。UVスクロールとスケールのアニメーションを組み合わせることで、雷らしい動きに近づいてきたと思います。ここからさらにアレンジとして、雷が落ちる瞬間のインパクトを追加します。雷の「落雷の瞬間が一番大きく輝く」というイメージをスケールアニメーションで表現します。落ちる瞬間のスケールを大きく表示させることで、エフェクトにインパクトと余韻が追加されました。おまけ落雷のエフェクトに対し、その他の要素のエフェクトを追加してみます。落雷した瞬間のパーティクルと点滅する光を地面に設置したことで、より落雷のエフェクトに説得力が生まれました。まとめいかがでしたでしょうか!ここで一度前回の記事のおさらいの意味もこめて、雷のエフェクトを作成する上でのまとめを記載します。・アニメーショングラフを【Constant】にすることで雷のパチパチ感を表現する※落雷の瞬間のインパクト、その後の余韻を意識しながら作成する「セルルック調の3D雷エフェクトの作り方」シリーズは今回の記事にて完結となります。はじめまして、こんにちは。クリエイティブ部のはちみつと申します。唐突ですが、KLabが提供しているゲームタイトルには日本語で制作されている国内向けのもの以外にも、英語やフランス語ドイツ語など多数の言語で制作された海外向けのものが存在します。言語によってさまざまな特徴があるため、制作にあたって調査を行う場合があるのですが、筆者のはちみつは本年、タイならびにタイ語に関して調べる機会がありましたので、今回はタイ語についてご紹介いたします。タイ語ってどういう言語?タイ語は、タイやカンボジアなどで約2,600万人が使用している言語で、シャム文字(タイ文字)を使用して表記されます。文字を読む方向は日本語と同じく左から右であり、基本的に文字と文字の間にはスペースが入りません。口語の文章においては男性語尾と女性語尾が存在します。カー」というタイ語を耳にしたことはないでしょうか?この「サワディー」から始まる2種類の言葉、どちらも「こんにちは」という意味なのですが前者を使用するのは男性、後者を使用するのは女性と使い分けされているのです。タイ文字(シャム文字)って?タイ文字は、44種類(内2文字廃字)の子音字に9音の母音、5種類の声調を表す符号を組み合わせて使用されます。種類数の合計は約80種類なので、各文字、符号の形のみであれば日本語よりはるかに少ないのですが、文字と符号を組み合わせて発音、声調を表現することを考えると......1音を表現するにあたっての組み合わせの数がどのくらいになるか、なんとなくお察しいただけるのではでしょうか。実際にどのような形で組み合わせていくかについては、当然ですがしっかりと決まりがあり、子音字を中心にして前後左右に母音符号、右上に声調符号が配置され1音が表現されます。子音字に母音符号や声調符号が付加されるわけではなく、発音、声調に合わせて付加されます。母音符号の中には子音字とまったく同じ形のものもあります。タイ文字のフォント一般的に、タイの文字として思い浮かべる形状は、これまで本記事内にも登場しているクルクルした○がついているものだと思いますが、実はタイ文字のフォントは大きく分けて2種類あります。フォント・ミー・ファ(セリフ)上品、落ち着きのある印象。新聞や説明資料、雑誌など読ませるための長い文章の際に多く使用され、フォントの印象から、ファンタジー物の表現に適しています。フォント・マイミー・ファ(サンセリフ)ポップ、活気がある印象。広告、ポスターデザイン、ヘッドラインなどの短い文章の際に多く使用され、フォントの印象からスポーツ物の表現に適しています。フォント・マイミー・ファの文字を見た際に「英語のアルファベットみたいな文字があるな」と思われた方もいらっしゃるのではないでしょうか。この「英語のアルファベットに形状が似ている文字」を1文字だけでデザインなどに使用した場合、タイ文字として認識されない可能性が高くなります。タイ文字はフォントによっても文字の形状が大きく異なるうえに、元の形状が類似している文字が多数存在します。デザイン等にタイ文字を使用する際に、文字の形状に手を加える場合は十分注意が必要です。タイ文字を使ってみる!ここまでにタイ語(タイ文字)の基本をざっくりとご紹介させていただきましたが、実際に「タイ語を使って何か作ってみたいな」と思われた方が、もしかするといらっしゃるかもしれないので、フォントとadobe製品での設定方法についてもご紹介しておきます。オーソドックスなミー・ファ、マイミー・ファをはじめ、手書き風のものや丸っこいものなど合わせて26フォント存在します。Fonts:https://fonts.google.com/?subset=thai※実際に使用する際は、フォントの利用規約を必ずご確認ください。下記の設定をすることで、きれいにタイ文字の表示がされるかと思います。※設定をしないままタイ文字を使用すると、付加記号の位置が崩れてしまう可能性があります。※ご使用になるバージョンによって設定箇所が異なる場合があります。さいごにいかがでしたでしょうか?文字を読む方向や、文章にスペースが入らない...など日本語と共通する点もありますが、やはり多くの方はなじみのない言語かと思います。なじみがないからこそ、扱う際には細心の注意が必要となり、扱うための調査が必要になります。言語だけでなくその言語を使用する国の文化や習慣などを知ることで、その国に適した表現が見つかるかもしれませんし、知ってから目にする場合と知らないで目にする場合では、違った見え方をするかもしれません。ことタイ語に関してのみで言ってしまうと、日常生活の中で触れる機会は少ないかもしれませんが、本記事をきっかけに少しでもタイ語について興味を持っていただけたら幸いです!ここまでお読みいただきありがとうございました。14日目の記事になります。エフェクトデザイナーの丸Qです。Designerについて語っていきたいと思います。Designerはテクスチャ制作でお世話になるツールで、元々背景モデルで使用されている印象がありました。3Dエフェクトのテクスチャ制作等でも使用されており、実際私が所属している案件でも導入されております。Designer」を使用して簡単なエフェクト用テクスチャを制作してみようかと思います。Designerを使ってテクスチャを作る!」ことを目的に記事を書いておりますので、その点だけご了承ください。作ってみるテクスチャ今回は下画像のようなオーラや炎の表現で使用でき、かつ比較的簡単に作れるテクスチャを制作してみようかと思います。ちなみにこんな感じに使用出来たりします。ツールを起動して新規グラフを追加するまずはツールを起動してみます。すると下記のような画面になります。最初に新規グラフを作成してみましょう。下の画像のように操作を行ってみてください。Package」を選択すると「未保存のパッケージ」がエクスプローラに追加される。TEMPLATEに「Empty」を選んでOKをクリックする「新規グラフ」が追加されるノードとは?まずノードというのは下画像のようなものになります。ノードには様々なエフェクト効果があります。このノードを繋ぎ合わせていくことで最終的に欲しいテクスチャを出力していくのです。ベースとなるテクスチャの制作それでは早速やってみましょう。最初に「Shape」ノードをグラフエリアに追加して、基盤となる画像を作りましょう。ここでノードの追加には2通りあります。お好みの方法でノードを追加してみてくださいノード説明Shapeベースとなる形状を選択、入力できるノード円や四角など、様々な形状がある【その1】ライブラリエリアでノードを選択、追加する方法です。下記の画像の箇所でノードを検索、または選択して追加していくことが出来ます。【その2】もう一つの方法で、「Tab」キーを使用してノードを検索、選択する方法があります。下記の画像を参考に追加してみてください。画像のような画面が出ますので、そこの検索エリアに「shape」と入力して、目的のノード「Shape」を選択してください。【結果さて、これら二つの方法でグラフエリアに「Shape」ノードが追加してください。ノードのパラメータを変更してみる次に呼び出したノードのパラメータを調整みましょうパラメータエリアは下画像の赤いエリアになります。それでは先ほど呼び出した「Shape」ノードを選択してみてください。するとパラメータエリアに選択したノードのパラメータが出てくるかと思います。PARAMETERS」という項目がありますので、そこのパターンを「放物面」に変更してみてください。Random」ノードを追加して、先ほど作った画像をランダムにタイリングしていきましょう。Random」ノードを画像を参考にドラッグ&ドロップで線を接続してみてください。Random」ノードのパラメータを調整してみます。下画像の赤枠を参考にパラメータを調整してみてください。下記画像のような形になったかと思います。ベーステクスチャを完成させるさて、どんどんノードを呼び出して接続していきましょう。画像を参考に追加、接続してみてください。画像をボカす質感となるテクスチャの制作さて、次に質感となるノード群を制作してみます。画像を参考に、次の通りにノードを接続してみてください。ブラーの1つで、ボケを足しつつ歪みを入れることができる制作した2つのノードをブレンドして色味をつけるさて、今皆さんのグラフエリアには2つのノード群が出来ているかと思います。それらの結果同士をブレンドしてみましょう。Map」ノードを接続して画像のパラメータを参考に色味を付けてみてください。グレースケールのテクスチャに明度の高いところから低いところにかけて色を付けることが出来るこれにてテクスチャは完成になります!画像を出力してみるそれではこのテクスチャを出力してみましょう。Map」ノードと接続します。※「Tab」キーで出すウィンドウは日本語検索が出来ません。ライブラリエリアで検索するか、「Tab」キーでウィンドウを出した後、下の方にスクロールして「出力」ノードを選択してみてください。次に下画像のように選択してみてください。次に出力設定を選択します。今回は出力先だけ指定してテクスチャを出力してみましょう。Designerを使ってテクスチャを作る!」ことを目的に書いてみた形になります。このツールは上手く使うことで様々なテクスチャを作ることが可能です。Designerへのきっかけとなっていただけると幸いです。最後まで読んでいただきありがとうございました。13日目の記事になります。R&DグループのYojiと申します。現在クリエイティブR&Dグループでは、研究開発の一環としてハイエンドグラフィックの技術を如何にモバイル上で表現するか、PCやコンシューマからモバイルまでを対象に、ゲーム制作を如何にスケーラブルにおこなっていくか等を目的として、UnityHDRPを使用した高品質なグラフィック表現に取り組んでいます。検証はPBRをベースとして取り組んでいるのですが、PBRと言うとフォトリアルをイメージされる方も多いかと思います。弊社の開発するタイトルでは、比較的カトゥーン系のノンフォトリアルのグラフィックが多いのですが、カトゥーン系のグラフィックにおいてもPBRを用いる事で様々なメリットが得られると考え、PBRを検証のベースとしています。メリットの一つに、物理的に正しい値を用いる事での一定のルール化があります。値を共通のルールにする事で、個々のアーティストの技量に委ねる部分が減り、誰でも一定以上のクオリティで制作をおこなう事ができ、大人数でおこなう3Dゲーム制作においては非常に大きなメリットになってきます。比較的簡単にクオリティが出せるので、絵作りやデザイン等のよりクリエイティブな部分に時間を使う事ができるようになりますし、制作のアプローチが物理的に正しいかどうかといった判断基準もより明確になるので、何かおかしい?クオリティが上がらないけど何故?どうすればいい?といった原因の突き止めや対策もおこないやすくなります。HDRPの使用方法や簡単な用語解説等も交えつつ、実際にハイエンドグラフィックのシーン、ライティング制作のアプローチを紹介していきたいと思います。Litの使用を前提としています。3DアセットやShaderは制作済みの状態から説明をしていますので、アセットが無い場合はUnityのサンプルアセットを使用されてもよいと思います。「作例1」今回はこちらのシーンを作例として紹介を行っていきます。レンダーパイプライン:アーティストのためのクイックスタートガイド」という記事を参考にさせていただきました。Assetが作成されていて、Sceneが空の状態から説明をしていきます。順を追って説明していけるように、初期状態のアセットも一旦全部削除して3Dアセットを配置した状態から開始していきますので、始める前に3Dのアセット以外は削除しておいてください。SceneSettingの作成まず始めに、空や影等の環境設定をおこなうSceneSettingのAssetを作成します。こちらが今回主に使用するアセットになります。Profileも作成されますので、InspectorのProfileを選択して分かり易いように名前を付けておきましょう。Assetを割当てておきます。Assetで、二重に効果が掛かる事があるためです。前準備が整いましたので、実際にシーンのライティングを初めていきましょう。その前に事前の知識としてライティング成分の分解について簡単に説明しておきます。実際の物理空間では光が物体に鏡面反射する現象も、拡散反射する現象も全て同じ光源からの反射現象ですが、RealtimeのCG空間では鏡面反射と拡散反射の現象を、それぞれ別のライティングソリューションを用いて表現する事が多いです。UnityHDRP環境でも複数のライティングソリューションが提供されていますが、どの表現にどのソリューションを用いるか分かり易く整理するため、静的オブジェクト・動的オブジェクトとそれぞれの反射成分に分けてまとめてみました。一例なので参考までに。表面で鏡面方向に反射し、目に届く光成分。物体の色成分は持たない。※金属の場合は反射の際に電磁波の影響を受け色成分を持ちます。表面や内部で複雑に反射した光が目に届く成分。反射する際に一部の波長が吸光され物体の色が視認できるようになります。表面で鏡面方向に反射し、目に届く光成分。物体の色成分は持たない。※金属の場合は反射の際に電磁波の影響を受け色成分を持ちます。表面や内部で複雑に反射した光が目に届く成分。反射する際に一部の波長が吸光され物体の色が視認できるようになります。HDRPではハイダイナミックレンジ(HDR)でデータが扱われていますので、シーンではEXPOSUREのコントロールが必須の要素になります。ハイダイナミックレンジ(HDR)とは、現実の世界と同じようにとても幅の広い輝度情報をもっているイメージの事で、通常のモニターや端末で見る画像はスタンダートダイナミックレンジ(SDR)とよばれ、8bitの情報でしか表現できませんが、ハイダイナミックレンジ(HDR)は32bitもの情報を持っています。現実世界の光も、とても大きな幅を持っていて、人間の眼は無意識化に瞳孔を調整し入ってくる光の量にコントロールして最適な見え方を保っています。暗い所から急に明るい所にでると眩しいと感じる現象も、入ってくる光の量に瞳孔の調整が間に合ってない事からおこります。(時間とともに瞳孔が締まり、次第になれてくるはず)CGでも、現実に近い光学現象を再現し説得力のある絵作りを行うため、多くの階調が持てるHDRの画像データで表現する事が取り入れられてきました。データの取り扱いはHDR空間で行われますが、最終的な表示先であるモバイル端末やテレビはLDR空間である事がほとんどですので、HDR空間の光の量をLDR空間の光の量にあてはめて表示する必要があります。最適な光の量にコントロールする機能がExposure機能になります。HDR空間でのシーン作成では、始めにExposureの設定を必ずおこないます。OverrideからExposureを作成します。メニューの一番上に項目があると思います。それほど重要という事ですね。ModeはEV値(Exposureの値の略)が固定か動的に変化するかを選べます。動的では実際のカメラのように画面の情報を取得し自動で最適なEV値に調整できます。今回は狙った絵作りができるようFixedで設定していきます。明るめの室内のイメージにしたいので、EV値はひとまず「10」に設定します。この段階では画面は真っ暗です。以下の表はEV値の目安の一例です。次に、空の設定と空からの環境光の設定をおこないます。Skyと、固定のHDRの画像データで表現する手法等があります。今回は設定が比較的簡単なHDRIを使用した空を作成したいと思います。作りたいシーンにあったHDR画像をUnityProjectの適切なAsset管理場所に保存しておきましょう。画像はデフォルトでは2Dとして扱われているので、HDRIとして扱えるようにInspectorからTextureShapeをCubeに切り替えます。Skyに切り替えます。Skyは削除しておきましょう。Skyの機能を追加します。Skyの項目に紐づけます。SkyのEXPOSUREを設定します。先ほどシーンのExposureを設定したEV値と同じ「EV:10」に設定しました。HDRI撮影時の環境下の適正露出が分かっていれば適正露出に設定するのがいいと思いますが、分からない場合は環境の数字を目安に設定しておきます。真っ暗だったシーンに空のイメージが表示され、シーンに配置されている静的オブジェクトに対して空からの鏡面反射成分が情報として加わりました。本来、色の要素を持つはずの拡散反射成分がないため、全体的にグレーの見た目になっていると思います。空からの環境光が拡散反射成分に影響するよう設定していきます。このシーンでは背景は静的オブジェクトとして、ライティングの設定を進めていきます。空からの拡散反射光表現にはBakeを使用します。アセットがStaticになっている事を確認します。Settingを開きます。Environment(HDRP)のProfileに、先ほどリネームしたSettingProfileを設定します。SkyにHDRISkyを設定しましょう。Bakeのパラメータを設定していきましょう。IlluminationI:ONLightingMode:ShadowMask(遮蔽をベイクします。)Lightmapper:ProgressiveGPUを使用します。ProgressiveCPUと比べ高速です。各Samplesの値は速度と品質に影響するので、PC環境とイテレーション回数に合わせて調整します。最初はイテレーション多く確認していくので適度に低い値で大丈夫です。Sampleはノイズ軽減のためONにしておきます。Lightmapsize:大きいと品質が上がりますが計算時間が増加します。Lightingでベイクすると静的オブジェクトにも空の環境光が反映され物体の色が見えてきました。それぞれの成分に空からの環境光が反映された状態となりました。環境光が設定できましたので、次に太陽からの直接光の反射表現を設定していきます。太陽光となるDirectionalLightを作成します。DirectionalLightは太陽光を想定して「Intensity」の単位はLuxを使用します。Luxは面積に対して照らされた照度で、簡単に言うとその場所の明るさの単位です。太陽光のような広範囲の場所に対して全体的に照らすライトには、分かり易いLuxを用います。傾いた午前の太陽光を想定して65000LUXの値に設定します。色温度も設定できますので、正午の太陽光の5000K近辺に設定します。4000K設定した画面は眩しいくらい真っ白になってると思います。太陽光が壁などによって遮蔽されずに突き抜けているので、太陽光の影を設定していきましょう。ShadowのEnableをONに設定。解像度は高い方が品質が上がりますが、リソースと処理負荷を消費します。ここでは、Resolutionを「2048」に設定しました。VolumeのCasscadeShadowの設定と合わせて品質を調整しますが、こちらは後の項に記載します。Softnessの設定で影のエッジがくっきりした影か、ぼやっとした影か設定が出来ます。今回は太陽光なのでハッキリとした影に少しボカしをいれて0.04で設定しました。環境と好みに応じて調整しましょう。Resolutionの上限値等の設定はHDRenderPiplineAssetに設定があるので、デフォルトで設定されている上限以上を使用したい場合はこちらを変更します。VolumeのCasscadeShadowの設定で調整します。AddOverrideからShadowsを作成します。CountはShadowマップが持つ枚数の事で数が多い方が、よりシーン内の影の解像度が高くなり距離に合わせて細かなコントロールが可能になります。数が多いとよりメモリ容量を圧迫します。Splitは、各ShadowMapの使用する範囲を設定します。数値はそれぞれのSplitの適用距離となっていて数値を下げると手前から適用される範囲が狭まり解像度は上がっていきますが、奥の解像度が荒くなっていきます。狭い部屋や広い屋外等のシーンの状況によって調整が必要です。今回は狭い部屋なので、複数枚のShadowMapを狭い範囲に適用し解像度を上げる方向に調整しました。極端な設定なので少し広いと奥の解像度が極端に下がり破綻してきます。CasscadeShadowは古くからある手法なので、調べれば情報も沢山でてきます。実際に設定を変更し色々試してみてください。ともに表現されましたが、まだまだ情報が足りません。光があたり、物体に反射した光の表現が入っていないので、とても単調で暗いシーンになっています。Illuminationの効果を加えていきましょう。Illuminationとは、物体に跳ね返った光が相互反射し伝播していくことを表現するレンダリング手法で、省略してをGIと呼ばれる事もあります。SettingでLightmapを再度Bakeします。Bake後、反射光が反映され画面全体が明るくなり、グッと良い絵になったかと思います。画像の壁部分に、ほんのりと床からの黄色い反射色がのっているのが見えると思います。太陽光が床に跳ね返る時に床の反射能によって、光の波長が吸収され壁を照らした結果です。このような反射表現をカラーブリーディングと呼びます。床の色が青であれば青が反射し、赤であれば赤が反射し、白い壁の色に影響を与えます。Illuminationが反映され少しまともな見た目となりましたが、まだまだ不自然な部分が残っています。上図の床面部分では鏡面反射成分の遮蔽がされていないので、空の光が壁を貫通しそのまま映り込んでしまっている事が原因で、とても不自然に見えてしまっています。拡散反射成分の反射光をLightmapで表現したように、鏡面反射成分の反射光(鏡等の映り込みなども同じ現象)も表現する必要があるので、鏡面反射成分に反射光が入るよう設定していきます。鏡面反射成分の反射光を表現する手法としてReflectionProbeという機能があります。指定の位置から全方位撮影した画像を作成し、それを参照する事で鏡面反射を疑似的に近似します。HierarchyからLight>ReflectionProbeを作成します。今回は動的なオブジェクトがないので、TypeはBakeを選択します。ReflectionProbeがオブジェクトに影響を与える範囲を設定します。範囲形状はBOXとSphereの2つから選択します。ここでは部屋に対して範囲は設定し易いBOXを選択して部屋を囲みました。球の位置からReflectionProbeに使用する画像が撮影されるので、適当な位置に調整します。位置を決めたら影響範囲を再度確認してBakeします。Bakeが成功すると球に撮影された画像が適用されます。シーン内のアセットの鏡面反射成分に対し、環境光と遮蔽が反映されたと思います。ReflectionProbeを設定し遮蔽ができましたが、カメラを動かしたりすると反射している画像が滑るようにズレて不自然な反射になる部分が出てくると思います。下図のように、壁があるのに床面には外の空が映り込んでる状態でとても不自然に見えます。次はこちらの対策を進めていきます。Probeは、設定された範囲のオブジェクトに対して、指定方向から平面的に撮影された画像を鏡面反射用のマップとして使用する機能で、局所的に反射の精度が上がり自然な鏡面反射に近づきます。Realtimeのみの対応です。平面の一方向のみの撮影なので、水面や地面、壁などの面に対して有効です。実際に設定していきます。ReflectionProbeを作成します。Inspectorで反映したい部分を囲むように調整します。今回は床面に適用したいので床を囲むように設定しました。ModeとValueの値で画像を描画する範囲を設定し、適切な見た目に調整します。コントロールがし易いFixedに設定しました。設定しても、モデルデータの構造によっては画像のように空の光が漏れだしてるケースもあるかと思います。MaterialのNormalmapの法線方向を参照したり、精度の問題で空が映る事もあるので、今回は空のデータを取得しないように設定しました。これで、一通りの光の要素が入りました。ライトの追加さらにシーンに説得力を持たせるため、ライトを少し追加していきたいと思います。先ほど、床の鏡面反射に漏れだした空からの光を対処する為に、空の鏡面反射成分を取り除きましたので、それをエリアライトで補います。Lightを作成します。窓の外側に配置します。窓枠に近すぎると影がハッキリと落ちてしまい、狙った効果が得られないので少し離して配置します。Shapeの項目でArealightの大きさを調整します。空色に近い色を設定し、Intensityは一般的な青空の値の15000ルーメンを設定しました。Coneも調整し意図していない光の漏れがないように設定します。Arealightを入れる事で、空からの光が足されて説得力が少し上がっているかと思います。次にPostprocessingの設定を行っていきます。Postprocessinとは、文字通りレンダリング画面に対して後処理を加える事で、略してポスプロとも呼ばれています。PBR環境ではポスプロの設定でLookが決まるとても重要な工程です。それぞれのアーティストの個性やセンスがでる部分でもあります。それでは、ポスプロの設定を進めていきましょう。Occlusionの追加Lightmapで間接光のシャドウがある程度表現されていますが、オブジェクト同士が隣接している場所や、接地している部分で明るく不自然に見えている箇所もあると思います。間接光の遮蔽が正確に計算されていない事が原因です。Occlusionがよく用いられます。Occlusionを使用してみます。Occlusionを作成します。パラメータを調整します。Intensity等でOcclusionの強さや影響範囲を調整していきます。入れすぎると不自然に濃い絵になるのでほどほどにしましょう。今回はIntensity:0.7と、Radiusを0.75にして影響範囲をさげました。ソファの背もたれと座面の合わせ目や、壁との設置部分にOcclusionが落ちている事が確認出来ると思います。Tonemappingの追加HDRのシーンの放射輝度を最終出力先である、8bitSDRの0〜1の範囲に階調再現を行う機能です。ハイダイナミックレンジの世界を、知覚的に再現するためTonemapping機能を使用します。SkyandFogVolumeのInspectorを開きAddOverrideからTonemappingを作成します。TonemappingのModeにチェックをいれ、「Neutral」を選択しました。TonemappingのModeにACESという設定もあります。これは、映画業界の色空間規格のACESを近似したマッピングを行います。コントラストが強いLookになるので、絵作りのコンセプトに合わせ使用します。白飛びしていた部分が軽減されているかと思います。光が溢れた表現を加える機能です。空気感も出るので特に理由がない限り使用をお薦めします。OverrideからBloomを作成しますIntensityを上げると効果が見えてきます。パラメータを調整しビジュアルのコンセプトに合わせ好みの効果を得ましょう。ShadowはNormalmapの凹凸に対して、光源からの方向性を持った影を加えます。細かい効果ですが、ディティールが加わりより詳細な表現となりますので、そのシーンでの必要性に応じて使用を検討されるのがいいと思います。OverrideからShadow>MicroShadowを作成します。EnableをONにしてOpacityでMicroShadowの透明度を調整します。今回はOpacityを「0.7」に設定しました。他にもカラーグレーディングの機能が豊富に用意されています。これらの使用方法は、また次回機会がありましたら紹介していきたいと思います。カラーグレーディングは最終的な絵作りを決定づけるパートなので、時間をかけて説明しないといけませんし。一通りの設定が完了しました。これまで設定した各項目を再度調整し全体の絵作りをおこないます。最後のこの工程で、クオリティも変わってきますので時間をかけて調整しましょう。ここが一番面白い工程ですね。調整し、最終的に下図のLookに仕上げました。画像は静止画ですが、全てUnity上でリアルタイムで表現されています。ExposureやHDRIやライティングを変更し夜のシーンも作成してみました。昼から夜へのシーンの変更自体は簡単に行えるので、クリエイティブ面に沢山の時間を費やせますね。HDRP上で完結しています。Fieldをいれたケースです。別カット最後に最後にPBR環境でLookを作っていく上でのポイントを少しまとめて記載したいと思います。現実の環境のように光量が溢れるハイダイナミックレンジの世界では、EVと照度を管理し絵作りをおこなっていく事がとても大事になります。これには制作工程上の大きなメリットもあり、非PBRのアドホックな制作アプローチと違って、絵作りの仕組みを理解し制作する事で、比較的簡単に高品質な結果を得る事ができます。昼間・夕方・夜といった時間帯の違うシーン、晴れ・曇り・雨といった天気の違うシーン等への変更も、効率よく制作する事が出来ます。今回のような制作アプローチは、コンシューマゲームに限らず、現在のモバイルゲームにおいても応用出来る有効な制作アプローチであると考えています。PBR環境でのLook制作は、CGの基礎的な知識の他、カメラやレンズの知識であったり、光学の知識であったり、ライティングの知識であったりと幅広い分野の知識が求められ、それぞれの分野がとても深くどこまで追求しても飽きがこない非常に面白い世界だと思います。興味を持った分野を少しずつ堀り進め、知識を蓄え理解を深めていきたいと思います。この記事を読まれ、興味を持った方は是非実践してみてください。ライブドアブログ前ページ次ページトップ。