Implementasi Efek Stiker Foil
(4rknova.com)- Kode sumber shader untuk mengimplementasikan efek stiker foil, yang mensimulasikan pantulan dan kilau permukaan secara realistis
- Berbagai karakteristik seperti metalness, roughness, dan pantulan iridesen dapat disesuaikan secara detail
- Intinya adalah menghadirkan efek partikel halus (flake) pada permukaan foil dan warna iridesen yang berubah sesuai sudut pandang
- Memanfaatkan beragam teknik grafis berbasis fisika seperti sampling environment map, efek Fresnel, bayangan AO, dan alpha cutoff
- Ini adalah implementasi shader tingkat lanjut yang dapat digunakan untuk rendering stiker foil berkualitas tinggi di lingkungan 2D/3D nyata
Gambaran umum
Konten ini adalah kode shader GLSL untuk mengimplementasikan efek visual berkilau seperti stiker foil. Tujuannya adalah menciptakan tekstur visual berkualitas tinggi dengan memproses secara gabungan metalness, iridesensi, efek partikel mikro pada permukaan, dan pantulan lingkungan. Efek foil yang realistis dihasilkan dengan memanfaatkan tekstur 2D, environment map, dan berbagai parameter penyesuaian.
Variabel dan konstanta utama
- Efek dapat disesuaikan melalui berbagai variabel uniform
- Contoh: uFlakeSize (ukuran flake), uRoughness (kekasaran), uMetalness (metalness), uIridescence (iridesensi), dll.
- Mendukung tekstur, environment map, serta informasi sistem koordinat dunia
Struktur fungsi utama
Fungsi hash (hash)
- Digunakan untuk menghasilkan nilai acak yang diperlukan bagi efek partikel halus (flake)
Transformasi koordinat environment map (dirToEquirectUv), sampling environment map (sampleEnvRough)
- Mendukung sampling berdasarkan arah dari environment map
- Menerapkan mip level yang sesuai berdasarkan roughness (lod)
Efek iridesensi (iridescenceColor)
- Menghasilkan warna secara dinamis berdasarkan sudut dan ketebalan permukaan
- Warna berubah sesuai sudut pandang seperti pada permukaan foil sungguhan
Luminans (luminance)
- Menghitung informasi kecerahan warna untuk diterapkan pada post-processing dan lainnya
Logika utama shader
Alpha cutoff dan penanganan sisi depan/belakang
- Menentukan apakah piksel dipertahankan berdasarkan nilai alpha dari tekstur dasar
- Menyesuaikan intensitas AO, penanganan peeled, dan warna berdasarkan sisi depan/belakang
Pemrosesan pantulan, flake, iridesensi, dan metalness
- Menghitung normal permukaan, vektor pandang, vektor pantul, dan pantulan lingkungan
- Menerapkan hash per posisi dan offset acak berbasis sudut untuk efek flake
- Mengontrol secara detail kecerahan, masking, boost, dll. pada flake
- Menggunakan perturbedNormal untuk merefleksikan perpindahan permukaan flake
- Mencampurkan flake dan warna sekitar bersama warna iridesen
Penggabungan environment map dan perhitungan warna akhir
- Mengubah roughness secara dinamis sesuai intensitas flake
- Meningkatkan realisme melalui masking metal/normal/pantulan dan perhitungan Fresnel
- Menghasilkan warna akhir dengan mencampurkan komponen diffuse (difus) dan spec (pantulan)
- Mengeluarkan warna akhir bersama alpha dasar
Implikasi
Shader ini cocok untuk mereproduksi secara realistis efek visual kompleks khas material foil (pantulan kuat, partikel halus, iridesensi, dll.). Karena efeknya bisa diatur dengan presisi melalui beragam parameter, shader ini memungkinkan kustomisasi yang fleksibel dan rendering stiker foil dengan visibilitas tinggi. Keunggulannya besar untuk digunakan di berbagai konteks seperti 3D, web 2D, game, dan UI interaktif.
1 komentar
Komentar Hacker News
Dulu saat mengembangkan game mobile, saya pernah menambahkan efek pada kartu keren di mana “kilauannya” berubah mengikuti kemiringan ponsel, seolah-olah itu objek 3D sungguhan. Saya merasa takjub karena sekarang iOS tampaknya mendukung efek stiker seperti ini secara bawaan
Situs marketplace kartu Magic menerapkan efek CSS sederhana pada kartu foil. Namun saya selalu memikirkan bagaimana cara mewujudkan berbagai efek foil seperti yang terlihat pada kartu Magic asli dengan lebih realistis, tanpa penurunan performa, dan tetap sesuai dengan UX CRUD Svelte
Teknologi shader benar-benar menarik. Di situs Shadertoy, kita bisa langsung mencoba berbagai shader sendiri
Tim Oliver pernah membuat presentasi keren tentang pengalamannya menciptakan efek foil holografik yang diterapkan pada "golden ticket" di Threads. Videonya bisa ditonton di sini
Saya merasa efek ini benar-benar keren dan juga sangat memukau secara visual, tetapi sebenarnya saya tidak terlalu menyukai efek foil berkilau itu sendiri. Memang diterapkan pada stiker atau kartu, tetapi menurut saya tampilannya lebih enak dilihat ketika kilau metalik yang lembut hanya dipakai sebagai aksen daripada gaya seperti ini. Sepertinya hanya saya yang punya pendapat seperti ini, tetapi melihat popularitas efek ini, selera saya tampaknya memang masih minoritas
Efek yang sangat keren. Ini mengingatkan saya pada shader diffraction grating yang dibuat Alan Zucconi untuk rendering CD. Detail terkait bisa dilihat di sini
Hasilnya jauh lebih keren dari yang saya harapkan. Menyesuaikan nilai pengaturan sambil melihat gambar pantulan seluruh ruangan terasa menyenangkan
Di iOS ada efek stiker “shiny” yang merespons saat ponsel dimiringkan. Saat pertama kali melihatnya, saya benar-benar terkesan
Agak off-topic, tetapi saat membaca tulisan ini saya jadi berpikir bahwa AI ke depan juga akan bisa mempelajari cara membuat efek seperti ini. Di sisi lain, saya merasa lega karena AI bisa berperan sebagai bookmark terbaik sehingga kita tidak perlu lagi repot mengumpulkan bookmark. Namun ada juga sisi yang terasa disayangkan dan pahit, karena postingan keren seperti ini mungkin tidak akan benar-benar mendapatkan pengakuan dari AI
Saya benar-benar senang bisa menemukan tulisan-tulisan menarik tak terduga seperti ini