- Apple’ın 2025 WWDC’de tanıttığı Liquid Glass efektinin web’de CSS, SVG ve fizik tabanlı kırılma hesaplamalarıyla nasıl yeniden üretilebileceği anlatılıyor
- Kırılma olgusunun prensipleri ile Snell yasası kullanılarak cam yüzeyin modellenmesi ve kırılma simülasyonu süreci açıklanıyor
- SVG displacement map kullanılarak render’a uygun bir yer değiştirme vektör alanı oluşturuluyor ve bunun gerçek UI bileşenlerine uygulanabildiği gösteriliyor
- Yalnızca Chrome’da SVG filter’ın backdrop-filter olarak kullanılması mümkün ve çeşitli UI öğelerine (büyüteç, switch, oynatıcı vb.) uygulanmasına dair örnekler sunuluyor
- Efekt gerçek zamanlı uygulanabiliyor, ancak tarayıcılar arası sorunlar ve performans sınırlamaları var; ayrıca gelecekte açık kaynak planlarından da söz ediliyor
Giriş
Apple, 2025 Haziran’daki WWDC’de Liquid Glass efektini ilk kez tanıttı. Bu efekt, arayüz öğelerinin kavisli kırılmalı cam gibi görünmesini sağlayarak gerçek cam yüzeyine benzer bir görsel deneyim sunuyor. Bu yazı, web ortamında CSS, SVG displacement map ve fizik tabanlı kırılma hesaplamaları ile benzer bir etkinin nasıl üretilebileceğine dair uygulamalı bir yaklaşım sunuyor. Amaç kusursuz bir uygulama yapmak değil; kırılma ve yansıma parlamaları gibi temel özellikleri yeniden üreten ölçeklenebilir bir kavram kanıtı ortaya koymak. Işığın farklı malzemelerden geçerken nasıl kırıldığı en temel prensiplerden başlayarak anlatılıyor ve efekt adım adım inşa ediliyor. Sonunda verilen etkileşimli demo şu anda yalnızca Chrome’da düzgün çalışıyor.
Kırılma olgusunu anlamak
Kırılma, ışığın bir malzemeden başka bir malzemeye geçerken ilerleme yönünün değişmesi olayıdır. Bu, her malzemede ışığın hızının farklı olmasından kaynaklanır ve Snell yasası ile geliş açısı ile kırılma açısı arasındaki ilişki şu şekilde ifade edilir:
- n1 * sin(θ1) = n2 * sin(θ2)
- n1: ilk ortamın kırılma indisi
- θ1: geliş açısı
- n2: ikinci ortamın kırılma indisi
- θ2: kırılma açısı
Etkileşimli diyagramda görülebilenler:
- İki ortamın kırılma indisleri aynıysa ışık kırılmadan dümdüz ilerler
- İkinci ortamın kırılma indisi daha yüksekse ışık normale doğru kırılır
- İkinci ortamın kırılma indisi daha düşükse ışık normalden uzaklaşır; bazı durumlarda tam iç yansıma oluşabilir
- Gelen ışık yüzeye dikse, kırılma indisinden bağımsız olarak düz ilerler
Bu projenin sınırlamaları
Karmaşıklığı sınırlamak ve algoritmayı basitleştirmek için şu koşullar kabul ediliyor:
- Dış ortamın kırılma indisi 1 (hava)
- İç cam malzemesi için 1.5 kullanılıyor (tipik cam)
- Kırılma olayı yalnızca bir kez hesaba katılıyor (çıkıştaki kırılma yok sayılıyor)
- Gelen ışık her zaman arka plan düzlemine dik kabul ediliyor
- Tüm nesneler 2D şekiller ve yalnızca dairesel formda ele alınıyor (dikdörtgen vb. genişletilebilir ama ek hesaplama gerekir)
- Nesne ile arka plan düzlemi arasında boşluk yok
- Bu koşullarla Snell yasası üzerinden tüm ışınlar basitçe hesaplanabiliyor
Cam yüzey oluşturma
Liquid Glass efektini uygulayabilmek için, sanal camın kesitini (mercek veya kavisli panel) matematiksel bir fonksiyonla tanımlamak gerekiyor.
Yüzey fonksiyonu
Cam yüzeyi bir surface function ile tanımlanıyor ve bu fonksiyon kenardan düz iç bölgeye kadar olan kalınlığı ifade ediyor
- Fonksiyonun giriş değeri 0: dış sınır, 1: bezel sonu (düz yüzeyin başlangıcı)
- Her noktadaki kalınlığın türevi alınarak yüzeyin normal vektörü bulunuyor
const height = f(distanceFromSide);
const delta = 0.001;
const y1 = f(distanceFromSide - delta);
const y2 = f(distanceFromSide + delta);
const derivative = (y2 - y1) / (2 * delta);
const normal = { x: -derivative, y: 1 };
Başlıca yüzey fonksiyonu türleri
- Convex Circle: y = sqrt((1 - (1 - x))^2)
- Basit yay biçimi; içeri gidildikçe hızla düzleşir ve kırılma kenarı belirgin olur
- Convex Squircle: y = ((1 - (1 - x))^4)^(1/4)
- Apple’ın sık kullandığı bir form; eğri ile düz yüzey arasındaki geçiş yumuşaktır ve ölçekleme sırasında efekt daha doğal görünür
- Concave: y = 1 - Convex(x)
- İçbükey form; ışık nesne sınırının dışına kırıldığı için dış bölgeden örnekleme gerekir
- Lip: y = mix(Convex(x), Concave(x), Smootherstep(x))
- Kenarda çıkıntılı bir lip ve ortada sığ bir kıvrım içeren bileşik yapı
Yalnızca bu dört fonksiyonla bile yüzey şekline göre kırılma farklarını etkili biçimde karşılaştırmak mümkün.
Simülasyon
Her yüzey fonksiyonuna göre ışınların kırılma yolları simüle edilerek gerçek efekt farkı görselleştiriliyor.
- Dışbükey (Convex) yapı ışık yolunu içeri toplarken, içbükey (Concave) yapı dışarı iter
- Apple’ın Liquid Glass yaklaşımı çoğunlukla dışbükey formu tercih ediyor (Switch gibi istisnalar hariç)
- Arka plandaki oklar, kırılma miktarını (yer değiştirmeyi) büyüklüğe göre renklendirerek gösteriyor
- Sağ ve sol sınırda aynı uzaklıkta bulunan noktalar aynı yer değiştirmeyi verdiğinden verimli yeniden kullanım mümkün oluyor
Yer değiştirme vektör alanı oluşturma
Cam yüzeyin tamamında, her konum için ışığın yer değiştirme yönü ve büyüklüğünü gösteren bir vektör alanı oluşturuluyor
- Dairesel formda bu hareket her zaman sınır normalinin yönünde oluyor
Yer değiştirme büyüklüğünü önceden hesaplamak
- Yer değiştirme büyüklüğü sınırdan olan uzaklığa göre simetrik olduğundan, yarıçap bazında değerler önceden hesaplanıp bir diziye kaydediliyor
- 2D’de yalnızca bir kez (127 ışın simülasyonu) hesap yapılıp, ardından z ekseni etrafında döndürülerek tüm alan oluşturuluyor
Vektör normalizasyonu
Vektörleri displacement map içinde kullanabilmek için normalizasyon (en fazla 1.0 ölçek) uygulanıyor
- En büyük yer değiştirme değeri referans alınarak diğer tüm vektör büyüklükleri buna bölünüyor
const maximumDisplacement = Math.max(...displacementMagnitudes);
displacementVector_normalized = {
angle: normalAtBorder,
magnitude: magnitude / maximumDisplacement,
};
SVG displacement map içinde gerçek piksel cinsinden dönüşüm yapılırken, scale ile yeniden maksimum yer değiştirme değeri çarpılarak özgün büyüklük geri kazanılıyor.
SVG Displacement Map
Matematiksel kırılma hesaplarının sonucunu doğrudan tarayıcı render’ına uygulamak için SVG displacement map kullanılıyor
<feDisplacementMap />içindeki her kanal (RGBA, 8 bit) yer değiştirmenin X ve Y eksenlerini temsil etmek için kullanılabiliyor- Her kanal 0~255 aralığında değer alıyor ve 128 nötr durumu (yer değiştirme yok) ifade ediyor
- displacement map’in mutlaka bir görsele dönüştürülmesi gerekiyor
<svg colorInterpolationFilters="sRGB">
<filter id={id}>
<feImage
href={displacementMapDataUrl}
x={0}
y={0}
width={width}
height={height}
result="displacement_map"
/>
<feDisplacementMap
in="SourceGraphic"
in2="displacement_map"
scale={scale}
xChannelSelector="R"
yChannelSelector="G"
/>
</filter>
</svg>
Scale
Red(X) ve Green(Y) kanal değerleri [−1, 1] aralığına eşleniyor
- scale özelliğiyle piksel cinsinden maksimum yer değiştirme değeri çarpılarak gerçek render elde ediliyor
- scale animasyonlu hale getirilerek efekt şiddeti ayarlanabiliyor
Vektör → Red/Green değeri dönüşümü
- Yer değiştirme vektörü (açı, büyüklük), x ve y Kartezyen koordinatlarına dönüştürüldükten sonra 128 (nötr) merkez alınarak 0~255 aralığına eşleniyor
const x = Math.cos(angle) * magnitude;
const y = Math.sin(angle) * magnitude;
const result = {
r: 128 + x * 127,
g: 128 + y * 127,
b: 128,
a: 255,
};
Ortaya çıkan görsel, SVG filter displacement map olarak kullanılabiliyor.
Playground
Etkileşimli Playground içinde yüzey formu, bezel kalınlığı, cam kalınlığı, effect scale gibi değerler gerçek zamanlı değiştirilebiliyor; böylece kırılma alanı, displacement map ve nihai render’daki farklar doğrudan gözlemlenebiliyor.
Specular Highlight
Son aşamada specular highlight (cam yüzeydeki parlak kenar vurgusu) ekleniyor
- Apple’ın uygulaması rim light (kenar ışığı) yaklaşımına dayanıyor ve parlaklığın şiddeti yüzey normali ile ışık kaynağının açısına göre değişiyor
Kırılma ve Specular Highlight’ı birleştirmek
Nihai SVG filter içinde displacement map ile specular highlight görselleri ayrı ayrı <feImage /> ile yüklenip, ardından <feBlend /> ile birleştirilerek son efekt oluşturuluyor
- Filter parametreleri ayarlanarak farklı görsel sonuçlar elde edilebiliyor
SVG filter’ı backdrop-filter olarak kullanmak
- Liquid Glass efektini gerçek UI bileşenlerine uygulamak için pratikte Chrome’un
backdrop-filter: url(#...)desteği gerekiyor backdrop-filteriçin görsel boyutu otomatik ölçeklenmediğinden, öğe boyutuna uygun bir displacement map hazırlanması şart
.glass-panel {
backdrop-filter: url(#liquidGlassFilterId);
}
Gerçek UI bileşenlerine uygulama
Hesaplanan kırılma ve displacement map temel alınarak daha gerçekçi UI bileşenlerine uygulama örnekleri hazırlanıyor
- Yalnızca Chrome, SVG filter’ı
backdrop-filterolarak işleyebiliyor - Örnekler gerçek üretim bileşenleri değil; amaç Liquid Glass efektinin farklı UI’larda nasıl göründüğünü göstermek
Magnifying Glass
- Her iki tarafta kırılma ve yakınlaştırma için iki ayrı displacement map kullanılıyor
- Gölge ve ölçek ayarıyla etkileşimli bir his veriliyor
- Sürükleyerek mercek deformasyonu yapılabiliyor ve kırılma yolu gözlemlenebiliyor
- Yumuşak bir specular highlight ekleniyor
Searchbox
- Standart giriş kutusu biçimine Liquid Glass efekti uygulanıyor
Switch
- Dış kısım dışbükey, iç kısım içbükey olacak şekilde lip bezel kullanılıyor
- Yalnızca ortadaki slider büyütülmüş/küçültülmüş durumda; kenarlar ise iç görselin kırılmasını gösteriyor
Slider
- Convex bezel kullanılıyor; mevcut değer camın içinden doğrudan gösterilirken, iki yanda arka plan kırılması uygulanıyor
Music Player
-
Apple Music’in Liquid Glass panel stilini taklit ediyor
-
Convex bezel ve hafif specular highlight ile derinlik hissi veriliyor
-
Albüm kapağı, şarkı adı gibi bilgiler iTunes Search API kullanılarak yükleniyor
-
(Liste biçiminde şarkı adları ve albüm bilgileri sunuluyor)
Sonuç
Bu prototip, Apple’ın Liquid Glass fikrini gerçek zamanlı kırılma efekti ve basit vurgularla sadeleştirerek ifade ediyor. Pratikte yalnızca Chromium tabanlı tarayıcılarda (veya Electron’da) çalışabiliyor; diğer tarayıcılarda ise blur katmanıyla ikame edilebiliyor.
Bu deneysel bir uygulama ve şekil/boyut her değiştiğinde displacement map’in yeniden üretilmesi oldukça verimsiz (yalnızca filter scale gibi bazı parametreler animasyonlu yapılabiliyor).
İleride açık kaynak olarak yayımlanması değerlendiriliyor; ayrıca optimizasyon ve kod düzenleme konularına ilgi duyulduğu belirtiliyor.
2 yorum
Web’de gördüklerim arasında liquid glass’a en çok benzeyeni bu.
Hacker News görüşü
backdrop-filterkısıtları nedeniyle). Diğer tarayıcılarda ise yazıyı okumak ya da basit simülasyonları görmek mümkün denmiş. Buna "Tüm ailene utanç olsun!" diye mizahi bir tepki verilmiş.