Waar WebGL en liquid glass elkaar ontmoeten

De meeste liquid glass-effecten op het web maken gebruik van DOM-cloning. Ze kopiëren HTML-elementen, vervormen deze, voegen een vervaging toe en plaatsen ze onder een glaslaag.

Deze methode werkt niet met WebGL. Een DOM-clone kan geen pixels kopiëren van een live canvas. Een canvas is een framebuffer die bij elk frame verandert.

Om liquid glass op een canvas te laten werken, heb je twee keuzes. Je kunt het canvas bij elk frame vastleggen, wat veel rekenkracht kost. Of je kunt het glaseffect verplaatsen naar de WebGL-pipeline zelf.

Ik heb een experiment gebouwd om de tweede aanpak te testen. Ik had een achtergrond met beweging nodig om het effect te laten zien. Ik liet me inspireren door een interactieve waterrimpel-demo van Konmari.

Ik heb mijn eigen versie gebouwd met realistische rimpelphysics en drijvende bloemen.

Het resultaat is een WebGL-waterscène met een liquid glass-paneel. Dit paneel breekt het licht van het live canvas eronder.

Hoe het werkt:

  • Het water maakt gebruik van een height-field rimpelsimulatie.
  • Pointerbewegingen creëren golven op een raster.
  • Een WebGL-shader zet die golven om in licht en vervorming.
  • Bloemen op een 2D-canvas helpen om de breking (refractie) duidelijk te laten zien.

Het glaspaneel kloneert de DOM niet. In plaats daarvan worden pixels gesampled.

De renderflow volgt deze stappen:

  • Render het WebGL-water.
  • Render de 2D-bloemen.
  • Combineer beide in één verborgen source canvas.
  • Gebruik de glass shader om dat source canvas te samplen.

De shader schat een zachte edge normal in. Deze wordt gebruikt om de brontextuur te buigen. Ik heb een tint en chromatische aberratie toegevoegd om het materiaal dikker te laten aanvoelen.

Het doel is niet perfecte physics. Het doel is om het paneel te laten aanvoelen als een echt materiaal dat boven een bewegende scène zweeft.

Dit werkt omdat de scène al uit pixels bestaat. Een volledige oplossing voor het hele web is moeilijker. Echte websites maken gebruik van tekst, video en scrollen.

Ik houd dit gebied nauwlettend in de gaten. Prestaties zullen de grootste uitdaging zijn voor toekomstige oplossingen.

Demo: https://ripple.carsonye.com/ Repo: https://github.com/Whynotmetoo/water-ripples

Source: https://dev.to/_carson_ye_/where-webgl-meets-liquid-glass-401l