NUI background blur

myFavShrimp · May 28, 2021, 6:11pm

Hello dear people.
I want to achieve some kind of background blur in my custom ui like it’s done in the fivem main menu (blur the game behind every ui component). I tried using the backdrop-filter css property. The problem is that every resource is kept in it’s own iframe and doesn’t reallt know about the background.
I inspected the fivem main menu using fivem’s devtools/inspector on http://127.0.0.1:13172/. There the whole magic seems to be achieved using a canvas. But I couldn’t find any docs on how to do this.

Is it possible for resource developer to achieve this kind of effect? Is there any documentation on how to do so?

Thanks for any help

Edit:
I want something like on the left side but I get what’s on the right side …

SaltySea · May 28, 2021, 6:18pm

you can try overlaying a blurred image effect

myFavShrimp · May 28, 2021, 6:27pm

Thank you for your reply. I have already considered this as the last option if I don’t find out how to get a proper blur to work. However this effect could only be used with high opacity as ui with high transparency would break the illusion.
I’m still hopeful that there is a way to properly blur the game behind every component

SaltySea · May 28, 2021, 6:29pm

have you tried any of these CSS filter Property

myFavShrimp · May 28, 2021, 6:37pm

From my understanding those would not work as they only affect the object they are applied to. They can certainly be used for the fake blur with high opacity but what I want to achieve is that everything behind an object (e.g. a div) is affected (blurred). This can be done using the backdrop-filter property which is working in fivem. But the nui resource doesn’t know about the game displayed behind the ui. As mentioned above the fivem main menu seems to be working around this somehow which is what i am trying to do

nta · May 28, 2021, 6:51pm

github.com

citizenfx/fivem/blob/ecd3ef7a3c16a66d77d772e495e084b4598da6b0/ext/cfx-ui/src/app/app.component.ts#L18-L170


// from fxdk
const vertexShaderSrc = `
  attribute vec2 a_position;
  attribute vec2 a_texcoord;
  varying vec2 textureCoordinate;
  void main() {
    gl_Position = vec4(a_position, 0.0, 1.0);
    textureCoordinate = a_texcoord;
  }
`;


const fragmentShaderSrc = `
varying mediump vec2 textureCoordinate;
uniform sampler2D external_texture;
void main()
{
  gl_FragColor = texture2D(external_texture, textureCoordinate);
}
`;

This file has been truncated. show original

myFavShrimp · May 28, 2021, 6:57pm

Thank you very much! God bless you and your family!
I’ll try to get this to work and will mark your post as solution later

Tuncion · January 28, 2022, 7:07pm

Could you send the solution to the problem in here? I currently have the same problem and would like to find the solution.

ZhoNNz · March 2, 2022, 12:33pm

whats’a solution

COSSART · June 4, 2022, 10:38pm

Super_Cool_Ninja · January 7, 2023, 8:18pm

Or you can use TimeCycleModifier which does the trick as well.

SetTimecycleModifier(“Bloom”);
SetTimecycleModifierStrength(2.8);

FuTTiiZ · December 8, 2023, 4:58am

How did you implement this?