Post Processing

[ogniK5377]

We have reworked the post-processing system. The post-processing system now uses a layer-based stack so you can layer post-processing effects on top of each other. With this, we also have introduced a breaking change by the removal of the render.postprocess event.

Post Processing Stack

We introduce a new field in the global game namespace called PostProcess. This is how you can add and remove your post-processing effects as well as fetch them to change settings. These are all functions that can only be run on the client!

// Add MyPostProcessEffect to the stack
PostProcess.Add(new MyPostProcessEffect());

// Empty the post processing stack
PostProcess.Clear();

// Get a reference to your post processing effect
var MyEffect = PostProcess.Get<MyPostProcessEffect>();

Standard post-processing shader

We have introduced a standard post-processing shader that includes a list of many different common effects people might want to use for post-processing. The list is as follows:

• Pixelation
• Lens Distortion
• Panini Projection
• Chromatic Aberration
• Motion Blur
• Sharpen
• Blur
• Depth of Field
• Color Overlay
• Saturation
• Film Grain
• Vignette

Adding the standard post-processing shader can be done as follows:

PostProcess.Add(new StandardPostProcess());

Enabling an effect and setting its settings can be done like so:

var pp = PostProcess.Get<StandardPostProcess>();
pp.Blur.Enabled = true;
pp.Blur.Strength = 4.0f;

Creation of new post-processing effects

We have shipped an example post-processing shader that inverts the colors of your screen. You can find this in addons/base/shaders/postprocess_example.vfx
There are two types of post-processing effects you can create, you can create a basic post-processing effect that just draws a quad on the user's screen using your provided shader(99% of custom post-processing effects will do this), or you can create a post-processing effect which handles the rendering yourself.

For most post-processing shaders, you will just use MaterialPostProcess. An example can be seen below:

// Draws a material on the user's screen
PostProcess.Add( new MaterialPostProcess( "materials/my_pp_effects/invert.vmat" ) );

Manually Creating Post-Processing Effects

public class MyPostProcessEffect : BasePostProcess
{
	private Material PostProcessMaterial;

	// Our setting
	public float InvertAmount
	{
		// We don't use Render.Set anymore, this is handled internally!
		set => Set( "example.invert.amount", value );
	}

	public MyPostProcessEffect()
	{
		PostProcessMaterial = Material.Load( "materials/my_pp_effects/invert.vmat" );
	}

	public override void Render()
	{
		if ( PostProcessMaterial == null ) return;
		Sandbox.Render.Material = PostProcessMaterial;
		// This is a new method which is special to the post processing shader
		RenderScreenQuad();
	}
}

And usage:

PostProcess.Add(new MyPostProcessEffect());

var pp = PostProcess.Get<MyPostProcessEffect>();
pp.InvertAmount = 1.0f;

Layering

Since we use a stack/layers. This means you can do post-processing in passes.

PostProcess.Add(new StandardPostProcess());
PostProcess.Add(new MyPostProcessEffect());

In this instance, our standard post-processing will modify the output color, that modified output is then passed to MyPostProcessEffect to do its magic. By doing this, the post-processing effects aren't overwriting each other and instead work together.