bfraboni / FastGaussianBlur

Fast Gaussian Blur algorithm
97 stars 18 forks source link

does fastgaussianblur support rounded stuff? #10

Open DeformedSAS opened 2 months ago

DeformedSAS commented 2 months ago

i'm asking this because valves csgo uses fast gaussian and i'm modding the ui but i'm unable to get blur on any round panel

bfraboni commented 2 months ago

I'm not sure I get the use case , could you be more specific? 🤔

I primarily wrote an 'full' image blur , you give it an image buffer and it gives you a blurred result of the same size. If you want diffusion larger than the input , i e. what a true Gaussian blur does, that's a different problem. One way to solve that would be to give a buffer with the desired image and an alpha channel, and add a black padding border where alpha =0. Then the blur would bleed into the padded region and give a 'rounded' look for an input rectangle as well as the alpha for composition with the background. Though , I'm not sure I understood the question correctly, there might be some derived/other versions of fast blur that could fit your needs better, especially if it runs on a GPU.

DeformedSAS commented 2 months ago

so basically when i was trying to add blur behind the radar it showed up briefly when my game froze and then it disappeared instantly.. i couldn't figure out why this happens so i made a new round panel on the hud that has nothing else other than round css and layout and the blur did the exact same thing as on the radar

image

DeformedSAS commented 2 months ago

this is an older screenshot but i'm still wondering if this blur system that valve uses (blur: fastgaussian) supports round things . here it appeared like a box even tho in counter strike 2 (mipmapgaussian) it's rounded. i'm trying to recreate cs2's core ui in csgo for the past few months

DeformedSAS commented 2 months ago

also sorry if you can't understand what i'm saying, my english is not that good as it's not my native language

bfraboni commented 2 months ago

It is not related to your writing , no worries.

I'm just thinking the game UI is usually computed on the GPU as an additional render pass, so you can use shaders to write a dedicated gaussian blur on your components. You need to compute the blur for every frame so a blur like that usually needs to be faster than mine.

But for the rounded shape, if you add a black border of size 2 or 3 times sigma around your shape , the fast blur will bleed and give you the rounded look. If you don't the blur will be limited to the original region by construction.

DeformedSAS commented 2 months ago

well i don't know how valve implemented fastgaussian blur system into their game and ui, but the blur itself should still appear but just in a box like thing but for some reason in my case it just appeared for a very short amount of time and then instantly disappeared

Sent from Outlook for Androidhttps://aka.ms/AAb9ysg


From: Basile Fraboni @.> Sent: Tuesday, August 20, 2024 5:17:44 PM To: bfraboni/FastGaussianBlur @.> Cc: DeformedSAS @.>; Author @.> Subject: Re: [bfraboni/FastGaussianBlur] does fastgaussianblur support rounded stuff? (Issue #10)

It is not related to your writing , no worries.

I'm just thinking the game UI is usually computed on the GPU as an additional render pass, so you can use shaders to write a dedicated gaussian blur on your components. You need to compute the blur for every frame so a blur like that usually needs to be faster than mine.

But for the rounded shape, if you add a black border of size 2 or 3 times sigma around your shape , the fast blur will bleed and give you the rounded look. If you don't the blur will be limited to the original region by construction.

— Reply to this email directly, view it on GitHubhttps://github.com/bfraboni/FastGaussianBlur/issues/10#issuecomment-2299115670, or unsubscribehttps://github.com/notifications/unsubscribe-auth/BH6OHVUK6CLMKFHFWSM3QRDZSNMZRAVCNFSM6AAAAABMZ5K7NKVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDEOJZGEYTKNRXGA. You are receiving this because you authored the thread.Message ID: @.***>

bfraboni commented 2 months ago

It is probably because it appeared on a single frame, then the screen got flushed, games recompute everything for every frame of the game, is that what you're doing ?

DeformedSAS commented 2 months ago

no. i don't know a lot of css and xml.. what i cqn do is sent yiu the source code and documentation for the source code if you're interested in taking a look

Sent from Outlook for Androidhttps://aka.ms/AAb9ysg


From: Basile Fraboni @.> Sent: Tuesday, August 20, 2024 5:33:04 PM To: bfraboni/FastGaussianBlur @.> Cc: DeformedSAS @.>; Author @.> Subject: Re: [bfraboni/FastGaussianBlur] does fastgaussianblur support rounded stuff? (Issue #10)

It is probably because it appeared on a single frame, then the screen got flushed, games recompute everything for every frame of the game, is that what you're doing ?

— Reply to this email directly, view it on GitHubhttps://github.com/bfraboni/FastGaussianBlur/issues/10#issuecomment-2299148973, or unsubscribehttps://github.com/notifications/unsubscribe-auth/BH6OHVSC2TGFF5JLCVZXMW3ZSNOTBAVCNFSM6AAAAABMZ5K7NKVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDEOJZGE2DQOJXGM. You are receiving this because you authored the thread.Message ID: @.***>

DeformedSAS commented 1 month ago

ok so i think that i can confirm that the way valve implemented this blur system into csgo, they forgot to make it support rounded panels which kinda sucks..

image blur is set via xml on the panel button.

CSS CODE FOR PANEL BUTTON

VanityControls

{ opacity: 0.5; vertical-align: bottom; horizontal-align: right; flow-children: right; margin-left: 300px; margin-bottom: 14px;

transition-property:  opacity, brightness;
transition-duration: 0.25s;
transition-timing-function: ease-in-out;

}

VanityControls:hover

{ opacity:0.8; }

VanityControls Button

{ vertical-align:center; brightness: 0.5;

width: 60px;

background-color: #404040ff;
border-radius: 10px;
padding: 10px;
margin:10px;

transition-property:  brightness, opacity;
transition-duration: .25s;
transition-timing-function: ease-in-out;

}

VanityControls Button.hidden

{ visibility: collapse; }

VanityControls Button Image

{ vertical-align: center; horizontal-align: center; }

VanityControls Button:hover

{ brightness: 2; vertical-align:center; wash-color: white; }

id-mainmenu-vanity-hover

{ width: 60px; height: 60px;

vertical-align:bottom;
horizontal-align:right;
margin-bottom: 14px;
border-radius: 10px;
position: 0px 100px 0px;

}

VanityControls.pulse-vanity-controls

{ brightness: 2; opacity:1; }