Phaser 4's new Beam renderer transforms shader development. The Post FX pipeline is replaced with a two-class system that makes shaders easier to manage and more powerful for developers.
New Shader Structure
Split your pipeline into:
- Base filter shader (rendering node added to renderer)
- Controller (manages uniforms and applies to game objects)
Three Migration Examples
Grayscale Shader
Convert existing texture colors using the new base filter shader class and controller pattern.
Wipe Shader
Learn to pass uniforms through the controller. Load fragment shaders as external files using the loader plugin's GLSL method.
Noise Shader
Pass additional textures to your shader program through the controller's texture manager.
Key Migration Tips
- Enable filters on game objects before applying shaders
- Store dynamic uniform values in the controller
- Use setup uniforms method instead of on pre-render
- Use setup textures method instead of ondraw