Implementing a Foil Sticker Effect

Summary

In this post, I’ll walk you through how to create a custom shader in Three.js that simulates the look of a foil sticker, complete with angle-dependent iridescence and sparkling metallic flakes. The goal is to capture that premium, holographic effect you see on collectible stickers, trading cards, and high-end packaging, but to render it in real time directly in the browser.IridescenceIf you’ve ever tilted a holographic sticker or watched sunlight catch on a soap bubble, you’ve seen iridescence in action. In the real world, this rainbow shimmer comes from thin-film interference. When light waves bounce between layers of a surface, some wavelengths are reinforced while others cancel out, causing colors to shift depending on your viewing angle.In real-time computer graphics, we don’t need to simulate the exact physics. Instead, we can approximate this by mapping view angle to hue, as the surface tilts relative to the camera, its color smoothly shifts through a spectrum. This gives that dynamic, “alive” quality you expect from foil stickers.Foil FlakesAlongside the shifting colors, there’s another key detail: foil flakes. Real metallic foils have tiny reflective particles embedded in them, creating hundreds of bright, sharp highlights that twinkle as you move. These aren’t smooth reflections but randomized sparkles, giving the surface its tactile, premium feel.To replicate this in a shader, we’ll introduce procedural noise to generate small random patches of brightness across the surface. When combined with lighting, they look like metallic specks catching the light. Together, angular hue shifts and flake sparkles create a convincing illusion of printed holographic foil without expensive rendering tricks.ImplementationThis implementation simulates a peeling, iridescent sticker with foil flakes using Three.js. While I will borrow concepts such as metalness, roughness, and Fresnel from Physically Based Rendering (PBR), this shader is not physically based. The goal is to c...