MIUI 6的毛玻璃效果的技术实现（实时模糊）

说说MIUI 6的毛玻璃效果的技术实现。

 

很久以前我们的文件夹打开和最近任务等几个地方就使用了毛玻璃效果，在技术上讲就是背景模糊。应该是比iOS 7的使用要早很多。不过那时候我们使用的是先对背景截图，再将其模糊处理，然后作为app的背景图，所以是一张静止的图片，当背景内容发生变化时模糊的图片并不会随之变化，因此比较生硬。而iOS 7的背景模糊则是实时的，当背景变化的时候，模糊内容也会实时的变化。这就把我们给比下去了。于是我们也不能闲着，既然做了，那就做好。然后我就开始做实时的背景模糊。

 

如果沿用之前的方式，先截图，再模糊，由于这个过程远远大于一帧的时间16.7毫秒。因此就算不停的更新背景，虽然也能呈现出变化的模糊背景，但会很卡顿，不流畅，不自然，资源消耗大。

 

于是考虑更为自然的实现方式：在Window上添加标记，SurfaceFlinger合并层的时候对其后面的内容用OpenGL ES进行模糊处理。

这种方式没有截图的过程，绘制的时候用OpenGL ES绘制，加上一些优化，最终轻松达到60FPS的满帧率。

 

下面说说代码的主要过程和一些关键点。

1. 需要背景模糊的Window给自己添加一个标记：FLAG_BLUR_BEHIND，这个标记是Android SDK提供的，因为Android的早期版本是有支持背景模糊的，不过由于他们不是用的OpenGL ES实时绘制，性能比较差，于是后来把这个功能给废弃了。我们便顺理成章的又把这个标记给用起来。第三方应用也完全可以使用这个标记在MIUI 6用上这个特性。
2. 在WindowManagerService这边检测到Window有这个标记后，将标记传给SurfaceFlinger中Window对应的Layer。
3. Layer收到背景模糊标记后，分配一个Texture。
4. 在SurfaceFlinger合成层的方法doComposeSurfaces中，把背景模糊的层后面的内容用OpenGL ES以模糊的方式绘制到之前分配的Texture中，于是构建好了模糊的内容。在接下来绘制这个层的时候先绘制含有模糊内容的Texture。

整个过程大致就是这样。

另外，由于在大部分情况下SurfaceFlinger合成层是使用的Hardware Composer来合成的，并不是OpenGL ES，因此我们需要检测发现有背景模糊层的时候指明不使用Hardware Composer。

 

模糊算法的主要耗时点是很大的采样次数。我们想了一些办法来优化性能：

1. 将图片先缩小，再模糊，绘制的时候再放大。由于先缩小再放大也是一种模糊方法，因此控制得好的话并没有什么问题。但防止缩小太厉害会导致背景移动的时候画面闪烁，我们会逐级缩小。（GL_TEXTURE_EXTERNAL_OES不支持mipmap）
2. 模糊的主要实现过程使用OpenGL ES Fragment Shader来实现，先横向计算一遍，再纵向计算一遍，这样处理则每个像素的采样次数从n*n变成了n*2（n是模糊直径）。事实上我们在背景模糊的Layer里分配了两个Texture，循环使用。
3. 采样取像素值的时候并不需要每个像素取一次，而是利用OpenGL ES中纹理采样的线性过滤特性，在两个像素中间取值，返回的是两个像素的平均值，这样可以让采样次数减半，效果不变。（真实代码中并不是完全中间，而是根据权重计算位置）
4. 如果上一帧已经产生了模糊的Texture，而这一帧背景又没有变化，则直接使用上一帧的就行了，不需要再做模糊处理。