Oyunlardan web’e taşınan Frosted Glass teknolojisi

 (tyleo.com)
4 puan yazan GN⁺ 2024-11-25 | 1 yorum | WhatsApp'ta paylaş
  • Forza Horizon 3 ve Forza Motorsport 7’nin frosted acrylic UI tasarımından yola çıkarak, web’de de benzer cam panel efektinin HTML/CSS/JavaScript ile nasıl yeniden üretileceği anlatılıyor
  • Efektin merkezinde Gaussian blur bulunuyor; tarayıcılar arasındaki farkları azaltmak için CSS backdrop-filter ile iOS için -webkit-backdrop-filter birlikte kullanılmalı
  • Yalnızca blur kullanmak yüzeyi düz gösterdiğinden, box-shadow: inset ile kenar derinliği ve subsurface scattering ekleniyor; normal gölgeyle de arka planın üzerinde süzülüyormuş hissi veriliyor
  • Yüzey yansımaları, ayrı bir katmanda kullanılan ışık huzmesi görseli ile oluşturuluyor; background-attachment: fixed ya da JavaScript ile camın hareketine uyum sağlayan dinamik yansımalar taklit ediliyor
  • Son UI, .glass, .light, .drag-me katmanlarının birleşimiyle; yuvarlatılmış köşeler, clipping ve yarı saydam arka plan rengi eklenerek kopyalanabilir bir cam bileşeni halinde tamamlanıyor

Oyun UI’ından alınan cam panel efekti

  • Amaç, Forza Horizon 3 ve Forza Motorsport 7 için UI geliştirme deneyiminde görülen frosted acrylic tasarımını HTML ile yeniden üretmek
  • Ortaya çıkan sonuç; sürüklenebilir bir cam panel, arka plan blur’u, kenar derinliği, ışık yansımaları, yuvarlatılmış köşeler ve yarı saydam renk katmanlarını birlikte içeriyor
  • Başta doğrudan kopyalanıp kullanılabilecek nihai tarif veriliyor, ardından her efekt adım adım ekleniyor

Arka plan blur’u için backdrop-filter

  • İyi bir frosted glass efektinin özü, arka planı blur’layarak yarı saydam bir ekran gibi görünmesini sağlayan Gaussian blur
  • CSS’te bu, backdrop-filter üzerine blur uygulanarak yapılıyor
  • Temel cam öğesi, basit bir div ve .glass sınıfıyla başlıyor
    • backdrop-filter: blur(10px)
    • -webkit-backdrop-filter: blur(10px)
  • iOS’ta, daha derin sistem ayarları değiştirilmediği sürece -webkit-backdrop-filter gerekli
  • backdrop-filter için tarayıcı desteği ancak yakın dönemde geldiğinden, Internet Explorer kullanıcıları demoyu deneyimleyemiyor

Kenarlar ve gölgelerle derinlik oluşturmak

  • Yalnızca backdrop-filter: blur(10px) uygulamak, camı düz ve tekdüze gösterebilir
  • Kenarlar border: 1px solid yerine box-shadow: inset ile oluşturuluyor
    • border, öğe boyutunu ve alt öğelerin yerleşimini etkiler
    • box-shadow: inset kullanıldığında, alt öğeler negatif margin gibi ayarlara gerek kalmadan camın içerik alanını doğal biçimde doldurabilir
  • Cam kenarları, yarı saydam beyaz iki inset shadow ile ifade ediliyor
    • İlk shadow, dışarıdan görülen cam kenarını temsil ediyor; örnekte alttaki ve soldaki kenarlarda görünüyor
    • İkinci shadow, camın içinden görülen kenarı temsil ediyor; örnekte üstteki ve sağdaki kenarlarda görünüyor
  • Camın içinden görülen kenarlar, ışık azaldığı için daha yumuşak ve daha saydam ayarlanıyor
  • Normal koyu bir box-shadow eklendiğinde, camın arka plandan fiziksel olarak yükseliyormuş gibi görünmesi sağlanabiliyor

Işık saçılması ve yüzey yansımaları

  • Camın içine ışığın yayıldığı hissi, subsurface scattering basitleştirilerek ifade ediliyor
  • Uygulamada yine box-shadow: inset kullanılıyor
    • Kısa saçılma efekti: inset 0px 0px 10px 5px rgba(255, 255, 255, 0.025)
    • Daha derin saçılma efekti: inset 0px 0px 40px 5px rgba(255, 255, 255, 0.025)
  • Bu efekt, cam koyu bir arka plan üzerine sürüklendiğinde daha belirgin görünüyor
  • Arka planın blur olup kırılıyormuş hissine ek olarak, cam yüzeyindeki ışığın yansıma özelliği de ekleniyor
  • Işık yansıması, arka plana karıştırılan bir ışık huzmesi görseliyle oluşturuluyor
    • Benzer bir görsel üretmek için başvurulabilecek bir YouTube eğitimi ve bir metin anlatımı bulunuyor
    • Görsel doğrudan .glass öğesinin background-image’ine eklenirse backdrop-filter bunu da blur’ladığı için, ::before gibi ayrı bir katman kullanılıyor

Statik yansımayı dinamik hale getirmek

  • Yalnızca ışık huzmesi görselini eklemek yansımayı oluşturur, ancak cam hareket ettiğinde ışığın cam yüzeyine sabitlenmiş gibi görünmesine yol açabilir
  • Saf CSS yaklaşımı, ::before üzerine background-attachment: fixed ekliyor
    • Uygulaması basit, ancak her platformda çalışmayabilir
  • Tüm platformlarda çalışmasını sağlamak için JavaScript ile background-attachment: fixed davranışı taklit ediliyor
    • ::before öğesini JavaScript’ten doğrudan yönetmek verimsiz olduğundan, ayrı bir div.light öğesi kullanılıyor
    • Hedef öğeye data-js-background-attachment-fixed niteliği ekleniyor
  • JavaScript, her animasyon karesinde hedef öğenin getBoundingClientRect() değerini okuyup, görünüm alanındaki konumun ters yönüne doğru background-position değerini güncelliyor
    • backgroundPositionX = -clientRect.x
    • backgroundPositionY = -clientRect.y
  • Tekrarlayan döngü requestAnimationFrame ile çalıştırılıyor

Nihai HTML/CSS yapısı

  • JavaScript sürümünün nihai HTML’i, .glass içinde ışık yansıması için .light ve metin/renk katmanı olarak .drag-me içeren bir yapı

  Drag Me
  • .glass, cam panelin temel biçimini ve görsel efektlerini üstleniyor
    • backdrop-filter ve -webkit-backdrop-filter ile arka plan blur’u uygulanıyor
    • Birden fazla box-shadow ile kenarlar, gölge ve saçılma efektleri veriliyor
    • position: relative sayesinde alt katmanlar ebeveyn alanını doldurabiliyor
    • border-radius: 5px ile yuvarlatılmış köşeler uygulanıyor
    • overflow: hidden ile alt öğelerin yuvarlatılmış köşelerin dışına taşması engelleniyor
  • .light, ışık huzmesi görselini tekrar eden arka plan olarak kullanıyor
    • background-image: url(path/to/light.png)
    • background-repeat: repeat
    • background-size: 750px
    • opacity: 0.075
    • position: absolute ve dört yönde 0 offset ile ebeveynin tamamını kaplıyor
    • z-index: -1 ile diğer alt öğelerin arkasında render ediliyor
  • .drag-me, içeriği ortaya hizalıyor ve renkli yarı saydam cam katmanını oluşturuyor
    • display: flex
    • align-items: center
    • justify-content: center
    • height: 30px
    • background-color: rgba(12, 13, 14, 0.75)

JavaScript olmayan sürümün farkları

  • JavaScript olmayan sürüm, ayrı bir .light öğesi yerine .glass::before kullanıyor
  • ::before üzerine ışık huzmesi görseli uygulanıyor ve background-attachment: fixed ile ekrana sabitlenmiş bir yansıma oluşturuluyor
  • Bu yöntem her platformda çalışmıyor; JavaScript sürümü bunu telafi etmek için background-position değerini doğrudan güncelliyor

İlgili okumalar

1 yorum

 
GN⁺ 2024-11-25
Hacker News yorumları

  • Estetik olarak gerçekten hoşuma gidiyor, ama kenarlarda fiziksel olarak tam oturmayan bazı noktalar var.
    Gömülü geliştirici bakış açısından biraz savurgan geliyor. Her istemci, arka plan görüntüsünün bulanık bir sürümüyle harmanlamak için her seferinde “pahalı” bir blur filtresi hesaplıyor gibi değil mi?
    GPU kullanıldığı ve optimize edildiği için sonuçta büyük bir maliyet olmayabilir; ama günümüzde web geliştirme genel olarak fazla şişkinleşen bir akım gibi görünüyor. Basit siteler bile 5 saniye yükleniyor, ağır işlemler istemciye yıkılıyor; tabii bu yazının yazarının suçu değil.

    • Neyi savurganlık olarak gördüğümüzde herkesin kendi önyargıları var gibi.
      14.4k modem döneminde büyüdüğüm için, ağ bant genişliğinin CPU zamanından çok daha kıt ve pahalı olduğunu düşünmeye alışığım.
      İstemcide kolayca hesaplanabiliyorsa, görüntünün tamamını internet üzerinden indirmek bana daha savurgan geliyor. O görüntüyü almak için yönlendiricileri, sunucuları, uzaktaki diskleri çalıştırıyorsunuz; sırf zaten istemci RAM’inde bulunan veriye bir kez işlem yapmaktan kaçınmak için tüm bunları kullanmak daha yazık.
    • Teknik olarak bir açıdan “savurgan” olan web siteleri bile, gerçek kullanım alanlarına bakınca büyük ölçekte çoğunlukla saf eğlence için kullanılıyor.
      Dolayısıyla ya eğlencenin kendisi savurganlıktır ya da değilse, eğlenceyi daha iyi hale getirmek için biraz daha hesaplama kullanmak da sorun değildir.
    • İnsan gözüyle bakınca “render edilmiş grafiği büyük ölçüde yeniden hesaplamak” gibi görünüp savurgan hissettirebilir, ama teknik olarak bunun mutlaka böyle olduğunu sanmıyorum.
      UI’da değişen şeyleri yeniden çizmek için zaten GPU hesaplaması gerekir ve basit bir blur oldukça verimli biçimde eklenebilir. GPU katmanı olarak optimize edilmemiş DOM nesnesi animasyonlarından daha düşük maliyetli olması muhtemel.
      Günümüzde en basit sitelerin bile 1MB’den fazla JavaScript ve bir sürü izleyici yükleyip CPU tükettiğini düşününce, estetik efekt amaçlı blur savurganlık listesinin epey altlarında kalır.
    • Bulanık görüntüyle orijinal görüntüyü ikisini birden ağ üzerinden göndermek, son 20 yıldır web geliştirmede yapılan şey değil miydi?
      Yüksek çözünürlüklü görüntü çoksa, gerçek ağ bant genişliği sınırlı olduğundan ve özellikle kablosuz kapsamanın kötü olduğu mobil ortamlarda, bu yöntem yerel hesaplamaya göre kesinlikle daha düşük performans verir. Bugün CSS/WebGL ile yapılabilenler şaşırtıcı; eskiden bu tür efektler için çok hack ve geçici çözüm gerekirdi.
    • Artık “Aa harika görünüyor, kesin bana/bize lazım” türü teknolojilerin önemli bir kısmının bu dünyada yeri olmadığını ciddiyetle kabullenme zamanı geldi bence.
      Eylemin kendisinin savurgan olup olmamasından bağımsız olarak, bu düşünme biçiminin kendisi toplumdaki daha büyük bir sorunu gösteriyor. Buna neden ihtiyaç var ve bunun olmadığı durumu neden kötü görüyoruz?
      Günümüzde toplumsal sorunların ölçeğini düşününce, UI panelinin bulanık olup olmamasını kim umursar ki?

  • Android’de yeni shader API’siyle neler yapılabileceğini görmek için Windows 7 Aero Glass efektini yeniden oluşturmaya çalışırken benzer bir “ışık çizgileri” dokusu çıkarmıştım.
    Sonuç olarak bu yazıdakine çok benzer oldu; yalnızca iç gölge eklemedim ve bulanık arka planın doygunluğunu biraz artırdım.
    https://mastodon.social/@grishka/110524476584503201

    • Çok havalı. Işık çizgileri dokusu bu efektte gerçekten büyük rol oynayabilir.
      Açıkçası eğitim için hazırlanan örnek o kadar da mükemmel değil. Windows 7 tarafındaki daha belirgin çizgileri daha çok seviyorum.
      Doygunluk ayarlamasını ben de düşündüm ve başka örneklerde de gördüm, ama yazıda kullanmamaya karar verdim. Kullandığım ay görüntüsünde fazla renk olmadığı için büyük fark yaratmayacaktı. Kendi cam efektini yapanların doygunluğu da denemesi iyi olur.

  • Yapılan işin kendisi harika, etkileşimli demo olarak sunulma biçimi de iyi. Pencereyi ayın üzerine sürüklemek eğlenceli.
    Yine de kullanıcı arayüzü tasarımında buzlu cam efekti kullanılmasını sevmiyorum; Mac OS’ye eklendiğinde bunun bir geri adım olduğunu hissetmiştim. Tasarımcılar bu efekte çok kolay kapılıyor, ama gerçekte asla ideal değil. Özellikle panelin arkasındaki içerik dinamikse ya da kullanıcı tarafından oluşturulmuşsa.
    2010’ların brushed metal’i gibi; Windows Vista’dan sızıp her yere yayılmış olması şaşırtıcı.

    • Neden “ideal” olmadığını anlamıyorum. Görsel tasarımda, pratik amaçlardan çok neyin güzel göründüğüne dair kişisel zevk büyük rol oynar.
      Elbette tasarım işlevi de etkiler, ama temel amacı kullanıcı deneyimini daha keyifli hale getirmektir.
      Skeuomorphism’in, son 10 yılı aşkın süredir süren her şeyi dümdüzleştiren minimalist eğilimden daha keyifli arayüzler ürettiğini düşünüyorum. Gerçek dünyadaki yüzey ve malzemeleri taklit eden görsel süslemeler aşinalık ve erişilebilirlik katar. Pratik açıdan da flat design, öğeleri ve durumları ayırt etmeyi zorlaştırırken; 3D düğmelerin, brushed metal’in ve buzlu camın olduğu dönemde işler çok daha belirgindi.
      Bence şimdi sarkaç yeniden geri dönüyor. Daha fazla tasarımcı düz görünümden kaçındığına göre, daha insan dostu UI’ların geri dönmesini umuyorum.
    • UI tasarımcısı değilim, o yüzden gerçekten sormak istiyorum: Sorun buzlu cam ya da brushed metal gibi estetik efektleri UI tasarımında kullanmanın kendisi mi, yoksa böyle arayüzler yapmaya çalışırken bazı tasarımcıların kontrollerin konumunu ve işlevini gösteren görsel ipuçlarını kaybetmesi mi?
    • Terminal pencereme yıllardır biraz saydamlık veriyorum; şimdi bunu yeniden düşünmem gerekecek.
    • Brushed metal bilgi bağlamını etkilemez. Blur ise ayarlanabilir bağlam sağlar.
      Blur genelde doğru cevap değildir, ama bazen doğru tercihtir.
    • İronik biçimde önceki macOS sürümleri de brushed metal’i çok kullanıyordu.

  • 2008’de CSS backdrop-blur desteği sunmadan önce, benzer bir etki üretmeye yönelik bir CSS denemem olmuştu: https://webdev.andersriggelsen.dk/aero/
    Sabit konumlu, önceden bulanıklaştırılmış bir arka plan görseline cam efekti uygulayan bir yöntemdi: https://webdev.andersriggelsen.dk/aero/bgl.jpg
    Gerçek zamanlı Gaussian blur’dan çok daha performanslıydı, ancak dinamik arka plan görsellerine izin vermemesi dezavantajı aynen duruyordu

    • Daha erken bir dönemde arka plan olarak Flash dosyası kullanıp bunu bir adım ileri taşımıştım
      Dinamik olarak hareket edebilen bir çerçevenin içinde bile cam efekti verebiliyordu. iframe kullanıp kullanmadığımı hatırlamıyorum; kodu bulup bakmam gerekir ama o dönemi düşününce muhtemelen kullanmışımdır
    • Yüzen pencere, ilk konumundan sonra güncellenmiyor
      Windows 10 19045.5131 kullanıyorum, Chrome da en güncel Version 131.0.6778.86 (Official Build) (64-bit)

  • Teknik başarı etkileyici, ama bunun kötü UX olduğunu düşünüyorum
    Yarı saydam bir panelin içindeki içerik, tutarlı tek renkli bir arka plan üzerindekine göre daha zor okunuyor ve anlaşılıyor; arka planla kontrastı düşük ve düzensiz. Üstelik altta bir şey hareket ederse dikkat dağıtıcı olabilir ve yön hissini bozabilir

    • Tek bir görsel efekt üzerinden “kötü UX” diye genelleme yapmak zor. Büyük ölçüde nasıl entegre edildiğine bağlı
      İyi bir entegrasyonda, UI’ı aşırıya kaçırmamak için efektin şiddeti ayarlanmalı; blur desteklenmediğinde ek süslemelerden kaçınmak için özellik desteği kontrol edilmeli; GPU’su yeterli olmayabilecek cihazlarda render etmemek için ekran ve video yetenekleri denetlenmeli
      Ayrıca kullanıcı tercihleri kontrol edilerek karmaşık arka planlarda zorlanan kullanıcılara yüksek kontrastlı düz renk sunulmalı; kullanılabilir alana göre efekt ve gölge kapsamı sınırlandırılmalı; bulanık alanın altındaki arka planın karmaşıklığı ve kontrastı dikkate alınarak blur ve opaklık ayarlanmalı
      Blur ve gölgelerin tipografiye göre uyarlanabilir biçimde ölçeklendiğinden emin olmak da gerekir. UX, özünde kullanıcının uygulamanın tamamıyla etkileşimini nasıl deneyimlediğinin tasarımıdır; tek bir stil tercihinin tek başına başarıyı ya da başarısızlığı belirlediği bir şey değildir
    • Windows Vista bu sorunu, buzlu cam üzerindeki siyah yazılara beyaz gölge benzeri bir dış hat vererek çözüyordu
      Arka planın siyah olduğu uç durumlarda bile metin okunabilirliğini garanti ediyordu. CSS’te text-shadow özelliğiyle yeniden üretilebilir
    • Bu yüzden bu efekti sitemin genelinde kullanmıyorum. İyi UX üretmeyi zorlaştırdığı için
      Ama oyunlarda daha fazla kullanım alanı var. Özellikle kullanıcının etkileştiği ana alan olan arka planı kapatmak istemediğiniz HUD’larda uygun olabilir
    • Sorun düşük kontrastsa arka planı ya da cam tonunu daha koyu yapıp ön plan içeriğini daha açık yapabilirsiniz; ya da tersini
      İyi kontrast, düz renk de olsa cam efekti de olsa her tasarım öğesinde bir zorluktur
      Arka planda olanların dikkat dağıtıcı ve yön hissini bozucu olması da son derece öznel. Düz bir rengin opaklığını düşürebildiğiniz gibi camın yarı saydamlığını da düşürebilirsiniz
      Bu eleştirinin nesnel olarak doğru olduğunu söylemek zor; bu sorunlardan kaçınarak bu tasarım öğesini entegre etmenin yolları var. Forza ekran görüntüsü iyi görünüyor, gerçek kullanımda da arka plan dikkat dağıtmıyordu. Bunun yerine düz renkli arka plandan daha ilginç ve görsel olarak daha keyifli bir UI elde ediyorsunuz. Video oyunlarında daha önemli olabilir, ama işletim sistemi ve web tasarımında da incelikli biçimde kullanılabilir
    • Blur, bağlamı kontrol edilebilir ölçüde korurken bilgiyi gizleme yöntemidir
      Çok fazla bağlam gerekiyorsa blur iyi bir seçim değildir; hiç bağlam gerekmiyorsa da iyi bir seçim değildir
      Ama bazı durumlarda harika bir seçim olur

  • Etkileşimli örnekler güzel, ama önceki adımla yan yana karşılaştırma yapmaya ya da geçiş yapmaya yarayan bir toggle olsaydı daha iyi olurdu
    Çoğu adımda iyileştirmeler o kadar incelikliydi ki farkı anlamak zordu

    • Katılıyorum. Mobilde ikinci aşamadan sonra fark ya neredeyse görünmüyor ya da hiç anlaşılmıyor

  • Yaklaşık 10 efekt üst üste bindirilmiş; en zorlayıcı estetiği hedeflemiyorsanız yaklaşık 7 tanesi fazla
    Arka plan rengi, blur, gölge ya da kenarlık yeterli olur

    • Daha hafif bir cam efekti isteyenler eğitimden istediklerini seçip kullanabilir
      Üçüncü adıma gelindiğinde bile yalnızca blur ve gölgeyle oldukça iyi bir cam parçası ortaya çıkıyor. Kişisel olarak buna statik bir ışık huzmesi görseli eklemeyi öneririm. Çoğu uygulamada tam JavaScript efektine gerek olacağını sanmıyorum. Eğlenceli ama dikkat dağıtıcı olabilir
      Sadece blur, gölge ve ışık huzmesiyle bile en üstteki Forza görseline gerçekten çok yaklaşılabilir
    • Üst yorumların çoğunun israftan bahsetmesi ilginç
      Herkesin flat design’a yönelmesinin nedenlerinden birinin bu olduğunu düşünüyorum. Windows Vista ve cam efekti güzeldi ama hesaplama maliyeti yüksekti
      Flat design estetik açıdan tartışmalı ve özellikle yaşlı kullanıcılar için skeuomorphic tasarıma göre kullanımı daha zor olabilir [0][1]
      Gerçekçilik kullanılabilirliğe yardımcı olabiliyorsa, bu tür efektleri web’de kullanmak gayet makul bence
      [0]: https://www.tandfonline.com/doi/abs/10.1080/0144929X.2020.18...
      [1]: https://www.sciencedirect.com/science/article/abs/pii/S01419...
    • Üst üste bindirilen efektlerin sınırını neden n <= 3 olarak gördüğünüzü merak ediyorum
      Erişilebilirlik sorunu mu, performans sorunu mu, bakım kolaylığı sorunu mu, yoksa başka bir neden mi bilmiyorum
      Geliştirme becerilerim içinde CSS açık ara en zayıf olanı; bu yüzden iyi uygulamaları ve kötü örnekleri hiç bilmiyorum
    • Yazarın en zorlayıcı estetiği hedeflediğini açıkladığı kısmı kaçırmış olabilir misiniz?

  • Tam bir döngünün tamamlanmış gibi hissettirmesi ilginç
    İlk CSS demolarından biri, CSS 1 için hazırlanmış bir demo buzlu cam efektiydi: https://meyerweb.com/eric/css/edge/complexspiral/glassy.html

  • Açıkçası oldukça etkileyici. CSS’in ne kadar yaratıcı ve güçlü olabildiğini görmek her zaman keyifli.
    Ama HTML/CSS’te sanki sonsuza dek anlayamayacağım bir seviye varmış gibi geliyor. Bu demo tam da öyle; bu kişi buzlu cam yapıyor, ben hâlâ tek bir divi ortalayamıyorum.

    • Web geliştirmenin nasıl işlediğini öğrenirken, bir div daha eklemenin çoğu zaman iyi bir fikir olduğunu zor yoldan öğrendim.
      Modern web sitelerinin çoğuna bakınca divlerin dev bir yığın gibi üst üste dizildiğini görüyorsunuz. Ortalanmış bir div istiyorsanız, içinde ortalayacağınız tüm alanı kaplayan bir div daha oluşturmak nispeten kolaylaştırıyor.
      Pek çok görsel numara da buna benziyor, ama bu örnek çok temiz olduğu için daha da etkileyici.

  • Tam olarak buzlu cam değil ama https://www.gyan.dev/ffmpeg/builds/ sitesinin yan çubuğuna bir cam efekti eklemeyi denedim.

    • PC’de bakınca site çok rahat ve güzel görünüyor.