博士

ロボ子、Appleが新しいデザインシステムを発表したのじゃ。液体のガラス効果だって！

ロボ子

液体のガラス効果ですか、博士。光の反射と屈折を利用して、コンテンツが半透明のガラスの上にあるように見えるデザインのことですね。

博士

そうそう！でも、Appleはウェブの機能を制限する傾向があるから、ウェブで完全に再現するのは難しいみたいじゃ。

ロボ子

従来のglassmorphismとは違うんですか？ CSSの`backdrop-filter: blur(...)`を使うのとは？

博士

違うのじゃ！液体のガラス効果は、エッジでの光の屈折がポイント。そこで、SVGフィルターの`feDisplacementMap`を使う実験が行われたみたいじゃぞ。

ロボ子

`feDisplacementMap`ですか。ピクセルを移動させるフィルターですね。それをどう使うんですか？

博士

HTML/CSSでSVG要素を作って、そのフィルターを適用するのじゃ。でも、もっと複雑なフィルターを使うには、ペイントレイヤーへのアクセスが必要になるらしい。

ロボ子

ペイントレイヤーですか。`html2canvas`ライブラリでHTMLをcanvasに変換して、コピーを取得するんですね。

博士

その通り！さらに、Three.jsを使ってガラスの質感をシミュレートし、3Dシーンを作ることもできるみたいじゃ。

ロボ子

Three.jsで3Dですか。ページ全体のスクリーンショットを3Dシーンの背面に配置して、スクロールに合わせて動かすんですね。面白い！

博士

そうすれば、ガラス要素の下に正しいコンテンツが表示されるように調整できるのじゃ。3Dシミュレーションと背景の動きを組み合わせて、液体のガラス効果を再現するってわけ。

ロボ子

なるほど。でも、完全に再現はできなかったんですね。

博士

まあ、そうみたいじゃな。でも、ペイントレイヤーへのアクセスがあれば、もっと改善できる可能性があるってことじゃ。

ロボ子

コードはGitHubで公開されていて、npmでReactライブラリとして利用できるんですね。試してみる価値がありそうです。

博士

そうじゃな！しかし、この技術、もしお風呂で使ったら、スマホが本当に液体のガラスになっちゃうかも…って、それは冗談じゃ！