I’m currently tackling the challenge of creating a NUI with a background blur effect. However, it seems that FiveM’s current Chromium version isn’t playing nice with the backdrop-filter: blur(50px); class, throwing a wrench into my plans.
After scouring the forums, it’s clear that there’s a scarcity of information on this issue. Some have proposed a workaround involving rendering a game view and then adding a Three.js (WebGL) object with a blur effect. But, after putting it through its paces, it’s apparent that this approach drags down performance, making for a less-than-ideal user experience.
So, I’m turning the community for insights. Is there a smarter way to navigate around this limitation while keeping performance in check? Your expertise would be greatly appreciated in helping me find a solution.
I believe this wouldn’t be possible, since the NUI is an overlay seperate from the graphics used to render the game and the rendering of the game view is inaccessible to the sandbox environment.
The closest thing to what you’d like to do might be this post here:
Yeah, that appears to be the situation based on my findings. It’s frustrating because the blur effect on UI elements would looks fantastic. I genuinely hope a workaround can be found.
It uses glsl instead of backdrop-filter (with this you can still use backdrop-filter on square div’s but it’s one data value set to achieve the same thing)
Yeah it’s not a perfect solution but it’s something
