Bite-Sized Godot: The fix for UI and post-processing shaders in Godot 4

A common way to do a fullscreen post-processing shader in Godot, such as with a CRT shader, is to put your shader on a fullscreen ColorRect, parent it to a CanvasLayer, and put that into your scene tree somewhere.

This technique works great for the most part, but you may find that some dynamically generated UI elements, such as the dropdown menu on an OptionButton, don’t have the shader effect applied to them.

The reason is that any element inheriting from the Window class, which includes popup menus and dialogs, are placed on render layer 1024, whereas non-dynamic UI elements are rendered at whatever layer they are configured to, which is layer 0 by default. So to fix this issue we just need to increase our post-processing layer to 1025 so that it renders above these dynamic elements. There’s a slight hiccup here, though, in that the UI for a CanvasLayer node only lets us increase this value up to 128. To go higher, you have to programmatically set the layer, which is as easy as adding a _ready() function to your CanvasLayer and setting the layer that way:

extends CanvasLayer

func _ready() -> void:
	layer = 1025

With this fix, your post-processing shaders should support any UI elements you place in your game.