🃏 Holographic Card Shader

Jump to heading # Introduction

A short breakdown of how I made a holographic card shader. The goal was to do as much as possible in the shader itself without relying on any textures. I ended up using a single 3D model for the Pokémon and a single texture for the text. The design of the card was inspired by Rob Fichman's work. The 3D model of the Cosmog Pokémon was created by AlmondFeather on Sketchfab.

Jump to heading # Card Frame

The frame of the card consists of the outer edge, the horizontal divider at the bottom, the 'window' through where you see the Pokémon and the title bar below the window.

All of these elements are drawn using simple rectangle and polygon shapes. I have full control over their dimensions which allows me to quickly change the structure and layout of the card. Here are some of the properties that I use to control the frame of the card.

In total, the shader has 65 exposed properties. This is quite a lot, but I like that I can tweak variables as much as I want until I'm happy with the result.

Jump to heading # Icons

The card features several icons like the ones used for indicating the type of the Pokémon. Additionally there are some decorational celestial bodies on the right bottom corner of the card. All of these are a made up of basic signed distance functions.

For the decorational corner pattern, the stars are made out of 2 vesica SDFs blended together. The moon is made out of 2 spheres and the planet is made out of several spheres and ellipses. All of the icons exist on the same plane, but I added a parallax effect to fake depth between the icons.

For practice, I recreated several of the pokemon-typ icons. It was very enjoyable to try and figure out what base shapes I could combine to end up with the right icon. If you want more information about drawing 2D SDFs you can check out this page from Inigo Quilez.

Jump to heading # Raymarched Spheres

There are little spheres in the card that I use for showing the pokemon types and the attacks. These are raymarched spheres. Together with some Blinn-Phong lighting they look 3D and I can fake having 3D objects in the shader without having any actual 3D geometry.

Jump to heading # Text

At first, I attempted to do the text in-shader as well. This is possible for sure, using bezier curves and SDFs and I actually got quite close to rendering letters how I wanted to.

However in the end, it was quite a lot of work to render text with the exact font that I wanted, so I decided to just us a simple texture.

Jump to heading # Holographic Sparkles

For the sparkles I created some patterns using voronoi functions. Then, by converting the colors to directions and taking the dot product of this direction and the view direction, I could make different sparkles show up under different viewing angles.

Multiple voronoi patterns were overlayed on top of eachother to generate a more interesting pattern.

Jump to heading # Parallax Effect

The whole card is flat, but by using raymarched spheres and parallax effects, I managed to create a nice 3D effect. A parallax effect can be achieved by offsetting the UVs based on the view direction.

Using parallax is great way to achieve some sense of depth in an otherwise flat card.

Jump to heading # Stencil Shader

A stencil shader was used to make it so that the 3D scene is only visible through the window of the card itself. Cyanilux has created a post that explains setting up stencils in URP.