はじめに

この記事は 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で再現したものがこちらとなります。

テクスチャのカラー（今回は赤チャンネルのみ）を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」に接続します。HueノードのRangeはDegreesにすることでAfter Effects等と同じように角度で調整ができます。
Hueノードの「Out」をSaturationノードの「In」に接続し、スライダー設定したVector1をSatuationノードの「Saturation」に接続します。

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

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

白黒（Black & White）

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

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

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

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

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

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

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

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

トラックマット（Track Matte）

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

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

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

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

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

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

輝度値を使ったマスク

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

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

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

色温度（Color Temperature）

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

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

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

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

まとめ

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