はじめに

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

こんにちは。テクニカルアーティストグループ（以下：TAG）のfo-taです。
TAGは様々な案件を横断してテクニカルな分野をサポートするグループで、僕はUnityやMayaのシェーダ、各種ツールスクリプト等で各案件のサポートをしています。

概要

今回は、流体っぽい表現を擬似的に平面上で行うシェーダについてご紹介します。

↑のサンプルは各Quad（4角形ポリゴン1枚）＋RGBテクスチャ1枚で構成されています。

経緯

このシェーダは、BLEACH Brave Souls（以下：ブレソル） のブレソル3周年記念キャンペーンの際に作成しました。

ブレソルは、ぴえろが大人気コミックをアニメ化した作品 「BLEACH」を題材とした、爽快3Dアクションゲームです。
ブレソル3周年記念キャンペーンでは、原作者・久保帯人先生デザイン監修のもと制作された、ブレソルオリジナルデザインの3周年記念キャラクター「ウルキオラ」を配信しました。

【特報】「BLEACH Brave Souls（ブレソル）」はもうすぐ3周年！3周年を記念して『ブレソル3周年記念キャラクター』が登場！！ https://t.co/uk2p3q2R8N #ブレソル pic.twitter.com/GKcPZzOM6T

-- BLEACH Brave Souls公式 (@Bleach_BS) July 21, 2018

ご覧の通り、頭と尻尾に炎が付いたデザインになっています。

ブレソルは海外にも展開している関係上、推奨端末のスペックがあまり高くないものもあるので、リッチな表現手法をそのまま使うのは現実的ではありません。
それでもこのかっこいいデザインを妥協はしたくない！擬似的にでも軽く表現できないか......！？と考えたことがきっかけです。

最終的には、このような表現を実現できました！

僕も3周年記念ガチャを回しまくってゲットできました！！

内容

流体的な表現には、2枚の白黒画像を重ねる手法を利用しています。

左図のように2枚の白黒画像を重ねて動かすと、グレーが重なる部分にメタボール変形っぽい見た目を得ることができます。
さらに右図のようにキュッとすると、より変形した感じが強くなります。
PhotoShopで2枚の画像を覆い焼き（加算）で重ねて、レベル補正をかけるようなイメージです。

同じことを雲模様で行うと、こんな具合に複雑な変形をしているような結果を得ることができます。
この仕組みをベースにしています。

左から1枚目と2枚目を重ね、さらに3枚目をマスクとして適用（白い範囲だけ表示）すると、一番右のように炎のゆらめきのような結果が得られます。

上で出来た結果を黒い部分を透明とした透過画像にし、更にもう一枚画像を重ねます。

これをキュッとして着彩すると、右画像のような禍々しい炎っぽい効果ができあがります。

使用画像

前項で登場した4つの画像を使用しています。

ただ、せっかく軽くしようとしたのに、4枚もテクスチャを使っていては本末転倒です。なので1枚の画像にまとめます。ちょうど4枚なので、RGBAの4チャンネルにまとめられそうですね。
しかし、せっかくならもっと軽くしたいです。加えて、iOSのPVRTCとアルファ画像の相性が悪いのも気になります。

そこで、1枚目と2枚めの画像を1枚にまとめました。
それぞれ用途的にまとめても問題ないため、半分ずつに潰して1枚にしています。

計3枚の白黒画像を1枚のRGB画像にまとめて、画像は完成です。

バリエーション

パラメータやマスク画像を変えると様々な結果が得られるようになっています。

ウルキオラはこのようなパラメータで、マスク画像は非圧縮RGBの非常に小さいサイズにしています。
非圧縮にすることでブロックノイズを低減しており、やや輪郭などにまだ粗い部分がありますが、画面にあまり大きく映らないことを考慮するとこのぐらいの画像サイズでも全然問題ありません。

水面のような表現をしてみました。
「キュッとする」の具合をパラメータで調整できるので、このようにぼやけた表現も可能です。

パラメータはアニメーションさせることもできるので、膨張や明滅と言った表現もできるようになっています。

コードサンプル

ざっくりとですが、計算式は下記のような形になります。

Alpha = saturate((RChannel * 2.0 - 1.0) + GChannel)
Color = Alpha - BChannel

GとBChannelは事前にUVスクロールをしており、ここから更に lerp や smoothstep でキュッとしたり着彩したりしています。

まとめ

中身はUVスクロールと画像合成の合わせ技なので技術的にすごいことはしていませんが、処理の軽い範囲でも工夫次第でこれだけ表現力を上げるパワーがシェーダにはあります！
デザイナーの皆さんもどんどんシェーダに興味を持って貰えればと思います。この記事がその助けになることができれば嬉しいです。

ちなみにこのシェーダはプロトタイプを ShaderForge で作りました。ノードベースなのでコードが書けない人でも簡単に作れます。残念ながら ShaderForge は開発終了してしまいましたが、Unity の ShaderGraph や UnrealEngine の MaterialEditor など、ノードベースでシェーダを作る環境は多くあるので、興味がある方はとりあえず軽く触ってみることをオススメします！シェーダ楽しい！！