SSAO By Computer Shader(二)
开启一个专题，SSAO By Computer Shader。使用Computer Shader实现SSAO效果。第一篇Computer Shader 入门 。第二篇SSAO理论知识。第三篇SSAO By Computer Shader,使用Computer Shader实现SSAO效果。
文章目录
前言
承接上一篇Compueter Shader入门，接下来我们进入SSAO的专题。
一、SSAO是什么？
来看一下百度百科对他的定义。
SSAO全称“Screen-Space Ambient Occlusion” （屏幕空间环境光遮蔽）。SSAO通过采样象素周围的信息，利用“逐象素场景深度计算”技术计算得出的深度值直接参与运算。SSAO运用很多游戏中，用于增加画面的立体感，增加视觉视觉效果。比如以下视觉效果.
我们可以清晰的看到SSAO带来的视觉效果上的提升。
二、SSAO实现原理
我们来看一下实现原理。前面有讲到SSAO通过采样象素周围的信息，利用“逐象素场景深度计算”技术计算得出的深度值直接参与运算。
SS代表Screen-Space,表示我们是在屏幕空间发生的运算，AO就是Ambient Occlusion，环境光遮蔽，大致上指的是几何物体的拐角处，因为受光不全面（被相邻的面挡光／遮蔽），导致变暗。
实时渲染下做AO，基本做法都是计算出一张全屏的AO单通道(float)纹理，有了该纹理后，在做lighting pass时就可以逐像素采样该AO纹理，得到一个遮蔽率 （occlusion factor），对fragment的颜色值乘以该遮蔽率（遮蔽率越接近0，颜色更黑，遮蔽率越接近1，颜色则贴近原来的色），就完成了AO操作。
整体流程大致如下
从上图我们可以看到结合视空间坐标，法线，深度信息，随机向量生成AO图，经过模糊后最后的实现效果。
我们需要完成AO图的渲染。来看看我们Demo场景的原生图，我们的场景很简单，由两个面片和三个圆组成。
这是我们渲染后的AO图
三、SSAO具体流程
AO图的原理是：确定一个点是否被其周围点被遮蔽而影响，我们需要采样其周围点的深度信息。与自身做对比，低于自身深度，说明其被遮蔽。这样便利所有随机点得到一个遮蔽率的值写入我们的AO图里。
1、第一步
所以第一步获取自身坐标信息以及深度信息。
以屏幕中每一个像素借助采样深度图转化为视空间下的点。这样就完成了我们第一步。
2、第二步
其次是生成随机点
这里我们用拟合二次方程生成一个三维坐标，x,y轴的值域为（-1，1），z值值域在（0，1），为什么z轴要特殊处理呢，我们后面会得出答案。
3、第三步
第三步半球空间。
我们为了方便采样我们选择了半球采样
我们将随机点转换到以黑点为圆心半球空间。黑点就是我们第一步的像素坐标转化到视空间下的坐标。低于黑点的说明其被遮蔽，我们标了灰色圆，空心圆则表示其没有被遮蔽。从图中我们可以看到半球垂直于平面，使之不会被其他对象不会在物体内部。导致采样错误。所以我们需要以视空间下的点为圆形创建坐标系，并将随机点转化到该半圆空间中。所以我们进入第四步。
4、第四步
第四步，半圆空间坐标创建
我们知道坐标系与坐标系直接的转换可以通过矩阵乘法完成。三维坐标系的转换需要一个4x4的矩阵。矩阵的前三行三列表示坐标系转换过程中发生的方向改变，包括旋转，缩放等。而第四列代表位移。
为此我们准备这些数据。以视空间法线作为Y轴，随机向量创建x轴，叉积得到z轴，创建空间转换矩阵TBN.如下图所示，我们以当前视空间下顶点法线作为y轴，再随机一点与法线做点积，得到随机向量在法线上的投影，再乘以法线。最后用随机向量减去得到切线，代表x轴。具体如下图所示
得到两个垂直的坐标轴后，我们直接通过叉积得到第三个坐标轴，从而得到我们的转换矩阵TBN。
5、第五步
第五步便利随机点
我们开始便利随机点，先将其转换到新的坐标系下，乘以半圆空间半径最后加上圆心值，得到在半圆空间中的随机点，其次是我们的随机点z都>0，所以不存在半圆空间外的点。如下图所示。
6、第六步
第六步对比深度
我们将生成的采样点转换到裁剪空间下在转换到UV空间中，再次采样深度图，进行深度对比。最后得到我们AO值，写入AO图。
7、第七步
最后一步模糊处理，这里就不做过多解释了。以上就是AO图的实现原理了。
结果如下：
总结
以上就是SSAO的实现原理。并不复杂。接下来我们进入专题最后一篇，SSAO by Computer Shader