自定义后期处理

前言

Godot provides many post-processing effects out of the box, including Bloom, DOF, and SSAO, which are described in 环境和后期处理. However, advanced use cases may require custom effects. This article explains how to write your own custom effects.

实现自定义后期处理着色器的最简单方法是使用Godot的内置功能从屏幕纹理中读取. 如果你不熟悉这个, 你应该先阅读 屏幕阅读着色器教程 .

单阶段后期处理

Post-processing effects are shaders applied to a frame after Godot has rendered it. To apply a shader to a frame, create a CanvasLayer, and give it a ColorRect. Assign a new ShaderMaterial to the newly created ColorRect, and set the ColorRect‘s layout to “Full Rect”.

Your scene tree will look something like this:

../../_images/post_tree1.png

备注

Another more efficient method is to use a BackBufferCopy to copy a region of the screen to a buffer and to access it in a shader script through a sampler2D using hint_screen_texture.

备注

As of the time of writing, Godot does not support rendering to multiple buffers at the same time. Your post-processing shader will not have access to other render passes and buffers not exposed by Godot (such as depth or normal/roughness). You only have access to the rendered frame and buffers exposed by Godot as samplers.

这个演示中，我们使用的是这张小羊的精灵。

../../_images/post_example1.png

为 ColorRect 的 ShaderMaterial 分配一个新的 Shader。你可以通过使用带 hint_screen_texture 的 sampler2D 以及内置的 uniform SCREEN_UV 来访问这一帧的纹理和 UV。

将以下代码复制到着色器. 上面的代码是单通道边缘检测滤波器, Sobel 滤波器 ，

  1. shader_type canvas_item;
  3. uniform vec2 size = vec2(32.0, 28.0);
  4. // If you intend to read from mipmaps with `textureLod()` LOD values greater than `0.0`,
  5. // use `filter_nearest_mipmap` instead. This shader doesn't require it.
  6. uniform sampler2D screen_texture : hint_screen_texture, repeat_disable, filter_nearest;
  8. void fragment() {
  9.         vec2 norm_size = size * SCREEN_PIXEL_SIZE;
  10.         bool half = mod(SCREEN_UV.y / 2.0, norm_size.y) / norm_size.y < 0.5;
  11.         vec2 uv = SCREEN_UV + vec2(norm_size.x * 0.5 * float(half), 0.0);
  12.         vec2 center_uv = floor(uv / norm_size) * norm_size;
  13.         vec2 norm_uv = mod(uv, norm_size) / norm_size;
  14.         center_uv += mix(vec2(0.0, 0.0),
  15.                          mix(mix(vec2(norm_size.x, -norm_size.y),
  16.                                  vec2(0.0, -norm_size.y),
  17.                                  float(norm_uv.x < 0.5)),
  18.                              mix(vec2(0.0, -norm_size.y),
  19.                                  vec2(-norm_size.x, -norm_size.y),
  20.                                  float(norm_uv.x < 0.5)),
  21.                              float(half)),
  22.                          float(norm_uv.y < 0.3333333) * float(norm_uv.y / 0.3333333 < (abs(norm_uv.x - 0.5) * 2.0)));
  24.         COLOR = textureLod(screen_texture, center_uv, 0.0);
  25. }

小羊就会变成这样：

../../_images/post_example2.png

多阶段后期处理

Some post-processing effects like blurs are resource intensive. You can make them run a lot faster if you break them down in multiple passes. In a multipass material, each pass takes the result from the previous pass as an input and processes it.

To produce a multi-pass post-processing shader, you stack CanvasLayer and ColorRect nodes. In the example above, you use a CanvasLayer object to render a shader using the frame on the layer below. Apart from the node structure, the steps are the same as with the single-pass post-processing shader.

Your scene tree will look something like this:

../../_images/post_tree2.png

例如，可以通过将下面的代码段附加到每个 ColorRect 上来编写全屏高斯模糊效果。应用着色器的顺序取决于场景树中 CanvasLayer 的位置，越往上越早应用。对于这个模糊着色器而言，顺序是无所谓的。

  1. shader_type canvas_item;
  3. uniform sampler2D screen_texture : hint_screen_texture, repeat_disable, filter_nearest;
  5. // Blurs the screen in the X-direction.
  6. void fragment() {
  7.     vec3 col = texture(screen_texture, SCREEN_UV).xyz * 0.16;
  8.     col += texture(screen_texture, SCREEN_UV + vec2(SCREEN_PIXEL_SIZE.x, 0.0)).xyz * 0.15;
  9.     col += texture(screen_texture, SCREEN_UV + vec2(-SCREEN_PIXEL_SIZE.x, 0.0)).xyz * 0.15;
  10.     col += texture(screen_texture, SCREEN_UV + vec2(2.0 * SCREEN_PIXEL_SIZE.x, 0.0)).xyz * 0.12;
  11.     col += texture(screen_texture, SCREEN_UV + vec2(2.0 * -SCREEN_PIXEL_SIZE.x, 0.0)).xyz * 0.12;
  12.     col += texture(screen_texture, SCREEN_UV + vec2(3.0 * SCREEN_PIXEL_SIZE.x, 0.0)).xyz * 0.09;
  13.     col += texture(screen_texture, SCREEN_UV + vec2(3.0 * -SCREEN_PIXEL_SIZE.x, 0.0)).xyz * 0.09;
  14.     col += texture(screen_texture, SCREEN_UV + vec2(4.0 * SCREEN_PIXEL_SIZE.x, 0.0)).xyz * 0.05;
  15.     col += texture(screen_texture, SCREEN_UV + vec2(4.0 * -SCREEN_PIXEL_SIZE.x, 0.0)).xyz * 0.05;
  16.     COLOR.xyz = col;
  17. }
  1. shader_type canvas_item;
  3. uniform sampler2D screen_texture : hint_screen_texture, repeat_disable, filter_nearest;
  5. // Blurs the screen in the Y-direction.
  6. void fragment() {
  7.     vec3 col = texture(screen_texture, SCREEN_UV).xyz * 0.16;
  8.     col += texture(screen_texture, SCREEN_UV + vec2(0.0, SCREEN_PIXEL_SIZE.y)).xyz * 0.15;
  9.     col += texture(screen_texture, SCREEN_UV + vec2(0.0, -SCREEN_PIXEL_SIZE.y)).xyz * 0.15;
  10.     col += texture(screen_texture, SCREEN_UV + vec2(0.0, 2.0 * SCREEN_PIXEL_SIZE.y)).xyz * 0.12;
  11.     col += texture(screen_texture, SCREEN_UV + vec2(0.0, 2.0 * -SCREEN_PIXEL_SIZE.y)).xyz * 0.12;
  12.     col += texture(screen_texture, SCREEN_UV + vec2(0.0, 3.0 * SCREEN_PIXEL_SIZE.y)).xyz * 0.09;
  13.     col += texture(screen_texture, SCREEN_UV + vec2(0.0, 3.0 * -SCREEN_PIXEL_SIZE.y)).xyz * 0.09;
  14.     col += texture(screen_texture, SCREEN_UV + vec2(0.0, 4.0 * SCREEN_PIXEL_SIZE.y)).xyz * 0.05;
  15.     col += texture(screen_texture, SCREEN_UV + vec2(0.0, 4.0 * -SCREEN_PIXEL_SIZE.y)).xyz * 0.05;
  16.     COLOR.xyz = col;
  17. }

使用上面的代码, 你应该得到如下所示的全屏模糊效果.

../../_images/post_example3.png

Previous Next

© 版权所有 2014-present Juan Linietsky, Ariel Manzur and the Godot community (CC BY 3.0). Revision b1c660f7.

Built with Sphinx using a theme provided by Read the Docs.