LiquidGlass

LiquidGlassとは？

LiquidGlassは、軽量なJavaScript/TypeScriptライブラリで、WebGLシェーダーを使用して任意のHTML要素の上にリアルなガラス効果をレンダリングします。ガラス要素の背後のDOMコンテンツをキャプチャし、リアルタイムに合成することで、屈折、ブラー、色収差、鏡面ハイライト、および関連する照明挙動を適用します。

このライブラリは、任意のページ背景（画像、動画、キャンバス、またはプレーンなHTML）に対応するよう設計されています。マルチパスレンダリングパイプラインを使用し、複数のガラスレイヤー、要素ごとの設定、ページ上の動的更新を処理できます。

主な機能

• HTML要素向けWebGLシェーダーベースのガラスレンダリング: ガラス要素の背後のDOMコンテンツを処理し、シェーダー出力として合成することでガラス表現を生成。
• リアルタイムマルチパスパイプライン: 屈折、ブラー強度制御、色エッジのフリンジ、鏡面/リム照明などのエフェクトをサポート。
• 要素ごとおよびグローバル設定: data-config（JSON）で各ガラス要素を個別に設定、またはdefaultsオプションでグローバルデフォルトを設定。
• レイヤー付きガラス合成: 合成アプローチによりガラスオングラス構成をサポート。
• インタラクティブな位置指定オプション: 有効時（例: floating: true）にドラッグ可能な「フローティング」パネル挙動を注入、buttonモードでホバー/押下時のシェーダーフィードバックを提供。
• リアルな表面制御: cornerRadius、zRadius（ベベル深さ）、bevelMode（形状曲率モード）、brightness、saturation、shadowOpacity、fresnel反射などのパラメータ。

LiquidGlassの使い方

1. インストールまたはインポート: npmでインストール（npm install @ybouane/liquidglass）またはCDNから直接インポート（https://cdn.jsdelivr.net/npm/@ybouane/liquidglass/dist/index.js）。
2. 位置指定されたルートコンテナを作成: LiquidGlass.init()に渡すroot要素はposition: relativeのコンテナである必要があります。
3. ルート内にガラス要素を追加: 各ガラス要素はルートの直接の子要素である必要があります。初期化時、LiquidGlassはシェーダー出力用に<canvas>をガラス要素の最初の子の前に注入。
4. 初期化: LiquidGlass.init({ root: document.querySelector('#my-root'), glassElements: document.querySelectorAll('.glass') })でインスタンスを作成、後でinstance.destroy()でクリーンアップ。
5. エフェクト設定: element.dataset.config = JSON.stringify({ ... })で要素ごとの設定を提供（例: ブラー量、屈折、コーナーラディウス）。プレーグラウンドパターンで視覚的にパラメータ調整。

ユースケース

• カスタム「ガラス」カードとパネル: blurAmount、brightness、cornerRadius、zRadiusを調整してカード要素にフロステッド、ダーク、または通常のガラススタイルを適用。
• インタラクティブな拡大鏡スタイルレンズ: bevelMode: 1に加え一致するcornerRadiusとzRadiusを使用し、ハーフスフィア/ドームレンズ効果を実現（オプションでfloatingを有効）。
• ホバー/押下UIフィードバック: button: trueを設定し、ガラス要素がユーザー操作に反応—ホバーで明るく、押下でベベルを平坦化し影を深く。
• レイヤー付きガラスオングラス構成: 異なるガラス要素が重なる多層UIを構築、LiquidGlassの合成で積層効果を活用。
• リッチ背景上のガラス: 画像、動画、キャンバス、通常のHTMLコンテンツの背景の上にガラス要素を配置、ルートのサンプリング対象の子要素内に背景を保持。

FAQ

特定のDOM構造が必要ですか？ はい。rootは位置指定コンテナ（position: relative）でなければならず、各ガラス要素はルートの直接の子要素である必要があります。ネストされたガラス要素は初期化時にコンソール警告で拒否されます。

LiquidGlassはガラス効果に何をキャプチャしますか？ シェーダーはルートの子供をサンプリングするため、背景画像などのコンテンツはルート内の兄弟要素に配置。ルート自体はキャプチャされません。

LiquidGlassはDOM要素を自動作成しますか？ ガラス要素の最初の子の前にシェーダー出力用<canvas>を注入します。そのため、ガラス要素の:first-child CSSセレクタに依存しないでください。

同じページに複数のLiquidGlassルートを使用できますか？ 制限事項として、複数のLiquidGlassルートは屈折を共有できません。また、一つのルートのガラス要素は別のルートのガラス要素のレンダリングを見えません。

パフォーマンス上の考慮事項はありますか？ はい。ライブラリはリアルタイムDOMラスタライズとマルチパスWebGLパイプラインに依存し、DOMをキャンバスにキャプチャするのは高コストと記述されています。

代替案

• CSSのみのガラス効果 (backdrop-filter / ブラーベースの手法): よりシンプルで純粋なCSS駆動のアプローチでフロストガラスを近似可能だが、通常は同等の屈折/色収差/鏡面パイプライン挙動を提供しない。
• WebGLシェーダーフレームワークやカスタムThree.js/WebGL実装: 完全制御が必要なら、カスタムシェーダーパスを自力実装可能。これによりライブラリ抽象化から独自レンダリングパイプラインへ作業が移る。
• その他のDOM-to-canvas/リアルタイム効果パイプライン: DOMをテクスチャにラスタライズする近接ソリューションでスクリーンスペース効果を作成可能だが、LiquidGlassのDOMベースガラス要素設定とはワークフローと設定が異なる。
• 静的デザインファイル: インタラクションやリアルタイム更新が不要な場合、プリレンダリングガラス画像やエクスポートコンポーネントでランタイムコストを削減可能。ただし動的屈折/パラメータ変更は犠牲に。