Talk about the technical realization of the MIUI 6 glass effect. A long time ago, our folder opened and the recent task and so on a few places to use the glass effect, technically speaking is the background blurred. It should be much earlier than iOS 7. But then we use the background, then blur it, and then as the app's background, so it is a static picture, when the background content changes when the blurred picture will not change, so more blunt. The background blur of iOS 7 is real-time, and when the background changes, the blurred content changes in real time. This gives us a better way to go. So we can not idle, since it is done, then do a good job. Then I started to do real-time background blur. If you follow the previous way, first, then blur, because the process is much larger than a frame of time of 16.7 milliseconds. So even if you keep updating the background, although it can also show the blurred background of change, but it will be very lag, not smooth, unnatural, resource consumption. Consider the more natural way to do this: Add tags to the window and surfaceflinger the content behind it with OpenGL ES when merging layers. This way there is no process to draw when using OpenGL ES to draw, plus some optimizations that ultimately easily reach the full frame rate of 60FPS. Let's talk about the main process and some key points of the code.
- A window with a blurred background is required to add a tag to itself: Flag_blur_behind, this tag is provided by the Android SDK, since earlier versions of Android are supported with background blur, but since they are not used in real-time rendering of OpenGL ES, Performance is poor, so later put this function to abandoned. It is logical for us to use this mark again. Third-party applications can also use this tag in MIUI 6 for this feature.
- After the Windowmanagerservice side detects that the window has this tag, it passes the tag to the layer corresponding to the window in Surfaceflinger.
- When the layer receives a background blur tag, it assigns a texture.
- In the method docomposesurfaces of Surfaceflinger synthesis layer, the content behind the blurred background is drawn to the previously assigned texture by using OpenGL es in a fuzzy way, so the fuzzy content is constructed. When you draw this layer next, draw the texture that contains the blurred content.
This is the whole process. Also, since in most cases the Surfaceflinger synthetic layer is synthesized using the hardware Composer, not OpenGL ES, we need to detect when a background blur layer is found that does not use hardware Composer. The main time-consuming point of the fuzzy algorithm is a large number of sampling times. We thought of some ways to optimize performance:
- Reduce the image first, then blur, and then zoom in when you draw. Since zooming in and out is also a vague method, there is no problem with good control. But to prevent it from shrinking too much will cause the background to move when the screen flashes and we will zoom in. (Gl_texture_external_oes does not support Mipmap)
- The main implementation of the fuzzy process using OpenGL ES Fragment shader to achieve, first horizontal calculation, and then the longitudinal calculation again, so that the number of samples per pixel from n*n into n*2 (n is the fuzzy diameter). In fact, we've allocated two texture in the background blur layer, which we use in a loop.
- Sampling pixel values does not need to be taken once per pixel, but using the linear filtering characteristics of texture sampling in OpenGL ES, the median of two pixels is returned, which is the average of two pixels, so that the number of samples can be halved and the effect will be the same. (not exactly the middle of the real code, but the location based on the weights)
- If the previous frame has produced a blurred texture, and the frame background has not changed, then directly using the previous frame on the line, do not need to do fuzzy processing.
Technical implementation of the MIUI 6 glass effect (real-time Blur)
