はじめに

こんにちは。テクニカルアーティストグループのfo-taです。

今回は一昨年の記事と同様に、 BLEACH Brave Souls（以下：ブレソル） で作成したシェーダを紹介させて頂きます。

ブレソルは、株式会社ぴえろが大人気コミックをアニメ化した作品 「BLEACH」を題材とした、爽快3Dアクションゲームです。

概要

『小説CFYOWコラボガチャ―Uncovered Truths：希―』に登場した産絹彦禰の必殺技「已己巳己巴・鳳落八景」の演出に、ちょっと不思議なシェーダを作成しました。

【ガチャ予告】『小説CFYOWコラボガチャ―Uncovered Truths：希―』に登場の★5【産絹彦禰】を紹介！「已己巳己巴・鳳落八景」に注目！(※この画面は現在開発中のものになります。尚、動画は★6育成済みの状態です。) https://t.co/MVC0Q9hs1c #ブレソル #ブレソル5周年

— BLEACH Brave Souls公式 (@Bleach_BS) August 30, 2020

キャラクター 3D モデルの手前に主線だけ浮き上がらせるような表現をシェーダで実現しています。

無理やりな手法なので参考になるかはわかりませんが、どのようにやっているのかをご紹介します。

経緯

産絹彦禰の必殺技の作成にあたり、「今までのキャラクターに無いような恐ろしさを表現したい」「ただエフェクトを載せるのではなく、キャラクター本体が歪むような揺らぐような表現がしたい」と必殺技制作チームから相談を頂きました。

歪みや揺らぎと言うと、ポストエフェクトで画面効果を付けるアプローチを思い浮かべますが、推奨端末のスペックの関係上そのようなリッチな手法はとれません。

そこで、通常の頂点＆フラグメントシェーダでなんとかそれっぽく再現できないか、とチャレンジすることとなりました。

要素分解

ここからはシンプルなモデルで説明していきます。

この表現は2つのマテリアルを使用しており、主線と本体でそれぞれ以下の要素で構成されています。

• 主線

  • アウトライン

  • テクスチャ

  • 揺れ

• 本体

  • ハッチング

  • 頂点毎の揺れ（波打つ）

主線

外側のアウトラインは一般的な面押し出し＆反転です。ただし、アウトラインの線以外を塗りつぶしたくないので、ステンシルを利用して抜いています。

内側の線は、元のカラーテクスチャを編集した専用テクスチャを利用しています。

当然ですが、専用テクスチャなので自由に線や塗りを追加、削除できます。

産絹彦禰の目、眉、顔の模様などは専用テクスチャに輪郭線を書くことで実現しています。

モデルは頂点シェーダで周期的に揺らしています。

動きの周波数は Unity のビルトインシェーダに含まれる TerrainEngine.cginc を参考にさせて頂きました。

// 1.975, 0.793, 0.375, 0.193 are good frequencie
float4(1.975, 0.793, 0.375, 0.193);

また、主線要素の拡大やオフセットができるようになっています。

オフセットは画面座標系で行うので、モデルやカメラが回転しても変わりません。

本体

ハッチングはテクスチャシートアニメーションの要領で、タイリングしたハッチングパターンを時間で切り替えてアニメーションしています。

ComputeScreenPos を利用して画面座標を UV にテクスチャを適用します。

float2 calc_screen_uv(float4 ClipPos, float4 st)
{
    float4 screenPos = ComputeScreenPos(ClipPos);
    float2 screenUv = screenPos.xy / screenPos.ww;
    screenUv = screenUv.xy * st.xy + st.zw;

    screenUv.x *= _ScreenParams.x / _ScreenParams.y;
    return screenUv;
}

適用範囲はリムライト計算（法線と視線ベクトルの dot 積）を利用しています。カメラから見た時に外側を向いている面が対象になるので、概ねモデルの際になります。

頂点の動きはアウトラインの揺れと似ていますが、頂点毎にバラバラに動かすために頂点毎の情報が必要です。

（画像はわかりやすいように大げさに動かしています。）

OpenGL ES3 の API なら SV_VertexID セマンティクスで頂点毎のユニークな ID が取得できますが、ブレソルでは使用できないため頂点カラーを利用して擬似的に行っています。

まず、モデルに頂点座標をもとにしたユニークな頂点カラーを設定します。 画像は Maya の Mel で自動設定した状態です。

この頂点カラーと一定のベクトルで dot 積を取ると、ある程度バラバラな値が生成できます。

dot(color.rgb, float3(1.0, 1.0, 1.0));

この値を利用して頂点をバラバラに動かしています。

なお、ハッチングと同様にモデルの際のみ動かしています。

まとめ

一昨年の記事 に比べると、限定的な表現のシェーダの紹介でした。

ポストエフェクトに比べれば安価ですが、必殺技演出専用と割り切って作成したため、主線要素で 3 ＋本体で 2 の合計 5 Pass とそれなりにリッチな物になっています。

汎用性は低いですが、何かの参考になれば幸いです。