Use shaders for your Loading Screens!


One thing you should already know is loading screens are usually static screens, but why? Basically,  at that moment the game is loading or downloading all the required assets. That effort is taken by the CPU causing temporary accused drops of frame rate.
Due to that bounded CPU, most games try to keep the loading screen as light as possible in terms of performance. But what about using the GPU to create something catchy to entertain the user in the loading time? The key will be using a shader which doesn’t require any extra effort from the CPU.

Of course, even if you use a shader, don’t expect your loading screen will run totally smoothly.  If the CPU gets totally bounded, the GPU will face a delay to be able to refresh the screen due to some areas of the rendering belongs to the CPU, so it could become a blocker. The main factor to use a shader is to avoid adding more work to the CPU.

Using a full-screen shader effect is not dramatic if it is the only thing you are doing now. One tip when you develop for mobile is avoiding create full-screen effects because of the high number of fragment operations you are doing. But in the case of a loading screen where you are only rendering that view, is the best candidate to show off a little and create a cool crazy effect, you will not face any overdraw problem or GPU bonding at this time.

In this case, I did a tunnel effect: only with one shader and a few textures we can create a complex, appealing, and eye-catcher shader which will entertain our users in the loading time. The code is exposed below. There is nothing special about it in terms of tricks. It is just a good mix of textures, sampling parameters, timing, and color blending.


Leave a Reply

Your email address will not be published. Required fields are marked *