webgl - 实现景深效果（一）

webgl - 实现景深效果（一）

前言

最近对摄影颇有兴趣，入了一个定焦头，能拍出有景深效果的片了。因为对景深效果有点着迷，就想着在渲染中能不能实现类似的效果。玩了八方旅人之后发觉是这是可行的，于是google之，找了一些资料，自己撸了一个简单的景深效果。

现实中相机产生景深效果原理

相机在成像的时候，存在一个合焦面，只有处于合焦面上的物体成像是最清晰的，而合焦面之外的平面所成的像，是模糊的。

现实世界中的一点在照片上成的像，并不是理想的一个点，而是一个光斑。处在合焦面上的点，在相机上所成的像，可认为是一个理想的点。而不在合焦面上的点，所成的像是一个光斑。光斑的大小称为circle of confusion（coc） 。

离合焦面越远，光斑越大，所以将相机对着近处物体对焦，越远的物体越模糊；光圈越大，光斑也越大，所以用大光圈更容易拍出景深效果。

实现思路

引用一张来自unreal官方文档的图。[1]

将相机坐标系空间分为五个部分。两个Blurred区域是全糊的，NEAR Transition和Far Transition区域是由清晰到糊过渡的，Focused区域是清晰的。具体的实现思路就是，创建一张模糊图像（可用box blur， guassian blur），与原始图像混合。在Blurred区域，模糊图像的比重为1，原始图像的比重为0。在Focused区域，模糊图像比重为0，原始图像比重为1。两个Transition区域就线性混合。

实现

首先，实现景深效果属于后期处理，