tutorials/shaders/advanced_postprocessing

[giscus[bot]]

tutorials/shaders/advanced_postprocessing

Introduction: This tutorial describes an advanced method for post-processing in Godot. In particular, it will explain how to write a post-processing shader that uses the depth buffer. You should al...

https://docs.godotengine.org/en/stable/tutorials/shaders/advanced_postprocessing.html

[tetrapod00]

Here's an example you can use as the base for your effects. It reads from all three screen textures (screen_texture, depth_texture, and normal_rough_texture). Most of the values you would want to use are extracted from the screen textures. Change which values get rendered by uncommenting ALBEDO lines.

// Godot 4.3, Forward+ or Mobile
shader_type spatial;
render_mode unshaded, fog_disabled;

uniform sampler2D screen_texture : source_color, hint_screen_texture;
uniform sampler2D depth_texture : hint_depth_texture;
uniform sampler2D normal_rough_texture : hint_normal_roughness_texture;

void vertex() {
	POSITION = vec4(VERTEX.xy, 1.0, 1.0);
}

void fragment() {
	vec4 screen = texture(screen_texture, SCREEN_UV);
	
	float depth_raw = texture(depth_texture, SCREEN_UV).x;
	vec3 ndc = vec3(SCREEN_UV * 2.0 - 1.0, depth_raw);
	vec4 position_view = INV_PROJECTION_MATRIX * vec4(ndc, 1.0);
	position_view.xyz /= position_view.w;
	float linear_depth = -position_view.z;
	
	vec4 world = INV_VIEW_MATRIX * INV_PROJECTION_MATRIX * vec4(ndc, 1.0);
	vec3 position_world = world.xyz / world.w;
	
	vec4 normal_rough = texture(normal_rough_texture, SCREEN_UV);
	vec3 normals_view_raw = normal_rough.xyz; // Normals in view space, in [0.0, 1.0] range
	vec3 normals_view_remapped = normals_view_raw.xyz * 2.0 - 1.0;  // Normals in view space, in [-1.0, 1.0] range
	vec3 normals_world = (INV_VIEW_MATRIX * vec4(normals_view_remapped, 0.0)).xyz;
	float roughness = normal_rough.w;
	
	// Visualize the outputs
	// Screen texture
	ALBEDO.rgb = screen.rgb;
	// Raw depth
	//ALBEDO.rgb = vec3(depth_raw);
	// Linear depth
	//ALBEDO.rgb = vec3(fract(linear_depth));
	// World position
	//ALBEDO.rgb = fract(position_world);	
	// Normals from the normal buffer, in view space
	//ALBEDO.rgb = normals_view_raw;
	// Normals in world space, [-1.0,1.0] range
	//ALBEDO.rgb = normals_world;
	// Roughness
	//ALBEDO.rgb = vec3(roughness);
}

[thompsop1sou]

I also posted this comment in the Screen-Reading Shaders doc, but I think it is worth noting here as well. That doc mentions a significant limitation with post-processing and transparent objects in 3D:

In 3D, the screen is copied after the opaque geometry pass, but before the transparent geometry pass, so transparent objects will not be captured in the screen texture.

This affects not just the screen texture but also the depth and normal-roughness textures.

There are a couple ways to get around this so that you can do post-processing effects with transparent objects:

1. If you are only using the screen texture (not depth or normal-roughness), use a 2D shader. When you access the screen texture in a 2D shader, transparent objects will show up. (I believe this is because the 3D rendering is all already finished.) This doesn't work for the depth or normal-roughness textures, because those are not available in 2D shaders.

2. Use a compositor effect. This is a lower-level solution which requires writing GLSL and passing data like in a compute shader. Note that you will need to set transparent objects to "depth draw always" in order for them to show up in the depth buffer. And currently, there is no way to get transparent objects to show up in the normal-roughness texture.

3. You can use a setup with multiple cameras and viewports to capture and pass textures manually. This is kind of complicated to set up, but it ends up giving you more control than a compositor effect. You can access color, depth, normal, or roughness data, or you can pass your own custom data. I have an example project here: https://github.com/thompsop1sou/custom-screen-buffers

[SephReed]

I love you! Great solution, clear documentation. THANK YOU

[heart-rotting]

Not sure if I am just slow but I was getting an odd oscillating / banding effect (similar to this) even if I just copy-pasted the tutorial shader into my file. Through trial and error I found I had to divide the linear depth by some value around 100 or above to get the oscillating effect to push out far enough away for it not to be present anymore.

float linear_depth = -(view.xyz / view.w).z / 100.0;

If any shader experts out there understand why this would happen I would love to hear it! Thanks and hope this helps somebody! ✌️

[tetrapod00]

Hi, I believe that the banding effect is intentional. This example on this page is not a useful postprocessing effect on its own, but is only meant to visualize the values of the linear depth and world space positions (if you uncomment the other line). You can use those values to implement your own postprocessing effects.

The banding effecting repeats every 1 unit (meter) of linear depth, by using fract(). If you move the camera, it will appear to oscillate as the camera moves forward or backwards.

When you divide the value by 100 like in your code example, you instead repeat the banding effect every 100 units (meters), so in most game scenes the banding effect seems to disappear.

[heart-rotting]

Ohhh I see! That clears a lot up for me 😅. Thank you and I appreciate the quick reply!

[LordMcMutton]

I was able to get a better depth buffer with this:

float depth = texture(depth_texture, SCREEN_UV).x;
float linear_depth = mix(-10, 10, depth);

You can see what it looks like using the ALBEDO bit the page provides:

ALBEDO = vec3(fract(linear_depth));

And it gives you a smooth buffer from black to white, like you'd expect.