WebGL'in Sıvı Camla Buluştuğu Yer

Web'deki çoğu sıvı cam efekti DOM kopyalama (cloning) yöntemini kullanır. HTML öğelerini kopyalarlar, onları deforme ederler, bulanıklık eklerler ve bir cam katmanının altına yerleştirirler.

Bu yöntem WebGL ile başarısız olur. Bir DOM kopyası, canlı bir canvas'tan pikselleri kopyalayamaz. Canvas, her karede değişen bir framebuffer'dır.

Sıvı camın bir canvas üzerinde çalışmasını sağlamak için iki seçeneğiniz var. Canvas'ı her karede yakalayabilirsiniz ki bu maliyetlidir. Veya cam efektini doğrudan WebGL pipeline'ına taşıyabilirsiniz.

İkinci yaklaşımı test etmek için bir deney inşa ettim. Efekti göstermek için hareketli bir arka plana ihtiyacım vardı. Konmari'nin interaktif su dalgalanması demosundan ilham aldım.

Gerçekçi dalgalanma fiziğine ve yüzen çiçeklere sahip kendi versiyonumu oluşturdum.

Sonuç, sıvı cam panelli bir WebGL su sahnesidir. Bu panel, altındaki canlı canvas'ı kırar.

Nasıl çalışır:

  • Su, bir height-field dalgalanma simülasyonu kullanır.
  • İşaretçi (pointer) hareketi bir ızgara (grid) üzerinde dalgalar oluşturur.
  • Bir WebGL shader'ı bu dalgaları ışığa ve bozulmaya (distortion) dönüştürür.
  • 2D bir canvas üzerindeki çiçekler, kırılmanın net bir şekilde gösterilmesine yardımcı olur.

Cam panel DOM'u kopyalamaz. Bunun yerine pikselleri örnekler (samples).

Render akışı şu adımları izler:

  • WebGL suyunu render edin.
  • 2D çiçekleri render edin.
  • Her ikisini tek bir gizli kaynak canvas'ında birleştirin.
  • O kaynak canvas'ını örneklemek için cam shader'ını kullanın.

Shader, yumuşak bir kenar normali (edge normal) tahmin eder. Bunu kaynak dokuyu (texture) bükmek için kullanır. Malzemenin yoğun hissedilmesi için bir renk tonu (tint) ve kromatik ayrışma (chromatic split) ekledim.

Amaç mükemmel fizik değil. Amaç, panelin hareketli bir sahnenin üzerinde duran gerçek bir malzeme gibi hissedilmesini sağlamaktır.

Bu yöntem işe yarıyor çünkü sahne zaten piksellerden oluşuyor. Tüm web için tam bir çözüm daha zordur. Gerçek web siteleri metin, video ve kaydırma (scrolling) kullanır.

Bu alanı yakından takip ediyorum. Performans, gelecekteki çözümler için en büyük zorluk olacaktır.

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

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