SSAO By Computer Shader(三)

开启一个专题，SSAO By Computer Shader。使用Computer Shader实现SSAO效果。第一篇Computer Shader 入门。第二篇SSAO理论知识。第三篇SSAO By Computer Shader,使用Computer Shader实现SSAO效果。

文章目录

SSAO By Computer Shader(三)
前言
一、准备工作---------代码创建
二、实现流程
- 1.Cs编写----------CommandBuffer设置渲染顺序
- 2.Cs编写---------参数准备
- 3.Computer Shader编写----------AO计算
- 4.Computer Shader编写----------AO模糊
- 4.Shader编写----------融合
- 5.FrameDebugger分析
总结

前言

开启一个专题，SSAO By Computer Shader。使用Computer Shader实现SSAO效果。第三篇SSAO By Computer Shader 。我们已经大致了解Computer Shader 的实际用法以及SSAO效果的实现原理，我们将两者结合一下。

一、准备工作---------代码创建

创建一个控制Computer Shader的脚本，以及两个Computer文件分别用于生成AO图以及模糊处理，最后一个Shader文件用于实际渲染屏幕。

二、实现流程

1.Cs编写----------CommandBuffer设置渲染顺序

首先我们需要修改Computer Shader 执行的顺序，我们希望他在所有对象渲染后再执行,但是我们不希望他受到屏幕后处理的影响，这里我们用到CommandBuffer 类。一个功能及其强大的模块类。命令缓冲列表，可以执行的图形命令。

我们将Compuetr Shader的控制权交给CommandBuffer。首先注册CommandBuffer的渲染顺序。我们在ImageEffect之前激活CommandBuffer,
ImageEffect 就是我们的屏幕效果流程。

代码如下（示例）：

  void UnregisterCommandBuffers(){_camera.RemoveCommandBuffer(CameraEvent.BeforeImageEffects, _renderCommand);}void RegisterCommandBuffers(){_camera.AddCommandBuffer(CameraEvent.BeforeImageEffects, _renderCommand);}

2.Cs编写---------参数准备

在LateUpdate()函数中我们触发PushDownsampleCommands（_renderCommand），并将我们的CommandBuffer作为参数传入。
在PushDownsampleCommands函数中，我们主要做这几件事情。

首先第一步参数准备
我们需要生成随机点。我们调用GenSampleKernal（）函数获取随机点。

我们将循环n个随机点，随机点的生成范围x,y轴（-1，1），z轴（0-1）
其次我们要对比深度信息，我们需要Computer Shader 中采样到深度图以及法线信息。怎么传进去是一个问题。
为此我们需要申请一张RT存放深度，法线信息，再传入Computer Shader。我们将设置渲染目标为我们申请的RT,_depthCopy。调用DrawProcedural()函数绘制几何体。并用我们bitMat的Pass1来执行渲染。
bitMat中Pass1很简单，单纯渲染法线深度图。

  Pass{CGPROGRAM#pragma vertex vert_procedural#pragma fragment fragsampler2D_float _CameraDepthNormalsTexture;float4 frag(v2f_img i) : SV_Target{return tex2D(_CameraDepthNormalsTexture, i.uv);}ENDCG}

得到这样效果。

这样我们的深度，法线信息就存入到_depthCopy 的RT中。
进入第二步参数传入

我们获取Computer Shader入口索引，CommandBuffer同样有提供Commputer Shader交互的接口。我们将深度法线图_depthCopy 传入，将_linearDepth 作为我们Computer Shader的输入输出，我们将对其写入数据。以及其他常规参数包括随机点集合，半圆半径的等参数。
最后我们激活 Computer Shader ,threadGroupsX,threadGroupsY,threadGroupsZ。我们线程组分配分别是屏幕分辨率/ 8 以及threadGroupsZ 1，简化维度。
以下是CS的完整代码

    void PushDownsampleCommands(CommandBuffer cmd){_sourse.PushAllocationCommand(cmd);cmd.Blit(BuiltinRenderTextureType.CurrentActive, _sourse.id);GenSampleKernal();_depthCopy.PushAllocationCommand(cmd);cmd.SetRenderTarget(_depthCopy.id);cmd.DrawProcedural(Matrix4x4.identity, _blitMaterial, 0, MeshTopology.Triangles, 3);_linearDepth.PushAllocationCommand(cmd);var cs = _upsampleCompute;var kernel = cs.FindKernel("CSMain");cmd.SetComputeTextureParam(cs, kernel, "LinearZ", _linearDepth.id);cmd.SetComputeTextureParam(cs, kernel, "Depth", _depthCopy.id);cmd.SetComputeVectorArrayParam(cs, "SamplePoint", samplePoint.ToArray());cmd.SetComputeFloatParam(cs, "Bias", bias);cmd.SetComputeFloatParam(cs, "Stength", strength);cmd.SetComputeFloatParam(cs, "CameraWidth", _camera.pixelWidth);cmd.SetComputeFloatParam(cs, "CameraHeight", _camera.pixelHeight);cmd.SetComputeFloatParam(cs, "SamplePointCount", samplePointCount);cmd.SetComputeFloatParam(cs, "SampleKernelRadius", sampleKernelRadius);cmd.SetComputeMatrixParam(cs, "InverseProjectionMatrix", _camera.projectionMatrix.inverse);cmd.DispatchCompute(cs, kernel, 166, 96, 1);_ao_result.PushAllocationCommand(cmd);var blur_cs = _blurCompute;var blur_kernel = blur_cs.FindKernel("CSMain");cmd.SetComputeTextureParam(blur_cs, blur_kernel, "AOTEX", _linearDepth.id);cmd.SetComputeTextureParam(blur_cs, blur_kernel, "AO_Result", _ao_result.id);cmd.SetComputeTextureParam(blur_cs, blur_kernel, "Depth", _depthCopy.id);cmd.SetComputeFloatParam(blur_cs, "BilaterFilterFactor", 1f - bilaterFilterStrength);cmd.SetComputeVectorParam(blur_cs, "BlurRadius", new Vector4(blurRadius, 0, 0, 0));cmd.DispatchCompute(blur_cs, blur_kernel, 166, 96, 1);cmd.SetGlobalTexture("_AOTexture", _ao_result.id);cmd.SetGlobalTexture("_MainTex", _sourse.id);cmd.Blit(BuiltinRenderTextureType.CurrentActive, BuiltinRenderTextureType.CameraTarget, _blitMaterial, 1);}

3.Computer Shader编写----------AO计算

我们来看看这个Computer Shader实现了什么逻辑

// Each #kernel tells which function to compile; you can have many kernels
#pragma kernel CSMain#include "UnityCG.cginc"
#include "noiseSimplex.cginc"
// Create a RenderTexture with enableRandomWrite flag and set it
// with cs.SetTexture
RWTexture2D<float4> LinearZ;
#define MAX_SAMPLE_POINT_COUNT 64
CBUFFER_START(CBO)float Bias;float Stength;float CameraWidth;float CameraHeight;float SamplePointCount;float SampleKernelRadius;float4x4 InverseProjectionMatrix;
CBUFFER_END
float4 SamplePoint[MAX_SAMPLE_POINT_COUNT];
Texture2D<float4> Depth;

同常规Shader一样，我们需要定义参数，分别是我们在cs那边传入的参数。LineZ 对应cs的_linearDepth，我们将其标记为可读可写，他将作为我们的返回值存储我们的AO值。
来看看我们的核心计算逻辑。

我们先看看一下上部分逻辑。差不多分为三块。
第一线程分配
首先我们要分配线程数numthreads(8,8,1)我们填的是8，8，1基本就是默认值。SV_DispatchThreadID （Int3）当前线程在所有线程组中所有线程里的ID。
第二部获取像素坐标对应视空间上的点。
首先这里的像素坐标就等于我们的id了，我们需要得到当前像素坐标的深度以及法线信息，我们可以直接采样传入_depthCopy得到。我们需要将当前像素坐标转化为视空间下的点，将其转到裁剪空间下再经过透视矩阵的逆矩阵变化到视空间下。乘上深度值得到像素坐标对应视空间上的点。
第三步，创建半圆空间转换矩阵TBN。
我们创建随机向量，减去随机向量与法线点积乘上法线向量的结果，得到切线向量。通过叉积得到第三个向量组成我们的TBN矩阵。
我们来看下部分逻辑

同样分为三个部分，
第一部分生成采样点。
我们遍历随机点转换到半圆空间中，加上半圆空间原点生成半圆空间向量。再通过裁剪矩阵，归一化转换到UV空间生成我们的深度采样点。
第二步，深度比较
将采样点采样深度图得到采样深度,与原像素点深度做比较，大于返回1,小于返回0。再乘上一个范围权重，距离越近ao效果越明显。经过1-取反后强化深度效果写入我们的RT,LinearZ。
来看看frame debug的效果

我们我们的渲染流程发生在ImageEffect之前，右边分别是我们的Kernael名字，线程组分配，法线深度图，ao图以及其他参数。以上就是Computer Shader的逻辑以及实现效果了。
具体代码如下

// Each #kernel tells which function to compile; you can have many kernels
#pragma kernel CSMain#include "UnityCG.cginc"
#include "noiseSimplex.cginc"
// Create a RenderTexture with enableRandomWrite flag and set it
// with cs.SetTexture
RWTexture2D<float4> LinearZ;
#define MAX_SAMPLE_POINT_COUNT 64
CBUFFER_START(CBO)float Bias;float Stength;float CameraWidth;float CameraHeight;float SamplePointCount;float SampleKernelRadius;float4x4 InverseProjectionMatrix;
CBUFFER_END
float4 SamplePoint[MAX_SAMPLE_POINT_COUNT];
Texture2D<float4> Depth;[numthreads(8,8,1)]
void CSMain (uint3 id : SV_DispatchThreadID)
{float3 col;// TODO: insert actual code here!//深度值float pPointDepth;//法线值float3 viewNormal;float4 depth = Depth[id.xy] ;DecodeDepthNormal(depth, pPointDepth, viewNormal);float2 uv_pos = float2(id.x / CameraWidth, id.y / CameraHeight);float4 clips = float4(uv_pos * 2.0  - 1.0, 1, 1);float4 viewRay = mul(InverseProjectionMatrix, clips);viewRay = viewRay / viewRay.w;float3 viewPos = pPointDepth * viewRay;float noise = perlin(uv_pos.x, uv_pos.y);float noise2 = perlin(uv_pos.x + 0.1, uv_pos.y + 0.1);float noise3 = perlin(uv_pos.x - 0.1, uv_pos.y - 0.1);float3 randvec = float3(noise, noise2, noise3);float3 tangent = normalize(randvec - viewNormal * dot(randvec, viewNormal));float3 bitangent = cross(viewNormal, tangent);float3x3 TBN = float3x3(tangent, viewNormal, bitangent);int sampleCount = SamplePointCount;float oc = 0.0;for (int i = 0; i < sampleCount; ++i){float3 randomVector = mul(TBN, SamplePoint[i].xyz);float3 randomPos = viewPos + randomVector * SampleKernelRadius;float3 rclipPos = mul((float3x3)unity_CameraProjection, randomPos);float2 rscreenPos = (rclipPos.xy / rclipPos.z) * 0.5 + 0.5;float samplePointDepth;float3 randomNormal;rscreenPos = float2(rscreenPos.x * CameraWidth, rscreenPos.y * CameraHeight);float4 rcdn = Depth[rscreenPos.xy] ;DecodeDepthNormal(rcdn, samplePointDepth, randomNormal);float rangeCheck = smoothstep(0.0, 1.0, SampleKernelRadius / abs(viewPos.z - samplePointDepth));oc += (pPointDepth >= samplePointDepth + Bias ? 1.0 : 0.0) * rangeCheck;}oc = 1.0 - oc / sampleCount;col = pow(oc, Stength);LinearZ[id.xy] = float4(col, 1);
}

4.Computer Shader编写----------AO模糊

进入下一个环节模糊处理

跟前面一样我们同样获取模糊的computer Shader的入口索引，以及参数传入。最后设置全局贴图，将AO图传入shader

模糊中，我们直接偏移多次UV坐标，多次采样然后取均值返回。
最后就是我们的屏幕渲染了。

以下是Blur Computer Shader的具体代码

// Each #kernel tells which function to compile; you can have many kernels
#pragma kernel CSMain#include "UnityCG.cginc"RWTexture2D<float4> AO_Result;
#define MAX_SAMPLE_POINT_COUNT 64
CBUFFER_START(CBO)
Texture2D<float4> AOTEX;
Texture2D<float4> Depth;
float BilaterFilterFactor;
float4 BlurRadius;
CBUFFER_ENDfloat3 GetNormal(float2 uv){//获得法线贴图float4 cdn = Depth[uv] ;return DecodeViewNormalStereo(cdn);}half CompareNormal(float3 normal1, float3 normal2){return smoothstep(BilaterFilterFactor, 1.0, dot(normal1, normal2));}[numthreads(8,8,1)]
void CSMain (uint3 id : SV_DispatchThreadID)
{float2 delta = BlurRadius.xy;float2 uv = id.xy;float2 uv0a = id.xy - delta;float2 uv0b = id.xy + delta;float2 uv1a = id.xy - 2.0 * delta;float2 uv1b = id.xy + 2.0 * delta;float2 uv2a = id.xy - 3.0 * delta;float2 uv2b = id.xy + 3.0 * delta;float3 normal = GetNormal(uv);float3 normal0a = GetNormal(uv0a);float3 normal0b = GetNormal(uv0b);float3 normal1a = GetNormal(uv1a);float3 normal1b = GetNormal(uv1b);float3 normal2a = GetNormal(uv2a);float3 normal2b = GetNormal(uv2b);fixed4 col = AOTEX[uv];fixed4 col0a = AOTEX[uv0a];fixed4 col0b = AOTEX[uv0b];fixed4 col1a = AOTEX[uv1a];fixed4 col1b = AOTEX[uv1b];fixed4 col2a = AOTEX[uv2a];fixed4 col2b = AOTEX[uv2b];half w = 0.37004405286;half w0a = CompareNormal(normal, normal0a) * 0.31718061674;half w0b = CompareNormal(normal, normal0b) * 0.31718061674;half w1a = CompareNormal(normal, normal1a) * 0.19823788546;half w1b = CompareNormal(normal, normal1b) * 0.19823788546;half w2a = CompareNormal(normal, normal2a) * 0.11453744493;half w2b = CompareNormal(normal, normal2b) * 0.11453744493;half3 result;result = w * col.rgb;result += w0a * col0a.rgb;result += w0b * col0b.rgb;result += w1a * col1a.rgb;result += w1b * col1b.rgb;result += w2a * col2a.rgb;result += w2b * col2b.rgb;result /= w + w0a + w0b + w1a + w1b + w2a + w2b;AO_Result[id.xy] = float4(result, 1);
}

4.Shader编写----------融合

在我们的渲染Shader中，我们已经知道ao图以及原图数据了，直接采样融合即可

 Pass{CGPROGRAM#pragma vertex vert_img2#pragma fragment fragsampler2D _AOTexture;sampler2D _MainTex;float4 frag(v2f_img i) : SV_Target{fixed ao = tex2D(_AOTexture, i.uv).r;fixed4 final_col = tex2D(_MainTex, i.uv);return final_col * ao;}ENDCG}

5.FrameDebugger分析

以下就是我们最终效果图

在帧事件中分别在这四个事件中完成

1.渲染深度图（shader完成）
2.计算ao值（computer shader完成）
3.模糊ao效果（computer shader完成）
4.融合（shader完成）

总结

以上就是SSAO By Computer 的全部内容，若有错误，欢迎纠正。