2022/06/07 - シェーダー

気分転換にパネル表示をいじってみる。とりあえず半透明のパネルを出していたのだが、もう少し工夫したいのですりガラス処理+角丸四角形にしてみた。

中身のデザインが今ひとつだけど、とりあえずパネル自体はこんな感じかな。すりガラスも角丸もシェーダーで実装。

すりガラス

すりガラスは一般的にはガウシアンブラーを使うらしい。ただ、普通に5×5とかのカーネルで処理すると重くなるので、縦5をかけた後に横5をかける、みたいに2パスでやるらしい。検索するとそういう方針でGrabPass(レンダリングされた画像を取得するやつ)を使用した例がたくさん出てくる。

ただ、Universal Render PipelineだとGrabPassがサポートされてなくて、同様の機能を持つCameraOpaqueTextureを使うと2パスができない(と思う)。なので、カーネルを省略して十字みたいな感じに近似してみた。上の画像の通りそれっぽくはなるからいいかな。

角丸四角形

角丸四角形はなかなか難しい。公式的にはRounded Rectangleっぽいんだけどそのままコピペしてもうまくいかない。なので参考にしながら自力で実装。

float RoundedRectangle(float2 uv, float width, float height)
{
    // uvは-width/2~width/2、-height/2~height/2の座標

    // uvから一番近い矩形状の座標を計算する
    float2 pt = float2(min(abs(uv.x), width / 2 - _Radius), min(abs(uv.y), height / 2 - _Radius));

    // 計算した矩形状の位置とuvとの差分ベクトルの長さを計算する
    float d = length(pt - abs(uv));

    // 半径以内なら1、半径よりおおきければ0
    return smoothstep(d - _Radius / 10, d + _Radius / 10, _Radius);
}

fixed4 frag(v2f i) : SV_Target
{
    // 角丸四角形判定。範囲内にあるならr=1、ないならr=0
    float width = 1 / _CameraOpaqueTexture_TexelSize.x;
    float height = 1 / _CameraOpaqueTexture_TexelSize.y;
    float2 uv = float2((i.uv.x - 0.5) * width, (i.uv.y - 0.5) * height);
    float r = RoundedRectangle(uv, width, height);
 
    // 角丸四角形外(rが0に近い)は描画しない。
    clip(r - 0.1);

    ・・・
    ガウシアンフィルタ処理(他でたくさん紹介されているので省略)
    ・・・

    // 角丸のα値:r
    // オリジナルのα値:α
    // オリジナル色:o
    // ガウシアンフィルタをかけた背景色:b
    // とすると、以下で表せる
    // rα*o + (1-rα)*b

    fixed4 col = r * _Color.a * _Color
        + (1 - r * _Color.a) * b;

    return col;
}

こういうときに数学が役立つ。数学の知識がない場合、ぴったりうまくいくコードを見つけてコピペするかAssetを買うしかないので不利になる。


コメントする