How to create 3D effect from 2D image using a shader

Godot Version

4.2.2

Question

How would I go about creating a shader that creates the illusion of 2d image being projected onto a 3D cylinder, As you can see in the reference image the slot items get distorted and bends as it approaches the top and bottom of the slot reel, making it appear 3D

here is an example image of my current slot machine.
image

My immediate idea is to have a ColorRec Shader somehow distorting the image below based on y position but I don’t have the skills yet.

Try to create this in 3d inside a subviewport of the 2d scene at first.

I found this Curved Fragment Shader that might help. Your biggest problem is that you’re trying to curve around a 3D object in 2D space, in a direction that doesn’t exist. So you’re going to have to fake it by squishing the top and bottom to appear like they’re bending. It’s still likely to be related to the UV coordinates. You could also look at 2D vertex shaders.

@KingGD had a good suggestion. Create a MeshInstance3D, and a cylinder shape, turn it on its side, and apply your texture to it. Then create a viewport, and spin the cylinder. If you really need it to be 2D, turn on the moviemaker (upper right-hand corner), set it to save as pngs in the Project Settings, and then create a script to spin it. You can then create a spritesheet out of your pngs and use those in 2D to fake the spinning. If the framerate is too high, you can also reduce it in project settings.

1 Like