Three.js, WebGPU ve TSL ile Sonsuz “Liquid Glass” Grid Nasıl Kuruluyor?

Liquid glass grid, cam kartlardan oluşan ve hiç bitmeyen bir ızgara etkisidir; Codrops’ta 8 Eylül 2026’da yayımlanan eğitimde bu etki Three.js, WebGPU ve TSL ile kuruluyor. İşin püf noktası şu: ortada gerçek bir cam geometrisi yok — tüm kalınlık, kırılma ve renk saçılması hissi shader içinde hesaplanıyor.

Eğitimin yazarı, İsveçli yaratıcı stüdyo Shader’ın kurucu ortaklarından Filip Kantedal. Aşağıda cam malzemesinin nasıl kurulduğunu, TSL’in GLSL’den farkını ve ızgaranın neden sonsuz hissettirdiğini adım adım ele alıyorum.

Cam efekti gerçekte nasıl kuruluyor?

Cam görünümü dört aşamalı bir zincirle oluşuyor. Her aşama bir öncekinin çıktısını girdi olarak alıyor:

1. Silüet — roundedBoxDistance adındaki bir SDF (işaretli mesafe fonksiyonu) kartın yuvarlatılmış dış hattını tanımlıyor.
2. Kalınlık — bevelHeight, superellipse bir pah profiliyle camın değişken kalınlığını üreten bir yükseklik haritası çıkarıyor.
3. Normal — yükseklik sol, sağ, üst ve alt komşu noktalardan örneklenip yüzey normali türetiliyor.
4. Kırılma — çok taplı (multi-tap) ışın kırılması uygulanıyor; her renk kanalı için farklı IOR kullanılarak kromatik saçılma elde ediliyor.

Bunun üzerine üç katman daha biniyor: bakış açısına göre yansıma şiddetini ayarlayan Fresnel, SDF mesafe bantlarıyla kenarı vurgulayan rim lighting ve kartlara jelimsi bir sallantı veren XPBD kumaş çözücüsü. Kartların üzerindeki görseller ise HLS video akışlarından doku olarak besleniyor.

Ayarlanabilir değişkenler tek tek isimlendirilmiş: cornerRadius, bevelWidth, bevelPower, thickness, ior, dispersion, fresnel, rimWidth ve rimIntensity. Efekti kendi projenize uyarlarken oynayacağınız yerler bunlar.

Kartların kenarlarına dikkat edin: beyaz ışık tek renk kalmıyor, hafifçe ayrışıyor. Kanal başına farklı IOR kullanılmasının görünen karşılığı tam olarak bu.

TSL nedir ve GLSL’den farkı ne?

TSL (Three.js Shading Language), shader’ı metin olarak değil düğüm grafiği olarak kurmanızı sağlayan bir katmandır. Eğitimin kendi ifadesiyle, TSL shader’ı bir düğüm grafiği olarak inşa ettiği için döngü derleme anında açılıyor.

Pratik sonucu şu: kırılma için kaç örnekleme (tap) yapılacağını kod değiştirmeden ayarlayabiliyorsunuz. Güçlü GPU’da daha çok, mobilde daha az — tek kod yolu, iki kalite kademesi.

Malzeme tarafında kurulum, standart bir Three.js malzemesine özel bir renk düğümü bağlamaktan ibaret:

// Cam görünümü, malzemenin colorNode'una bağlanan
// bir TSL düğüm grafiğiyle kuruluyor.
const material = new MeshBasicNodeMaterial();
material.colorNode = glassColor();

Projede kullanılan yığın: Next.js, React Three Fiber v10, WebGPU renderer, sürükleme etkileşimleri için Motion ve MSDF font’larla pmndrs/glyph.

Izgara neden “sonsuz” hissettiriyor?

İki karar birlikte çalışıyor. Birincisi, kartlar düzleme değil küresel bir yüzeye yerleştiriliyor; bu, kenarlarda doğal bir eğrilik veriyor. İkincisi, konumlar sarılmış (wrapped) hesaplanıyor: bir kenardan çıkan kart karşı kenardan geri giriyor.

Yani sahnede aslında sınırlı sayıda kart var. Kullanıcı sürükledikçe aynı kartlar yeniden konumlandırılıyor — bellek maliyeti sabit kalırken içerik bitmiyormuş gibi görünüyor.

Metin neden 3B’de değil, DOM’da duruyor?

Projedeki en öğretici kararlardan biri bu: kart başlıkları doku olarak değil, gerçek DOM elemanları olarak duruyor. Bu elemanlar, WebGPU kamera matrislerinden türetilen CSS matrix3d dönüşümleriyle 3B mesh’in üzerine piksel hassasiyetinde hizalanıyor.

Kazanç net: metin seçilebilir, erişilebilir ve her çözünürlükte keskin kalıyor. Doku olarak çizilen yazıda bunların üçünü de kaybedersiniz.

Tarayıcı desteği ve performans

Bu teknik WebGPU gerektiriyor ve WebGPU desteği henüz her tarayıcıda yaygın değil. Bir üretim sitesinde kullanacaksanız, desteğin bulunmadığı durumlar için bir geri düşüş (fallback) planlamanız gerekir.

Eğitimde açık bir kare hızı ölçümü verilmiyor. Performans yaklaşımı kalite kademelemesi üzerine kurulu: güçlü GPU’larda daha fazla kırılma örneklemesi, mobilde daha az.

Sık sorulan sorular

TSL ile GLSL arasındaki fark nedir?

GLSL’de shader bir metin bloğu olarak yazılır ve değiştirmek için kaynağı yeniden üretip derlemek gerekir. TSL’de shader bir düğüm grafiği olarak kurulur; döngüler derleme anında açıldığı için kalite kademesi kod değiştirmeden ayarlanabilir.

Liquid glass efekti için gerçek 3B cam modeli gerekiyor mu?

Hayır. Bu projede gerçek geometri kullanılmıyor; kartın silüeti bir SDF ile, kalınlığı bir yükseklik haritasıyla tanımlanıyor ve normaller bu yükseklikten türetiliyor. Tüm cam hissi shader içinde oluşuyor.

Bu teknik hangi tarayıcılarda çalışır?

WebGPU desteği olan tarayıcılarda çalışır; WebGPU henüz tüm tarayıcılarda yaygın değil. Yayına alacaksanız özellik algılama yapıp WebGPU bulunmayan ortamlar için daha basit bir görsel sunmak gerekir.

Kromatik saçılma (dispersion) nasıl elde ediliyor?

Kırılma hesabında her renk kanalı için farklı bir kırılma indisi (IOR) kullanılarak. Kırmızı, yeşil ve mavi biraz farklı açılarla sapınca kenarlarda gerçek camdaki gibi renk ayrışması görünür.

İlgili yazılar

• Three.js ve WebGPU ile Prosedürel Geometri: Codrops’un Geometry Painter Projesi
• Three.js’te Piksel Bütçeleme: Sinematik Sahneler İçin Performans Dersleri
• Figma’ya Hareketli ve Etkileşimli Shader Efektleri Geldi
• Model X Studio Nedir? GPT-6 Astra ile Yapılan Viral Three.js Projesi

Kaynaklar

• Codrops — Building an Infinite Liquid Glass Grid with Three.js, WebGPU and TSL (8 Eylül 2026)
• Infinite Liquid Glass — canlı demo
• Shader — Filip Kantedal’ın stüdyosu