480 lines
16 KiB
Markdown
480 lines
16 KiB
Markdown
---
|
||
title: 自定义后处理
|
||
date: 2026-05-03 00:00:00
|
||
excerpt: REDPostProcess 全套自定义后处理：Diffusion Filter、角色辉光、自定义 DOF
|
||
tags:
|
||
- ARC
|
||
- Rendering
|
||
- PostProcess
|
||
- Toon
|
||
rating: ⭐
|
||
---
|
||
|
||
# 自定义后处理
|
||
|
||
返回 [[Rendering]]
|
||
|
||
## 概述
|
||
|
||
ARC 引擎新增了完整的自定义后处理系统（REDPostProcess），提供 Diffusion Filter（扩散滤镜）、角色辉光（Chara Glow）和自定义景深（DOF）三大功能。这些效果专门为动画风格渲染设计，与标准 UE4 后处理管线并行工作。
|
||
|
||
## Shader 端：REDPostProcess.usf
|
||
|
||
### Diffusion Filter（扩散滤镜）
|
||
|
||
基于亮度的柔焦/辉光效果，使用 13-tap 高斯模糊（7 权重核）：
|
||
|
||
```hlsl
|
||
// 从场景颜色提取高亮区域
|
||
float Luminance = dot(SceneColor.rgb, float3(0.299, 0.587, 0.114));
|
||
float LuminanceMask = pow(Luminance, LuminancePow);
|
||
LuminanceMask = saturate(LuminanceMask - LuminanceThreshold);
|
||
|
||
// 高斯模糊后以 Screen 混合模式叠加
|
||
// Screen blend: 1 - (1-A)(1-B)
|
||
float3 Result = 1.0 - (1.0 - SceneColor.rgb) * (1.0 - BlurredHighlight);
|
||
```
|
||
|
||
可调参数：
|
||
- `DiffusionFilterLuminancePow` — 亮度幂次（控制提取范围）
|
||
- `DiffusionFilterLuminanceThreshold` — 亮度阈值
|
||
|
||
### Diffusion Filter 2（变体）
|
||
|
||
```hlsl
|
||
// Screen 混合 + Power 调整
|
||
float3 BlendResult = 1.0 - (1.0 - A) * (1.0 - B);
|
||
Result = pow(BlendResult, Power);
|
||
```
|
||
|
||
### 角色辉光（Chara Glow）
|
||
|
||
从 GBufferD 的 B 通道读取 OutlineID 作为辉光遮罩，进行可变半径的 Box Blur：
|
||
|
||
```hlsl
|
||
// 读取 GBufferD.b 作为遮罩
|
||
float Mask = GBufferD.b;
|
||
|
||
// 可变半径 Box Blur
|
||
for (int y = -Radius; y <= Radius; y++)
|
||
for (int x = -Radius; x <= Radius; x++)
|
||
Sum += SampleMask(UV + offset);
|
||
|
||
// 以 CharaGlowColor 叠加
|
||
OutColor = Sum * CharaGlowColor * CharaGlowArea;
|
||
```
|
||
|
||
可调参数：
|
||
- `CharaGlowArea` — 辉光范围
|
||
- `CharaGlowColor` — 辉光颜色
|
||
|
||
### 自定义 DOF
|
||
|
||
替代标准 DOF 的 RED 专用版本，支持近景/远景独立模糊：
|
||
|
||
```hlsl
|
||
// 高斯模糊 Pass（水平 + 垂直分离）
|
||
// 13-tap 核，权重：0.0044, 0.0540, 0.2420, 0.3990, ...
|
||
```
|
||
|
||
### Soft Focus / Glow / Sepia
|
||
|
||
其他后处理变体：
|
||
- **Soft Focus**：场景与模糊版本的简单混合 + 饱和度控制
|
||
- **Glow**：亮度阈值 + Screen 混合辉光
|
||
- **Sepia**：Diffusion Filter 2 的棕褐色变体
|
||
|
||
## C++ 端：REDPostProcess.h/.cpp
|
||
|
||
### 后处理 Pass 类型
|
||
|
||
```cpp
|
||
// 4 种主要 Pass
|
||
enum class EREDPostProcessPass
|
||
{
|
||
DiffusionFilter, // 扩散滤镜
|
||
CharaGlow, // 角色辉光
|
||
DownSample, // 降采样
|
||
BlurH, BlurV, // 水平/垂直高斯模糊
|
||
CustomGaussianDOF // 自定义 DOF
|
||
};
|
||
```
|
||
|
||
### 插入点控制
|
||
|
||
通过 CVar 控制后处理在管线中的插入位置：
|
||
|
||
```cpp
|
||
// r.REDPostprocessAfterTranslucency
|
||
// 0 = 在 SeparateTranslucency 之前
|
||
// 1 = 在 SeparateTranslucency 之后
|
||
// 2 = 在 Bloom 之后
|
||
```
|
||
|
||
### PostProcessSettings 扩展
|
||
|
||
```cpp
|
||
// Scene.h 新增
|
||
float DiffusionFilterLuminancePow;
|
||
float DiffusionFilterLuminanceThreshold;
|
||
float CharaGlowArea;
|
||
FLinearColor CharaGlowColor;
|
||
```
|
||
|
||
## 完整代码解析
|
||
|
||
### REDPostProcess.usf 完整着色器注解
|
||
|
||
#### 辅助函数
|
||
|
||
```hlsl
|
||
// 灰度计算（ITU-R BT.601 标准权重）
|
||
float GetGrayscale(float3 Color)
|
||
{
|
||
return dot(Color, float3(0.299f, 0.587f, 0.114f));
|
||
}
|
||
|
||
// 饱和度插值：在灰度和原色之间按 Saturation 系数过渡
|
||
float3 LerpSaturation(float3 Color, float Saturation)
|
||
{
|
||
float Gray = GetGrayscale(Color);
|
||
return lerp(float3(Gray, Gray, Gray), Color, Saturation);
|
||
}
|
||
```
|
||
|
||
#### 高斯核权重（7 权重，13-tap 对称核）
|
||
|
||
```hlsl
|
||
// ColorSampleWeight — 用于降采样和模糊的高斯权重
|
||
// 对称分布：中心权重最大，两侧递减
|
||
// 权重值（半侧，index 0=中心）：
|
||
// [0] = 0.3990 (中心)
|
||
// [1] = 0.2420
|
||
// [2] = 0.0540
|
||
// [3] = 0.0044
|
||
// [4] = 0.0001 (接近零)
|
||
// 合计 ≈ 1.0（归一化）
|
||
static const float ColorSampleWeight[7] = {
|
||
0.0044f, 0.0540f, 0.2420f, 0.3990f, 0.2420f, 0.0540f, 0.0044f
|
||
};
|
||
```
|
||
|
||
#### DownSamplingPS — 降采样
|
||
|
||
```hlsl
|
||
// 4x4 区域降采样为 1 像素（用于创建 1/4 分辨率 RT）
|
||
// 采样模式：2x2 双线性采样点，每点覆盖 2x2 像素
|
||
void DownSamplingPS(
|
||
float4 Position : SV_POSITION,
|
||
float2 InUV : TEXCOORD0,
|
||
out float4 OutColor : SV_Target0)
|
||
{
|
||
float2 UVOffset = 0.5f * InvSize; // 半像素偏移
|
||
|
||
// 4 次双线性采样取平均
|
||
OutColor = Texture2DSample(SceneColorTexture, SceneColorSampler, InUV + float2(-UVOffset.x, -UVOffset.y));
|
||
OutColor += Texture2DSample(SceneColorTexture, SceneColorSampler, InUV + float2( UVOffset.x, -UVOffset.y));
|
||
OutColor += Texture2DSample(SceneColorTexture, SceneColorSampler, InUV + float2(-UVOffset.x, UVOffset.y));
|
||
OutColor += Texture2DSample(SceneColorTexture, SceneColorSampler, InUV + float2( UVOffset.x, UVOffset.y));
|
||
OutColor *= 0.25f;
|
||
}
|
||
```
|
||
|
||
#### BlurVerticalPS / BlurHorizonPS — 分离高斯模糊
|
||
|
||
```hlsl
|
||
// 13-tap 分离高斯模糊（垂直方向）
|
||
// 使用 ColorSampleWeight 权重，两侧各 6 个采样点 + 中心 1 个
|
||
void BlurVerticalPS(
|
||
float4 Position : SV_POSITION,
|
||
float2 InUV : TEXCOORD0,
|
||
out float4 OutColor : SV_Target0)
|
||
{
|
||
OutColor = float4(0, 0, 0, 0);
|
||
|
||
// 遍历 -6 到 +6 的偏移量
|
||
for (int i = -6; i <= 6; i++)
|
||
{
|
||
float2 SampleUV = InUV + float2(0, i * InvSize.y); // 垂直偏移
|
||
float Weight = ColorSampleWeight[abs(i)]; // 对称权重
|
||
OutColor += Texture2DSample(SceneColorTexture, SceneColorSampler, SampleUV) * Weight;
|
||
}
|
||
}
|
||
|
||
// 13-tap 分离高斯模糊（水平方向）
|
||
// 结构与垂直相同，仅偏移方向改为水平
|
||
void BlurHorizonPS(
|
||
float4 Position : SV_POSITION,
|
||
float2 InUV : TEXCOORD0,
|
||
out float4 OutColor : SV_Target0)
|
||
{
|
||
OutColor = float4(0, 0, 0, 0);
|
||
|
||
for (int i = -6; i <= 6; i++)
|
||
{
|
||
float2 SampleUV = InUV + float2(i * InvSize.x, 0); // 水平偏移
|
||
float Weight = ColorSampleWeight[abs(i)];
|
||
OutColor += Texture2DSample(SceneColorTexture, SceneColorSampler, SampleUV) * Weight;
|
||
}
|
||
}
|
||
```
|
||
|
||
#### DiffusionFilterPS — 基于亮度的辉光提取
|
||
|
||
```hlsl
|
||
// Diffusion Filter：从场景中提取高亮区域用于后续模糊
|
||
// 步骤：
|
||
// 1. 采样场景颜色
|
||
// 2. 计算亮度 → 幂次调整 → 阈值裁剪
|
||
// 3. 输出 = 原始颜色 × 亮度遮罩
|
||
void DiffusionFilterPS(
|
||
float4 Position : SV_POSITION,
|
||
float2 InUV : TEXCOORD0,
|
||
out float4 OutColor : SV_Target0)
|
||
{
|
||
float4 SceneColor = Texture2DSample(SceneColorTexture, SceneColorSampler, InUV);
|
||
|
||
// 亮度计算
|
||
float Luminance = GetGrayscale(SceneColor.rgb);
|
||
|
||
// 幂次映射：LuminancePow 越大，只有越亮的区域才会被保留
|
||
float LuminanceMask = pow(Luminance, DiffusionFilterLuminancePow);
|
||
|
||
// 阈值裁剪：低于阈值的区域完全去除
|
||
LuminanceMask = saturate(LuminanceMask - DiffusionFilterLuminanceThreshold);
|
||
|
||
// 输出带亮度遮罩的颜色
|
||
OutColor = float4(SceneColor.rgb * LuminanceMask, 1.0f);
|
||
}
|
||
```
|
||
|
||
#### DiffusionFilter2PS — Screen 混合 + Power
|
||
|
||
```hlsl
|
||
// Diffusion Filter 2：将模糊后的辉光以 Screen 模式叠加回场景
|
||
// Screen blend: Result = 1 - (1-A)(1-B)
|
||
// 然后应用 Power 调整对比度
|
||
void DiffusionFilter2PS(
|
||
float4 Position : SV_POSITION,
|
||
float2 InUV : TEXCOORD0,
|
||
out float4 OutColor : SV_Target0)
|
||
{
|
||
// 采样原始场景
|
||
float4 SceneColor = Texture2DSample(SceneColorTexture, SceneColorSampler, InUV);
|
||
|
||
// 采样模糊后的辉光
|
||
float4 BlurColor = Texture2DSample(BlurTexture, BlurSampler, InUV);
|
||
|
||
// Screen 混合
|
||
float3 BlendResult = 1.0f - (1.0f - SceneColor.rgb) * (1.0f - BlurColor.rgb);
|
||
|
||
// Power 调整（DiffusionFilterPower 控制辉光强度曲线）
|
||
BlendResult = pow(BlendResult, DiffusionFilterPower);
|
||
|
||
OutColor = float4(BlendResult, 1.0f);
|
||
}
|
||
```
|
||
|
||
#### SoftFocus — 柔焦
|
||
|
||
```hlsl
|
||
// Soft Focus：场景与模糊版本的混合 + 饱和度调节
|
||
// 实现类似相机柔焦镜片的效果
|
||
void SoftFocus(
|
||
float4 Position : SV_POSITION,
|
||
float2 InUV : TEXCOORD0,
|
||
out float4 OutColor : SV_Target0)
|
||
{
|
||
float4 SceneColor = Texture2DSample(SceneColorTexture, SceneColorSampler, InUV);
|
||
float4 BlurColor = Texture2DSample(BlurTexture, BlurSampler, InUV);
|
||
|
||
// 在清晰和模糊之间按 SoftFocusBlend 系数混合
|
||
float3 Result = lerp(SceneColor.rgb, BlurColor.rgb, SoftFocusBlend);
|
||
|
||
// 饱和度调节
|
||
Result = LerpSaturation(Result, SoftFocusSaturation);
|
||
|
||
OutColor = float4(Result, 1.0f);
|
||
}
|
||
```
|
||
|
||
#### Glow — 辉光
|
||
|
||
```hlsl
|
||
// Glow：基于亮度阈值的辉光效果
|
||
// 与 DiffusionFilter 类似但更简单，直接以 Screen 混合叠加
|
||
void Glow(
|
||
float4 Position : SV_POSITION,
|
||
float2 InUV : TEXCOORD0,
|
||
out float4 OutColor : SV_Target0)
|
||
{
|
||
float4 SceneColor = Texture2DSample(SceneColorTexture, SceneColorSampler, InUV);
|
||
float4 BlurColor = Texture2DSample(BlurTexture, BlurSampler, InUV);
|
||
|
||
// Screen 混合辉光
|
||
float3 Result = 1.0f - (1.0f - SceneColor.rgb) * (1.0f - BlurColor.rgb * GlowIntensity);
|
||
|
||
OutColor = float4(Result, 1.0f);
|
||
}
|
||
```
|
||
|
||
#### CharaGlowPS — 角色辉光模糊
|
||
|
||
```hlsl
|
||
// 角色辉光 Pass 1：可变半径 Box Blur
|
||
// 从 GBufferD.b 读取辉光遮罩（由 OutlineID 编码）
|
||
// 以可变半径进行 Box Blur 扩散辉光范围
|
||
void CharaGlowPS(
|
||
float4 Position : SV_POSITION,
|
||
float2 InUV : TEXCOORD0,
|
||
out float4 OutColor : SV_Target0)
|
||
{
|
||
float Sum = 0;
|
||
float Count = 0;
|
||
|
||
// 从 CharaGlowArea 计算模糊半径（像素数）
|
||
int Radius = (int)CharaGlowArea;
|
||
|
||
// 双重循环 Box Blur
|
||
for (int y = -Radius; y <= Radius; y++)
|
||
{
|
||
for (int x = -Radius; x <= Radius; x++)
|
||
{
|
||
float2 SampleUV = InUV + float2(x, y) * InvSize;
|
||
|
||
// 采样 GBufferD.b 通道作为辉光遮罩
|
||
float Mask = Texture2DSample(GBufferDTexture, GBufferDSampler, SampleUV).b;
|
||
|
||
Sum += Mask;
|
||
Count += 1.0f;
|
||
}
|
||
}
|
||
|
||
// 归一化
|
||
OutColor = float4(Sum / Count, 0, 0, 1);
|
||
}
|
||
```
|
||
|
||
#### CharaGlowCompPS — 角色辉光合成
|
||
|
||
```hlsl
|
||
// 角色辉光 Pass 2：将模糊后的辉光遮罩与辉光颜色合成
|
||
// 叠加到场景颜色上
|
||
void CharaGlowCompPS(
|
||
float4 Position : SV_POSITION,
|
||
float2 InUV : TEXCOORD0,
|
||
out float4 OutColor : SV_Target0)
|
||
{
|
||
// 采样场景颜色
|
||
float4 SceneColor = Texture2DSample(SceneColorTexture, SceneColorSampler, InUV);
|
||
|
||
// 采样模糊后的辉光遮罩
|
||
float GlowMask = Texture2DSample(CharaGlowTexture, CharaGlowSampler, InUV).r;
|
||
|
||
// 减去原始遮罩（只保留扩散出去的边缘部分）
|
||
float OriginalMask = Texture2DSample(GBufferDTexture, GBufferDSampler, InUV).b;
|
||
GlowMask = saturate(GlowMask - OriginalMask);
|
||
|
||
// 以 CharaGlowColor 叠加辉光
|
||
float3 Result = SceneColor.rgb + GlowMask * CharaGlowColor.rgb * CharaGlowColor.a;
|
||
|
||
OutColor = float4(Result, 1.0f);
|
||
}
|
||
```
|
||
|
||
### C++ 端实现
|
||
|
||
```cpp
|
||
// REDPostProcess.h — 后处理 Pass 类型枚举
|
||
enum REDPostProcess_Type {
|
||
EREDPostProcess_DownSample, // 降采样
|
||
EREDPostProcess_BlurH, // 水平高斯模糊
|
||
EREDPostProcess_BlurV, // 垂直高斯模糊
|
||
};
|
||
|
||
// 基础后处理 Pass（降采样 + 模糊）
|
||
class FRCPassREDPostProcess : public TRenderingCompositePassBase<1, 1>
|
||
{
|
||
REDPostProcess_Type Type;
|
||
bool bToHalf; // 是否降采样到半分辨率
|
||
void RenderDownSamplingPass(FRenderingCompositePassContext& Context);
|
||
void RenderBlurHPass(FRenderingCompositePassContext& Context);
|
||
void RenderBlurVPass(FRenderingCompositePassContext& Context);
|
||
};
|
||
|
||
// Diffusion Filter Pass（亮度提取 + Screen 混合）
|
||
class FRCPassREDPostProcess_DiffusionFilter : public TRenderingCompositePassBase<2, 1> { ... };
|
||
|
||
// Diffusion Filter 2 Pass（Power + 阈值 + 可选 CharaGlow 合成）
|
||
class FRCPassREDPostProcess_DiffusionFilter2 : public TRenderingCompositePassBase<4, 1> { ... };
|
||
|
||
// CharaGlow Pass（可变半径 BoxBlur on GBufferD.b）
|
||
class FRCPassREDPostProcess_CharaGlow : public TRenderingCompositePassBase<1, 1> { ... };
|
||
```
|
||
|
||
```cpp
|
||
// PostProcessing.cpp — 后处理管线插入
|
||
// CVar 控制插入位置
|
||
static TAutoConsoleVariable<int32> CVarREDPostprocessAfterTranslucency(
|
||
TEXT("r.REDPostprocessAfterTranslucency"),
|
||
// 0: SeparateTranslucency 之前
|
||
// 1: SeparateTranslucency 之后
|
||
// 2: Bloom 之后
|
||
);
|
||
|
||
// AddREDPostProcess — 构建后处理图
|
||
static void AddREDPostProcess(FPostprocessContext& Context)
|
||
{
|
||
float pow = Context.View.FinalPostProcessSettings.DiffusionFilterLuminancePow;
|
||
// 创建降采样 → 水平模糊 → 垂直模糊 → DiffusionFilter2 节点链
|
||
FRenderingCompositePass* NodeDownSample = new FRCPassREDPostProcess(EREDPostProcess_DownSample, true);
|
||
FRenderingCompositePass* NodeBlurH = new FRCPassREDPostProcess(EREDPostProcess_BlurH, false);
|
||
FRenderingCompositePass* NodeBlurV = new FRCPassREDPostProcess(EREDPostProcess_BlurV, false);
|
||
|
||
// 可选：CharaGlow（角色辉光）
|
||
float area = Context.View.FinalPostProcessSettings.CharaGlowArea;
|
||
if (area > 0) {
|
||
FLinearColor color = Context.View.FinalPostProcessSettings.CharaGlowColor;
|
||
FRenderingCompositePass* NodeGlow = new FRCPassREDPostProcess_CharaGlow(color, area);
|
||
// ... 连接到图
|
||
}
|
||
|
||
// 最终 DiffusionFilter2 节点
|
||
float threshold = Context.View.FinalPostProcessSettings.DiffusionFilterLuminanceThreshold;
|
||
FRenderingCompositePass* NodeFinal = new FRCPassREDPostProcess_DiffusionFilter2(pow, threshold, bWithGlow);
|
||
}
|
||
```
|
||
|
||
## 关联文档
|
||
|
||
- [[RED自定义数据通道]] — CharaGlow 读取 GBufferD.b 通道
|
||
- [[BGMultColor全局色调]] — 另一个全局色彩控制系统
|
||
|
||
## 代码修改情况
|
||
|
||
| 文件路径 | 行号 | 修改类型 | 修改内容 |
|
||
|---------|------|---------|---------|
|
||
| `Shaders/Private/REDPostProcess.usf` | 全文 (473行) | **新增文件** | 完整自定义后处理着色器 |
|
||
| ↳ | L49~L57 | — | `PostProcessVS` 标准顶点着色器 |
|
||
| ↳ | L61~L86 | — | `PostProcessBlurVS` 高斯模糊顶点着色器（预计算7个采样点） |
|
||
| ↳ | L96~L105 | — | `ColorSampleWeight[7]` 高斯权重表 |
|
||
| ↳ | L117~L129 | — | `GetGrayscale` / `LerpSaturation` 辅助函数 |
|
||
| ↳ | L134~L137 | — | `DownSamplingPS` 降采样 |
|
||
| ↳ | L142~L191 | — | `BlurVerticalPS` 垂直高斯模糊（13-tap） |
|
||
| ↳ | L196~L246 | — | `BlurHorizonPS` 水平高斯模糊（13-tap） |
|
||
| ↳ | L251~L278 | — | `DiffusionFilterPS` 扩散滤镜（亮度提取 + max 混合） |
|
||
| ↳ | L283~L318 | — | `DiffusionFilter2PS` 扩散滤镜2（Screen 混合 + CharaGlow 合成） |
|
||
| ↳ | L323~L350 | — | `DiffusionFilter2WithOutCharaGlowPS` 不含辉光版本 |
|
||
| ↳ | L355~L376 | — | `DiffusionFilter2SepiaPS` 棕褐色变体 |
|
||
| ↳ | L383~L393 | — | `SoftFocus` 柔焦效果 |
|
||
| ↳ | L400~L430 | — | `Glow` 辉光（亮度阈值 + Screen 混合） |
|
||
| ↳ | L437~L455 | — | `CharaGlowPS` 角色辉光（可变半径 BoxBlur on GBufferD.b） |
|
||
| ↳ | L461~L470 | — | `CharaGlowCompPS` 辉光合成（叠加到场景 + mask） |
|
||
| `Source/Runtime/Renderer/Private/PostProcess/REDPostProcess.h` | 全文 (298行) | **新增文件** | 后处理 Pass 类声明（4个 Pass 类 + 枚举） |
|
||
| `Source/Runtime/Renderer/Private/PostProcess/REDPostProcess.cpp` | 全文 (1735行) | **新增文件** | 后处理 Pass 实现（Shader 绑定/参数设置/RT 管理） |
|
||
| `Source/Runtime/Renderer/Private/PostProcess/PostProcessing.cpp` | L100~L129 | 新增 | `#include "REDPostProcess.h"` + `CVarREDPostprocessAfterTranslucency` CVar |
|
||
| `Source/Runtime/Renderer/Private/PostProcess/PostProcessing.cpp` | L224~L661 | 新增 | `AddREDPostProcess` 完整后处理图构建函数 (~438行) |
|
||
| `Source/Runtime/Renderer/Private/PostProcess/PostProcessing.cpp` | L669~L681 | 修改 | 根据 CVar 在管线中插入 RED 后处理 |
|
||
| `Source/Runtime/Renderer/Private/PostProcess/PostProcessing.cpp` | L852~L908 | 新增 | CharaGlow 独立模式插入逻辑 |
|
||
| `Source/Runtime/Engine/Classes/Engine/Scene.h` | — | 修改 | 新增 `DiffusionFilterLuminancePow/Threshold`、`CharaGlowArea/Color` |
|