Hi everyone :slightly_smiling_face:. I've been ex...

# compose-ui-showcase

[Sergey Y.]

Hi everyone 🙂.

I've been experimenting with GPU rendering on Android, aiming to create efficient blurring effects, and have developed a project called Imla. Imla stands for "Haze" in Ukrainian and focuses on bringing fast and correct blurring to Jetpack Compose on Android, especially for versions prior to API 31.

Here's what I've been working on:
• Targets Android 6 and above
• Uses OpenGL ES 3.0 for GPU rendering
• Customizable blur radius and color tinting
• Blending with noise mask for frosted glass effect
• Gradient blur effects with blurring masks
• Not a library yet, but a playground for experimenting with different post-processing techniques
I'm excited to announce that I'm open-sourcing this project! You can find it on GitHub: [Imla GitHub Repository](https://github.com/desugar-64/imla)
The primary goal of this project is to explore Android GPU rendering and post-processing effects, finding the best way to achieve efficient blurring. The project is experimental and might evolve into a library in the future.

Any constructive feedback, comments, or suggestions would be greatly appreciated. 😄
Feel free to check out the project and let me know what you think!

p6_blur_demo.mp4gradient_blur.mp4

[Tgo1014]

Stared! I have a launcher that would would look very nice using this 😄

[Konstantin Tskhovrebov]

It is very cool! BTW, I noticed the same problem in every blur library: when a colored line goes under the edge of blurred background then the blur is being colored to bright (see screenshots of your video. the difference between them is ~1px scroll)

[Konstantin Tskhovrebov]

is any chance to fix it somehow?

[Sergey Y.]

Yes, this is due to how blurring works.
However, there are techniques to avoid this kind of shimmering, which I plan to implement later. Note that this issue is also present in standard Android blurring.

[Konstantin Tskhovrebov]

yes. as I said the problem is everywhere

[Sergey Y.]

For instance, a Kawase blurring filter should help.

[Sergey Y.]

During the downsampling of the texture before blurring, high-frequency details can cause jitter due to filtering. The Kawase filter works differently and might resolve this issue. Alternatively, applying a stronger blur could also help, and there are plenty of techniques for this.

[Sergey Y.]

If a line touches the edge during blurring, default techniques typically use clamping to the edge. This means the last pixel closest to the edge is repeated, affecting the final blur. When the kernel iterates out of bounds, it uses this repeated color, significantly contributing to the final averaged convoluted pixel value, leading to shimmering at the edges.

[Konstantin Tskhovrebov]

I'd expect that before the blurring
1) it takes a screenshot of a slightly bigger part of the background
2) it dimms colors on edges
3) use the result for blurring

[Sergey Y.]

Yes, this is one of the techniques to avoid shimmering, but it has its own drawbacks. For instance, it can create a vignette effect at the edges, especially noticeable with darker colors. If we have bright colors, this effect will be more apparent. Alternatively, we could mirror the last few rows of pixels beyond the bounds or use a similar approach.

[Sergey Y.]

However, using this technique can be challenging when trying to align blurred content with the background, especially when applying a mask to achieve a gradient blur.

[Chris Fillmore]

Congrats on opening it up! Starred

[Sergey Y.]

Thanks, a lot has been done, but there is still much to do. However, I believe it's a great start.

[markturnip]

will this work if we use a layer with UIKitViewController ?

[Sergey Y.]

@markturnip This project is not multiplatform; it is specifically targeted at Android and uses OpenGL ES, which was removed from iOS a long time ago in favor of Metal.

Moreover, implementing this on iOS is unnecessary because post-processing effects are supported out of the box on virtually every supported iOS version.

[Konstantin Tskhovrebov]

for multiplatform there is https://github.com/chrisbanes/haze by @cb

[Sergey Y.]

If you don't need to support blur effects on Android versions before 13, Chris Banes' Haze is an excellent library. It is much more robust as it leverages Android's native capabilities for UI effects.

[markturnip]

ah understood! I thought imla was an alternative to Haze. Haze doesn’t work with my UIKitViewControlleer. but you’re right, I can easily use a UIVisualEffectView in place