WebGLとリキッドガラスの融合
ウェブ上のリキッドガラス効果の多くは、DOMのクローンを使用しています。HTML要素をコピーし、それらを歪ませ、ぼかしを加え、ガラスレイヤーの下に配置するという手法です。
この手法はWebGLでは機能しません。DOMのクローンは、ライブキャンバスからピクセルをコピーすることができないからです。キャンバスは、フレームごとに変化するフレームバッファです。
キャンバス上でリキッドガラスを実現するには、2つの選択肢があります。1つは、毎フレームキャンバスをキャプチャする方法ですが、これはコスト（負荷）がかかります。もう1つは、ガラス効果そのものをWebGLパイプライン内に組み込む方法です。
私は2番目のアプローチをテストするために、実験的なプロジェクトを構築しました。効果を示すには動きのある背景が必要だったため、Konmariによるインタラクティブな水面の波紋デモからインスピレーションを得ました。
リアルな波紋の物理演算と、浮かんでいる花を取り入れた独自のバージョンを作成しました。
その結果、リキッドガラスのパネルを備えたWebGLの水景シーンが完成しました。このパネルは、その下にあるライブキャンバスを屈折させます。
仕組み：
- 水面にはハイトフィールド（高さフィールド）による波紋シミュレーションを使用しています。
- ポインターの動きによってグリッド上に波が発生します。
- WebGLシェーダーが、それらの波を光と歪みに変換します。
- 2Dキャンバス上の花が、屈折をより鮮明に見せる役割を果たしています。
ガラスパネルはDOMをクローンするのではなく、ピクセルをサンプリングします。
レンダリングフローは以下のステップに従います：
- WebGLの水面をレンダリングする。
- 2Dの花をレンダリングする。
- 両方を結合して、1つの隠しソースキャンバスを作成する。
- ガラスシェーダーを使用して、そのソースキャンバスをサンプリングする。
シェーダーはソフトエッジの法線（normal）を推定します。これを利用してソーステクスチャを曲げます。また、素材に厚みを感じさせるために、ティント（色付け）と色収差（chromatic split）を追加しました。
目標は完璧な物理演算ではありません。動いているシーンの上に置かれた、本物の素材のようにパネルを感じさせることです。
これが機能するのは、シーンがすでにピクセルとして存在しているからです。ウェブ全体に対する完全なソリューションを作るのはより困難です。実際のウェブサイトでは、テキスト、ビデオ、スクロールが使用されているからです。
私はこの分野を注視しています。将来的なソリューションにとって、パフォーマンスが最大の課題となるでしょう。
Demo: https://ripple.carsonye.com/ Repo: https://github.com/Whynotmetoo/water-ripples
Source: https://dev.to/_carson_ye_/where-webgl-meets-liquid-glass-401l