Lenticular Lens Effect

The Challenge 09 of shaders.xyz (shading forum that you should check if you don't know it yet) was to replicate a Lenticular Card effect. Google it if you are not familiar with.

I had the honor to be the monthly winner and I'm going to explain how I did it.

In my opinion, the easiest and more efficient approach is using geometry normals or facing ratio. But I tried to recreate something more physically correct. Don't get me wrong, I'm not saying the other are dead easy, I'm sure are tricky, but I though recreating the Lenticular Lens would be more challenging.

First of all, I did some research and found this great website lenstarlenticular.com you can find there all the information needed for this Challenge. As we are rendering 2D images, I focused on the animation effect rather that the 3D effect (that would be nice to try if I had a VR set). Animation effect uses a wider lens while 3D effects uses narrower.

I started doing a RGB grid to use as a mask and a different image per channel.

Then, a 45 degrees angle gradient (as the website suggest for Animation effect), and also made it a grid.

This will be used as a displacement map on the top face of the geometry, while the images are going to be displayed on the other face. Will be crucial to play with the displacement height. And be sure that the gradient map is perfectly matched with the grid of 3 images.

The whole object will be refractive except from the back face, it will be a basic shader with grid images.