Liquid Glass エフェクト

概要

任意の図形にアニメーション効果としてこのスクリプトを適応することで、その図形をリキッドグラス風の物体に変化させることが可能です。

---

仕組み

図形のアルファ値からマスクとして図形の形をとり、背景をそのまま描画します。マスクに一様カーネル(ボックスぼかしと同じ原理です)をかけることで、ベゼルを形成します。(ガウスぼかしを使わないのは、S字になって距離に比例しないためです)

距離から、ガラス断面の高さを円弧で計算し、疑似的に再現します。
距離をxとするとき、計算式は 1 - sqrt(1 - (1 - x)**2) です。
そして、距離場の勾配から曲がる向きを決定します。勾配は輪郭に対して常に垂直であるため、反転すれば外向きの法線として使えます。円ならば中心からの放射方向と一致し、円以外の形状ならばその点の面の向きとなります。
ずらした一から背景を拾うとき、RGBでずらす量を少しずつ変えることで色収差(縁付近の色ずれ)を作ることができます。

なお、勾配の大きさは減衰にも使用しています。形をつぶして上下のベゼルがぶつかると勾配が消えてしまうので、これを描けることで継ぎ目がなめらかになります。薄いガラスほど屈折しない現実の物理学とも一致していますね。

最後にフレームバッファに直接αブレンドし、通常の描画を止めます。こうすることでこのスクリプトが実現しています。やったね。

---

導入方法

AviUtl2のデータファイル(一般的にはProgramData/aviutl2に存在します)の、ScriptフォルダにLiquidGlass.anm2を入れてください。

---

使用方法

適応したい図形に、アニメーション効果としてLiquidGlassを追加します

---

各パラメータの意味

項目	最小	最大	初期値	移動単位	内部値	意味
ベゼル幅	0	100	70	0.01	値/1000 → 0.070	輪郭から内側へどこまでを「縁」とするか。画面の高さが1.0の単位なので、1080pで約76pxです。
厚み	0	50	20	0.01	値/1000 → 0.020	ガラスの厚み。屈折量の係数です。
歪み	0	500	350	0.01	値/1000 → 0.350	屈折の強さ。厚みと掛け算されます。
色収差	0	100	100	0.01	値/1000 → 0.100	R と B のずらし量を G に対して どれだけ割合を変えるか。縁に色ずれが発生します。
ハイライト	0	200	0	0.01	値/1000 → 0.0	縁の傾斜が急な部分に加算する白の量。200 = 白を全量加算します。
距離場を確認	-	-	オフ	-	-	デバッグ表示です。ぼかされたマスクをそのまま画面に出します。

---

作者(もし何か不具合があればの問い合わせ先)

X: https://x.com/tettu0530
Discord: tettu0530