Tarayıcıda Liquid Glass uygulaması: CSS ve SVG ile ışığın kırılması

 (kube.io)
5 puan yazan GN⁺ 2025-09-09 | Henüz yorum yok. | WhatsApp'ta paylaş
  • 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-filter iç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-filter olarak 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.

İlgili okumalar

Henüz yorum yok.

Henüz yorum yok.