Bokeh 效果性能慢和锯齿问题怎么解决？

一位球友在看过 抖音、视频号流行的 Bokeh 效果是怎么实现的？ 这篇文章，刚好也在用里面的圆形 Bokeh 效果，但是却遇到了性能和锯齿问题，希望给出一些建议。

性能和锯齿这两个问题，基本上是初学者经常碰到的，今天就针对 Bokeh 这个效果存在的问题展开讲一讲。

Bokeh 效果性能慢、卡顿的问题

Bokeh 效果性能慢的根本原因就是运算量过大，而运算量主要与渲染区域大小和每个像素的采样次数相关，注意渲染区域的大小指的不是输入纹理的尺寸。每个像素的采样次数与你 Shader 内部的实现有关，比如下面的代码：

可以看到里面有 2 个 for 循环，假如 kenel=10 , 那么每个像素可能需要采样 100 次，这样比正常渲染一张图像的运算量要增大 100 倍（实际可能更多）。

从 shader 可以看到每个像素会做 100 ~ 200 次的采样，这种过多的采样会导致性能过慢，所以根本的解决办法就是减少采样次数。

这样，性能优化的思路就分为两个方向，降低渲染图像的尺寸或者减少采样次数。

但是你要是直接减小每个像素的采样次数，又会导致 bokeh 光圈形状偏小，这个时候最好的办法就是要适当地降低渲染图像的分辨率，从而减少总体的运算量。

降低分辨率做效果会有一个副作用，就是可能会出现锯齿问题，下面来解决锯齿问题。

Bokeh 效果锯齿问题

解决锯齿问题首先考虑使用多重采样，多重采样同样也会增大运算量，不过这个操作起来还挺麻烦的，也有兼容性问题。

在生产中一般使用模糊解决锯齿问题，增加几个像素的模糊相当于给锯齿有个填充效果，使边缘变得平滑一些。

但是要控制好模糊的强度，不然效果又糊掉了。