Unity

UnityでGIF画像のようなスケーリングしたエフェクトを入れる

More than 1 year has passed since last update.

「Gif画像のようなスケーリング」という言葉が正しくない気がするのですが、他に語彙が見つからなかったので...

capture.gif

Unityで作ったものをLICEcapというアプリでGifに録画してみたら、背景のグレー部分の色が飛び飛びでグレースケールのようになっていたので、これは面白いと思い、これを再現するImegeEffectを作ろうと思いました。

Gifの色数

Gifは1ピクセルで表現できる色の数が256個です。1ピクセルあたり8bit。
そこで、単純にフラグメントシェーダーで、色を飛び飛びにしてあげれば良いかと思い試して見ました。

fixed4 frag (v2f i) : SV_Target
{
  float step = 1.0 / _SegmentCount;
  fixed4 col = tex2D(_MainTex, i.uv);
  col.rgb = col.rgb - col.rgb % step;
  return col;
}

スクリーンショット 2017-10-02 3.08.39.png

上手く行きません。色のスケールの境界付近で緑や青が出てしまいます。

スクリーンショット 2017-10-02 3.08.51.png

_SegmentCount を6程度まで下げると面白い絵にはなりますが...

調べたところ、Gifの色数は256色なのですが、これは、WebSafeカラーのように、均等に分配された決まった256色のみを使って画像を作成するのではなく、カラーパレットというテーブルに、Gif画像で使用する色をあらかじめ任意にセットしておき、各ピクセルはその色へのインデックスを保持するというデータフォーマットでした。カラーパレットにセットできる色は32ビットカラーを指定できるので、Gif画像では細かい色の使い分けができていたというわけです。

HSBの明度を調節してスケーリングを出す

RGBの数値をいくら弄っても上手くいかなかったので、HSBの明度のみを変更するやり方を試してみました。フラグメントシェーダー内で、RGB値をいったんHSB値に変換して、明度を調整してもう一度RGB値に戻すというものです。

float3 rgb2hsv(float3 c)
{
    float4 K = float4(0.0, -1.0 / 3.0, 2.0 / 3.0, -1.0);
    float4 p = lerp(float4(c.bg, K.wz), float4(c.gb, K.xy), step(c.b, c.g));
    float4 q = lerp(float4(p.xyw, c.r), float4(c.r, p.yzx), step(p.x, c.r));

    float d = q.x - min(q.w, q.y);
    float e = 1.0e-10;
    return float3(abs(q.z + (q.w - q.y) / (6.0 * d + e)), d / (q.x + e), q.x);
}

float3 hsv2rgb(float3 c)
{
    float4 K = float4(1.0, 2.0 / 3.0, 1.0 / 3.0, 3.0);
    float3 p = abs(frac(c.xxx + K.xyz) * 6.0 - K.www);
    return c.z * lerp(K.xxx, clamp(p - K.xxx, 0.0, 1.0), c.y);
}

fixed4 frag (v2f i) : SV_Target
{
  float step = 1.0 / _SegmentCount;
  fixed4 col = tex2D(_MainTex, i.uv);
  col.rgb = rgb2hsv(col.rgb);
  col.z = col.z - col.z % step;
  col.xyz = hsv2rgb(col.xyz);
  return col;
}

いい感じにできました♪
_SegmentCountを下げると洞窟でろうそくを灯しているアニメのような感じに見えます。