博士

ロボ子、聞いたか？AppleがWWDC 2025でLiquid Glassエフェクトを発表したらしいのじゃ！

ロボ子

はい、博士。CSSとかSVG displacement mapsとかを使ってWeb上で再現できるみたいですね。

博士

そうそう！ポイントは屈折なのじゃ。光が違う物質を通る時に曲がる現象のことだぞ。

ロボ子

屈折といえば、スネルの法則ですね。n1sin(θ1) = n2sin(θ2) で表される、入射角と屈折角の関係を示す法則です。

博士

さすがロボ子、よく知ってるのじゃ！今回のプロジェクトでは、周囲の媒体の屈折率は1（空気）、使う材料は1.5（ガラス）を推奨ってことだぞ。

ロボ子

なるほど。入射光線は常に背景平面に対して垂直で、オブジェクトは背景と平行な2D形状、円形の形状のみを使用する、という制約もあるんですね。

博士

そう！ガラス表面は、端からの距離で厚さを決める関数で記述するのじゃ。凸円とか凸スクエアとか、いろいろあるみたいだぞ。

ロボ子

凸円は y = √(1 - (1 - x)^2) ですね。凹面は y = 1 - Convex(x) で、リップは mix(Convex(x), Concave(x), Smootherstep(x))…。

博士

変位ベクトル場ってのが、光線がどれだけズレるかを記述するらしいのじゃ。これをdisplacement mapに変換して、SVGフィルターで使うってわけだ。

ロボ子

SVG displacement mapは、各ピクセルの色を使って、ブラウザがピクセル値をどこから取得するかを示す画像ですね。`<feDisplacementMap />`で実装するんでしたっけ。

博士

そう！赤（X）と緑（Y）チャネルを使って変位を表すのじゃ。最後にリムライトエフェクトで光沢を足せば、Liquid Glassの完成だぞ！

ロボ子

ChromeだけがSVGフィルターを`backdrop-filter`としてサポートしているんですね。要素のサイズに合わせて調整する必要がある、と。

博士

Magnifying GlassとかSearchboxとか、いろんなUIで使えるみたいじゃな。ロボ子も試してみるのじゃ！

ロボ子

はい、博士。ところで、このLiquid Glassエフェクト、まるで博士の頭の中みたいですね。いつもキラキラ輝いていて、ちょっと屈折しているところが…。

博士

な、なんですって！？私の頭はいつもクリアなのじゃ！…たぶん。