Teknologi Frosted Glass yang Meluas dari Game ke Web

 (tyleo.com)
4 poin oleh GN⁺ 2024-11-25 | 1 komentar | Bagikan ke WhatsApp
  • Berawal dari UI akrilik buram di Forza Horizon 3 dan Forza Motorsport 7, artikel ini merangkum proses mereplikasi efek panel kaca serupa di web dengan HTML/CSS/JavaScript
  • Inti efeknya adalah Gaussian blur, dan untuk mengurangi perbedaan antar-browser perlu memakai CSS backdrop-filter bersama -webkit-backdrop-filter untuk iOS
  • Karena blur saja terlihat datar, kedalaman tepi dan subsurface scattering ditambahkan dengan box-shadow: inset, lalu bayangan biasa dipakai untuk memberi kesan melayang di atas latar
  • Refleksi permukaan dibuat dengan gambar berkas cahaya pada layer terpisah, lalu meniru pantulan dinamis yang mengikuti perpindahan kaca dengan background-attachment: fixed atau JavaScript
  • UI akhir disusun dari layer .glass, .light, dan .drag-me, lalu dilengkapi sudut membulat, clipping, dan warna latar semi-transparan hingga menjadi komponen kaca yang siap disalin

Efek panel kaca yang dibawa dari UI game

  • Tujuannya adalah mereproduksi desain akrilik buram yang dilihat dari pengalaman pengembangan UI Forza Horizon 3 dan Forza Motorsport 7 ke dalam HTML
  • Hasil akhirnya adalah panel kaca yang bisa di-drag, lengkap dengan blur latar, kedalaman tepi, pantulan cahaya, sudut membulat, dan layer warna semi-transparan
  • Di awal disediakan resep akhir yang bisa langsung disalin pakai, lalu setelah itu tiap efek dibangun bertahap

backdrop-filter untuk membuat blur latar

  • Kunci efek frosted glass yang bagus adalah Gaussian blur yang memburamkan latar sehingga terlihat seperti layar semi-transparan
  • Di CSS, ini diimplementasikan dengan menerapkan blur pada backdrop-filter
  • Elemen kaca dasar dimulai dari div sederhana dan kelas .glass
    • backdrop-filter: blur(10px)
    • -webkit-backdrop-filter: blur(10px)
  • Di iOS, -webkit-backdrop-filter tetap diperlukan kecuali melakukan perubahan pengaturan yang cukup dalam
  • Karena dukungan browser untuk backdrop-filter baru tersedia belakangan ini, pengguna Internet Explorer tidak bisa mencoba demo tersebut

Membuat kedalaman dengan tepi dan bayangan

  • Jika hanya menerapkan backdrop-filter: blur(10px), kaca bisa terlihat datar dan monoton
  • Tepi dibuat dengan box-shadow: inset alih-alih border: 1px solid
    • border memengaruhi ukuran elemen dan penempatan elemen anak
    • Dengan box-shadow: inset, elemen anak bisa mengisi area konten kaca secara natural tanpa penyesuaian seperti margin negatif
  • Dua inset shadow putih semi-transparan dipakai untuk mengekspresikan tepi kaca
    • Shadow pertama menunjukkan sudut kaca yang terlihat dari luar, dalam contoh muncul di tepi bawah dan kiri
    • Shadow kedua menunjukkan tepi yang terlihat menembus kaca, dalam contoh muncul di tepi atas dan kanan
  • Tepi yang terlihat melalui kaca dibuat lebih lembut dan transparan karena cahayanya berkurang
  • Dengan menambahkan box-shadow gelap biasa, kaca bisa terasa melayang secara fisik dari latar

Hamburan cahaya dan refleksi permukaan

  • Kesan cahaya yang menyebar di dalam kaca diungkapkan sebagai penyederhanaan dari subsurface scattering
  • Implementasinya kembali memakai box-shadow: inset
    • Efek hamburan pendek: inset 0px 0px 10px 5px rgba(255, 255, 255, 0.025)
    • Efek hamburan lebih dalam: inset 0px 0px 40px 5px rgba(255, 255, 255, 0.025)
  • Efek ini lebih terlihat saat kaca di-drag di atas latar gelap
  • Selain sensasi latar yang blur dan tampak membiaskan, ditambahkan juga sifat cahaya yang terpantul di permukaan kaca
  • Pantulan cahaya dibuat dengan mencampurkan gambar berkas cahaya sebagai latar
    • Ada tutorial YouTube dan penjelasan teks yang bisa dijadikan referensi saat membuat gambar serupa sendiri
    • Jika gambar langsung dimasukkan sebagai background-image pada elemen .glass, backdrop-filter akan memburamkannya, jadi perlu layer terpisah seperti ::before

Mengubah refleksi statis menjadi dinamis

  • Jika hanya menaruh gambar berkas cahaya, refleksi memang muncul, tetapi saat kaca dipindahkan cahaya bisa terlihat menempel tetap di permukaan kaca
  • Cara CSS murni adalah menambahkan background-attachment: fixed ke ::before
    • Implementasinya sederhana, tetapi bisa jadi tidak berjalan di semua platform
  • Agar bekerja di semua platform, background-attachment: fixed ditiru dengan JavaScript
    • Karena menangani ::before langsung dari JavaScript tidak efisien, dipakai elemen div.light terpisah
    • Pada elemen target ditambahkan atribut data-js-background-attachment-fixed
  • Pada setiap frame animasi, JavaScript membaca nilai getBoundingClientRect() elemen target lalu memperbarui background-position ke arah berlawanan dengan posisi di viewport
    • backgroundPositionX = -clientRect.x
    • backgroundPositionY = -clientRect.y
  • Loop berulang dijalankan dengan requestAnimationFrame

Struktur HTML/CSS akhir

  • HTML akhir versi JavaScript memiliki struktur yang menempatkan .light untuk pantulan cahaya dan .drag-me untuk layer teks/warna di dalam .glass

  Drag Me
  • .glass bertugas menangani bentuk dasar dan efek visual panel kaca
    • Menerapkan blur latar dengan backdrop-filter dan -webkit-backdrop-filter
    • Menerapkan tepi, bayangan, dan efek hamburan dengan beberapa box-shadow
    • Menggunakan position: relative agar layer anak bisa mengisi area induk
    • Menerapkan sudut membulat dengan border-radius: 5px
    • Memotong elemen anak agar tidak keluar dari sudut membulat dengan overflow: hidden
  • .light memakai gambar berkas cahaya sebagai latar berulang
    • background-image: url(path/to/light.png)
    • background-repeat: repeat
    • background-size: 750px
    • opacity: 0.075
    • Mengisi seluruh area induk dengan position: absolute dan offset empat arah 0
    • Dirender di belakang elemen anak lain dengan z-index: -1
  • .drag-me meratakan konten ke tengah dan membentuk layer kaca semi-transparan berwarna
    • display: flex
    • align-items: center
    • justify-content: center
    • height: 30px
    • background-color: rgba(12, 13, 14, 0.75)

Perbedaan versi tanpa JavaScript

  • Versi tanpa JavaScript memakai .glass::before alih-alih elemen .light terpisah
  • Pada ::before, gambar berkas cahaya diterapkan dan refleksi yang terkunci pada layar dibuat dengan background-attachment: fixed
  • Cara ini tidak berjalan di semua platform, dan versi JavaScript melengkapinya dengan memperbarui background-position secara langsung

Bacaan terkait

1 komentar

 
GN⁺ 2024-11-25
Komentar Hacker News

  • Secara estetika saya sangat menyukainya, tetapi ada bagian di tepinya yang secara fisik terasa tidak pas.
    Dari sudut pandang developer embedded, ini terasa agak boros. Rasanya seperti setiap klien harus menghitung filter blur yang “mahal” setiap kali untuk mencampurkannya dengan versi buram dari gambar latar.
    Karena memakai GPU dan sudah dioptimalkan, pada akhirnya biayanya mungkin tidak besar, tetapi pengembangan web sekarang secara umum terlihat makin membengkak. Bahkan situs sederhana pun bisa loading 5 detik, dan pemrosesan berat dilempar ke klien; tentu saja ini bukan salah penulis artikel ini.

    • Sepertinya tiap orang punya prasangka sendiri soal apa yang dianggap boros.
      Saya tumbuh di era modem 14.4k, jadi terbiasa berpikir bahwa bandwidth jaringan jauh lebih langka dan mahal daripada waktu CPU.
      Jika bisa dihitung dengan mudah di klien, menurut saya mengunduh seluruh gambar lewat internet justru lebih boros. Untuk menerima gambar itu, router, server, sampai disk yang jauh harus bekerja; rasanya lebih sayang memakai semua itu hanya demi menghindari satu kali pemrosesan atas data yang sudah ada di RAM klien.
    • Situs web yang secara teknis “boros” dalam beberapa hal pun, kalau dilihat dari penggunaan nyatanya, dalam gambaran besar kebanyakan dipakai untuk hiburan murni.
      Jadi entah hiburan itu sendiri boros, atau kalau tidak, memakai komputasi tambahan untuk membuat hiburan lebih baik juga menurut saya tidak masalah.
    • Dari sudut pandang manusia, ini terlihat seperti “menghitung ulang grafis yang sudah dirender secara besar-besaran” sehingga terasa boros, tetapi secara teknis belum tentu begitu.
      Untuk menggambar ulang hal yang berubah di UI, perhitungan GPU tetap diperlukan, dan blur sederhana bisa ditambahkan dengan cukup efisien. Biayanya kemungkinan lebih rendah daripada animasi objek DOM yang tidak dioptimalkan sebagai layer GPU.
      Melihat situs paling sederhana masa kini pun memuat JavaScript lebih dari 1 MB dan banyak tracker yang memakan CPU, blur untuk efek estetis menurut saya berada jauh di bawah dalam daftar pemborosan.
    • Bukankah mengirim gambar yang sudah diblur dan gambar asli sekaligus lewat jaringan adalah cara yang dilakukan pengembangan web selama 20 tahun terakhir?
      Jika ada banyak gambar resolusi tinggi, bandwidth jaringan nyata itu terbatas, dan terutama di lingkungan mobile dengan cakupan nirkabel yang buruk, performanya jelas lebih buruk daripada komputasi lokal. Sekarang mengagumkan bahwa hal seperti ini bisa dilakukan hanya dengan CSS/WebGL; dulu efek seperti ini membutuhkan banyak hack dan jalan memutar.
    • Rasanya sekarang saatnya menerima dengan serius bahwa banyak teknologi semacam “oh kelihatannya keren, pasti saya/kami membutuhkannya” tidak punya tempat di dunia ini.
      Terlepas dari apakah tindakannya sendiri boros atau tidak, pola pikir seperti ini menunjukkan masalah yang lebih besar dalam masyarakat. Mengapa ini dibutuhkan, dan mengapa ketiadaannya dianggap buruk?
      Mengingat skala masalah sosial saat ini, siapa yang peduli apakah panel UI diblur atau tidak?

  • Saat mencoba melihat apa yang bisa dilakukan dengan API shader baru di Android, saya pernah mereproduksi efek Windows 7 Aero Glass dan mengekstrak tekstur “garis cahaya” yang mirip.
    Hasilnya sangat mirip dengan artikel ini, hanya saja saya tidak menambahkan bayangan dalam, dan saturasi latar buramnya sedikit saya naikkan.
    https://mastodon.social/@grishka/110524476584503201

    • Sangat keren. Tekstur garis cahaya memang bisa berperan besar dalam efek ini.
      Sejujurnya, yang dibuat untuk tutorial tidak terlalu bagus. Saya lebih suka garis yang lebih jelas di versi Windows 7.
      Saya juga memikirkan penyesuaian saturasi dan melihatnya di contoh lain, tetapi memutuskan untuk tidak memakainya di artikel. Gambar bulan yang digunakan tidak punya banyak warna, jadi mungkin tidak akan membuat perbedaan besar. Orang yang membuat efek kaca sendiri sebaiknya juga bereksperimen dengan saturasi.

  • Pekerjaannya sendiri luar biasa, dan cara menampilkannya sebagai demo interaktif juga bagus. Menyenangkan menyeret jendela ke atas bulan.
    Namun saya tidak suka penggunaan efek kaca buram dalam desain antarmuka pengguna, dan ketika ditambahkan ke Mac OS saya merasa itu sebuah kemunduran. Desainer terlalu mudah terpikat oleh efek ini, tetapi dalam praktiknya ini sama sekali tidak ideal. Terutama ketika konten di balik panel bersifat dinamis atau dibuat oleh pengguna.
    Ini seperti brushed metal era 2010-an, dan mengejutkan bahwa ia bocor dari Windows Vista lalu menyebar ke mana-mana.

    • Saya tidak mengerti mengapa itu “tidak ideal”. Dalam desain visual, selera pribadi soal apa yang terlihat bagus lebih berperan besar daripada tujuan praktis.
      Tentu saja desain juga memengaruhi fungsi, tetapi tujuan utamanya adalah membuat pengalaman pengguna lebih menyenangkan.
      Menurut saya skeuomorphism membuat antarmuka lebih menyenangkan daripada tren minimalis yang meratakan semuanya selama lebih dari satu dekade terakhir. Ornamen visual yang meniru permukaan dan material dunia nyata menambahkan rasa akrab dan aksesibilitas. Secara praktis pun, flat design membuat elemen dan status lebih sulit dibedakan, sedangkan pada masa tombol 3D, brushed metal, dan kaca buram, semuanya jauh lebih jelas.
      Saya rasa bandul kini sedang bergerak kembali. Semakin banyak desainer menghindari tampilan datar, jadi saya berharap UI yang lebih ramah manusia akan bangkit kembali.
    • Saya bukan desainer UI, jadi saya ingin bertanya serius: apakah masalahnya adalah penggunaan efek estetis seperti kaca buram atau brushed metal dalam desain UI itu sendiri, atau masalahnya adalah ketika sebagian desainer mencoba membuat antarmuka seperti itu lalu kehilangan petunjuk visual yang memberi tahu posisi dan peran kontrol?
    • Saya sudah bertahun-tahun menambahkan sedikit transparansi pada jendela terminal, dan sekarang jadi memikirkannya ulang.
    • Brushed metal tidak memengaruhi konteks informasi. Blur menyediakan konteks yang dapat disesuaikan.
      Blur biasanya bukan jawaban yang tepat, tetapi sesekali memang pilihan yang benar.
    • Ironisnya, versi macOS sebelumnya juga banyak memakai brushed metal.

  • Pada 2008, sebelum CSS mendukung backdrop-blur, pernah ada eksperimen CSS untuk membuat efek serupa: https://webdev.andersriggelsen.dk/aero/
    Caranya adalah menerapkan efek kaca pada gambar latar yang posisinya tetap dan sudah diburamkan sebelumnya: https://webdev.andersriggelsen.dk/aero/bgl.jpg
    Performanya jauh lebih baik daripada Gaussian blur real-time, tetapi kelemahannya tetap sama: tidak bisa mengizinkan gambar latar dinamis

    • Lebih awal lagi, pernah melangkah lebih jauh dengan memakai file Flash sebagai latar
      Efek kaca bisa dibuat bahkan di dalam frame yang bergerak dinamis. Saya tidak ingat apakah memakai iframe, jadi harus mencari kodenya, tetapi mengingat zamannya, kemungkinan besar memang memakainya
    • Jendela mengambang tidak diperbarui setelah posisi awal
      Saya memakai Windows 10 19045.5131, dan Chrome versi terbaru Version 131.0.6778.86 (Official Build) (64-bit)

  • Pencapaian teknisnya keren, tetapi menurut saya ini UX yang buruk
    Konten di dalam panel transparan lebih sulit dibaca atau dipahami dibandingkan di atas latar warna solid yang konsisten, dengan kontras terhadap latar yang rendah dan tidak merata. Selain itu, jika ada sesuatu bergerak di bawahnya, itu bisa mengganggu dan membuat orientasi terasa membingungkan

    • Sulit menggeneralisasi satu efek visual sederhana sebagai “UX buruk”. Sangat bergantung pada cara integrasinya
      Integrasi yang baik harus mengatur intensitas efek agar UI tidak berlebihan, memeriksa dukungan fitur agar tidak menambahkan dekorasi ekstra saat blur tidak didukung, serta memeriksa kemampuan display dan video agar tidak merendernya di perangkat yang kemungkinan GPU-nya tidak memadai
      Selain itu, perlu memeriksa preferensi pengguna untuk menyediakan warna solid berkontras tinggi bagi pengguna yang kesulitan dengan latar kompleks, membatasi jangkauan efek dan bayangan sesuai ruang yang tersedia, serta menyesuaikan blur dan opasitas dengan mempertimbangkan kompleksitas dan kontras latar di bawah area buram
      Perlu juga memastikan blur dan bayangan diskalakan secara adaptif sesuai tipografi. UX pada dasarnya adalah desain tentang bagaimana pengguna mengalami interaksi dengan keseluruhan aplikasi, bukan sesuatu yang berhasil atau gagal hanya karena satu pilihan gaya individual
    • Windows Vista menyelesaikan masalah ini dengan memberi outline seperti bayangan putih pada teks hitam di atas kaca buram
      Ini menjamin keterbacaan teks bahkan dalam kasus ekstrem ketika latarnya hitam. Di CSS, ini bisa direproduksi dengan properti text-shadow
    • Karena itu saya tidak memakai efek ini di seluruh situs saya. Sebab membuat UX yang baik jadi lebih sulit
      Namun di game, ada lebih banyak tempat untuk memakainya. Terutama pada HUD, saat Anda tidak ingin menutupi latar yang merupakan area utama tempat pengguna berinteraksi
    • Jika masalahnya kontras rendah, cukup buat latar atau tint kaca lebih gelap dan konten latar depan lebih terang, atau sebaliknya
      Kontras yang baik adalah tantangan pada elemen desain apa pun, baik warna solid maupun efek kaca
      Bahwa hal yang terjadi di latar mengganggu dan membuat orientasi membingungkan juga sangat subjektif. Seperti menurunkan opasitas warna solid, transparansi kaca juga bisa diturunkan
      Kritik ini sulit dianggap benar secara objektif, dan ada cara untuk mengintegrasikan elemen desain ini sambil menghindari masalah tersebut. Screenshot Forza terlihat baik-baik saja, dan saat dilihat langsung pun latarnya tidak mengganggu. Sebagai gantinya, UI menjadi lebih menarik dan menyenangkan secara visual dibandingkan latar solid. Ini mungkin lebih penting di video game, tetapi juga bisa dipakai dengan elegan dalam desain OS dan web
    • Blur adalah cara menyembunyikan informasi sambil mempertahankan konteks sejauh yang bisa dikendalikan
      Jika membutuhkan banyak konteks, blur bukan pilihan yang baik; jika sama sekali tidak membutuhkan konteks, blur juga bukan pilihan yang baik
      Namun pada situasi tertentu, ini menjadi pilihan yang sangat bagus

  • Contoh interaktifnya bagus, tetapi akan lebih baik jika ada toggle untuk membandingkan berdampingan dengan tahap sebelumnya atau beralih di antaranya
    Pada sebagian besar tahap, peningkatannya terlalu halus sehingga sulit melihat perbedaannya

    • Setuju. Di mobile, setelah tahap kedua perbedaannya hampir tidak terlihat, atau bahkan sama sekali tidak jelas

  • Ada sekitar 10 efek yang ditumpuk, dan kecuali memang mengejar estetika yang paling rumit, sekitar 7 di antaranya berlebihan
    Cukup gunakan warna latar, blur, dan mungkin bayangan atau border

    • Orang yang menginginkan efek kaca yang lebih ringan bisa memilih bagian yang mereka butuhkan dari tutorial
      Bahkan pada tahap ketiga saja, hanya dengan blur dan bayangan sudah menghasilkan potongan kaca yang cukup bagus. Secara pribadi, saya menyarankan menambahkan gambar berkas cahaya statis ke sana. Saya rasa sebagian besar aplikasi tidak membutuhkan efek JavaScript penuh. Itu memang menyenangkan, tetapi bisa mengganggu
      Dengan blur, bayangan, dan berkas cahaya saja, hasilnya bisa sangat mendekati gambar Forza di bagian atas
    • Menarik bahwa sebagian besar komentar teratas membicarakan pemborosan
      Menurut saya, itu salah satu alasan semua orang beralih ke flat design. Windows Vista dan efek kaca memang keren, tetapi biaya komputasinya besar
      Flat design secara estetika bisa diperdebatkan, dan khususnya bagi pengguna yang lebih tua, bisa lebih sulit dipakai daripada desain skeuomorfik [0][1]
      Jika kesan realistis bisa membantu kegunaan, menurut saya memakai efek seperti ini di web sangat masuk akal
      [0]: https://www.tandfonline.com/doi/abs/10.1080/0144929X.2020.18...
      [1]: https://www.sciencedirect.com/science/article/abs/pii/S01419...
    • Saya penasaran mengapa batas efek yang ditumpuk dianggap n <= 3
      Entah apakah alasannya aksesibilitas, performa, pemeliharaan, atau alasan lain
      Di antara kemampuan pengembangan saya, CSS adalah yang paling lemah sejauh ini, jadi saya sama sekali belum tahu praktik baik dan buruknya
    • Bukankah Anda melewatkan bagian ketika penulis menjelaskan bahwa ia memang menargetkan estetika yang paling rumit?

  • Menarik karena rasanya seperti kembali penuh satu putaran
    Salah satu demo CSS awal, demo untuk CSS 1, adalah efek kaca buram: https://meyerweb.com/eric/css/edge/complexspiral/glassy.html

  • Sejujurnya cukup mengesankan. Selalu menyenangkan melihat betapa kreatif dan kuatnya CSS bisa digunakan
    Namun rasanya ada tingkatan tertentu dalam HTML/CSS yang selamanya tidak akan saya pahami. Demo ini persis seperti itu; orang ini sedang membuat jendela buram seperti berembun, sementara saya masih belum bisa menengahkan satu div

    • Saat dulu mempelajari cara kerja pengembangan web, saya belajar dengan susah payah bahwa menambahkan satu div lagi sering kali merupakan ide bagus
      Kalau melihat sebagian besar situs web modern, div bertumpuk seperti gundukan besar. Jika ingin div yang berada di tengah, relatif mudah kalau membuat satu div lagi di dalamnya yang memenuhi seluruh ruang yang akan dipusatkan
      Banyak trik visual juga mirip seperti itu, tetapi contoh ini sangat rapi sehingga makin mengesankan

  • Tidak persis seperti kaca buram, tetapi saya mencoba menambahkan efek kaca jendela pada sidebar di https://www.gyan.dev/ffmpeg/builds/

    • Kalau dilihat di PC, situsnya sangat nyaman dan cantik