CSS、SVG、物理演算を用いたApple WWDC 2025 Liquid Glass効果の再現

この記事では、AppleのWWDC 2025で発表された見事なLiquid Glass UI効果の再現方法を詳しく解説します。CSS、SVGディスプレイスメントマップ、物理ベースの屈折計算を用いて、説得力のある近似を実現します。著者は屈折の原理を説明し、光が異なる媒体を通過するときにどのように曲がるか、そして数学関数がどのようにガラス表面の形状を記述するかを詳しく説明します。次に、SVGディスプレイスメントマップを使用して屈折効果をシミュレートします。この記事は、拡大鏡、検索ボックス、スイッチ、スライダーなどのUIコンポーネントをLiquid Glass効果で作成することで締めくくられています。なお、最適なパフォーマンスは、現在、SVGフィルターをバックドロップフィルターとしてサポートしているChromeで確認されています。