webgl - 实现景深效果（二）

webgl - 实现景深效果（二）

上回我们说到，仅仅使用简单的混合会导致渲染出现两个问题：

• 后景混入了对焦区域的颜色
• 前景边缘过于清晰

那么如何解决这两个问题呢？答案是对前景和后景分开做处理。我们可以先处理后景，再处理前景。

后景处理

后景混入前景的问题好办，在计算模糊时，我们对范围内每一个像素做一个判断，如果是前景或者对焦区域的点，就将其排除掉。

前景处理

前景边缘过于清晰的问题就需要用点小技巧了：首先，我们计算每一个像素的coc。如果是对焦范围内的点或后景，其coc置为零。这样可以得到一张coc图像，对该图像做模糊，用模糊后的coc图像做混合，这样就可以让前景的边界不那么清晰。但光是这样还是会有一点问题，因为模糊之后，前景边缘本来是1的部分会变得小于1，这样看起来边缘还是有点生硬：

注意看酒桶边缘，看起来还是不太理想。所以我们要对模糊后的coc图像做一个逐像素的处理：
$$D=max(D0,2Db-D0)$$

这个公式是怎么来的呢？假设我们的coc图像有两个区域，两个区域有明显的分界线。在分界线一侧的coc值为D0, 另一侧为D1。那么我们可以近似认为，对模糊后的coc值，有：