• I need help making a blurred polygon.(HUD)
    27 replies, posted
Hi guys, I already got a working blurry rectangle (Credit to Chessnut) but i would like to know how to make a blurry polygon. Any ideas? That's the rectangle: [CODE]local blur = Material("pp/blurscreen") local function DrawBlurRect(x, y, w, h) local X, Y = 0,0 surface.SetDrawColor(255,255,255) surface.SetMaterial(blur) for i = 1, 5 do blur:SetFloat("$blur", (i / 3) * (5)) blur:Recompute() render.UpdateScreenEffectTexture() render.SetScissorRect(x, y, x+w, y+h, true) surface.DrawTexturedRect(X * -1, Y * -1, ScrW(), ScrH()) render.SetScissorRect(0, 0, 0, 0, false) end draw.RoundedBox(0,x,y,w,h,Color(0,0,0,205)) surface.SetDrawColor(0,0,0) surface.DrawOutlinedRect(x,y,w,h) end DrawBlurRect(100, 400, 200, 200)[/CODE] And thats my HUD background (Polygon): [CODE] local cHudBackground = { { x = ScrW()-ScrW() + 10, y = ScrH() - 5 }, { x = ScrW()-ScrW() + 10, y = ScrH() - 150 }, { x = ScrW()-ScrW() + 180, y = ScrH() - 150 }, { x = ScrW()-ScrW() + 195, y = ScrH() - 135 }, { x = ScrW()-ScrW() + 195, y = ScrH() - 125 }, { x = ScrW()-ScrW() + 370, y = ScrH() - 125 }, { x = ScrW()-ScrW() + 385, y = ScrH() - 109 }, { x = ScrW()-ScrW() + 385, y = ScrH() - 5 } } surface.DrawPoly( cHudBackground ) [/CODE]
Bump (I'm sorry but I really need to know how to do that)
You could maybe use stencils. Just set the pixels of your polygon high and draw the blurred materials on the high pixels. [lua] render.ClearStencil() --set all pixels to 0 render.SetStencilEnable( true ) render.SetStencilWriteMask( 255 ) render.SetStencilTestMask( 255 ) render.SetStencilReferenceValue( 99 ) render.SetStencilCompareFunction( STENCIL_ALWAYS ) render.SetStencilFailOperation( STENCIL_REPLACE ) --draw the polygon and set all polygon pixels to 99 surface.DrawPoly( cHudBackground ) render.SetStencilCompareFunction(STENCIL_EQUAL) --Draw your blurred material over the "whole screen" (will only be visible at the high pixels where the pixel value is 99 ) render.SetDrawColor(255,255,255) render.SetMaterial(blur) render.DrawScreenQuad() --end render blurred mat render.SetStencilEnable( false ) [/lua] Honestly i have no idea if this works, but it might be worth a shot.
Are your draw/surface functions even inside HUDPaint?
[QUOTE=Netheous;49836028]Are your draw/surface functions even inside HUDPaint?[/QUOTE] Yes, they are :smile: [QUOTE=Lolle;49835839]You could maybe use stencils. Just set the pixels of your polygon high and draw the blurred materials on the high pixels. [lua] render.ClearStencil() --set all pixels to 0 render.SetStencilEnable( true ) render.SetStencilWriteMask( 255 ) render.SetStencilTestMask( 255 ) render.SetStencilReferenceValue( 99 ) render.SetStencilCompareFunction( STENCIL_ALWAYS ) render.SetStencilFailOperation( STENCIL_REPLACE ) --draw the polygon and set all polygon pixels to 99 surface.DrawPoly( cHudBackground ) render.SetStencilCompareFunction(STENCIL_EQUAL) --Draw your blurred material over the "whole screen" (will only be visible at the high pixels where the pixel value is 99 ) render.SetDrawColor(255,255,255) render.SetMaterial(blur) render.DrawScreenQuad() --end render blurred mat render.SetStencilEnable( false ) [/lua] Honestly i have no idea if this works, but it might be worth a shot.[/QUOTE] Well. It doesn't work. It says [CODE][ERROR] addons/darkrpmodification-master/lua/darkrp_modules/nova_hud/cl_hud.lua:582: attempt to call field 'SetDrawColor' (a nil value) 1. fn - addons/darkrpmodification-master/lua/darkrp_modules/nova_hud/cl_hud.lua:582 2. unknown - addons/ulib/lua/ulib/shared/hook.lua:179 [/CODE] I think render.SetDrawColor doesn't exist, does it? I tried render.SetColorModulation and it doesn't work either.
[QUOTE=|Shepherd|;49837464] Well. It doesn't work. It says [CODE][ERROR] addons/darkrpmodification-master/lua/darkrp_modules/nova_hud/cl_hud.lua:582: attempt to call field 'SetDrawColor' (a nil value) 1. fn - addons/darkrpmodification-master/lua/darkrp_modules/nova_hud/cl_hud.lua:582 2. unknown - addons/ulib/lua/ulib/shared/hook.lua:179 [/CODE] I think render.SetDrawColor doesn't exist, does it? I tried render.SetColorModulation and it doesn't work either.[/QUOTE] Try surface.SetDrawColor().
[QUOTE=RonanZer0;49837655]Try surface.SetDrawColor().[/QUOTE] That doesn't work either. If i change render.SetDrawColor(255,255,255) to surface.SetDrawColor(255,255,255) just nothing happens.
surface.SetDrawColor only affects things drawn with the surface library. render affects everything, but I'm pretty sure it doesn't have any function to set the draw color. Just remove that line, it's not doing anything. The last time I tried to use the "blur" material in a stencil block, it didn't draw anything either. Have you tried DrawPoly? [url]https://maurits.tv/data/garrysmod/wiki/wiki.garrysmod.com/index4287.html[/url] I'm not sure if "blur" can be used with SetTexture, but you could try SetMaterial instead.
[QUOTE=MaxShadow;49837830]surface.SetDrawColor only affects things drawn with the surface library. render affects everything, but I'm pretty sure it doesn't have any function to set the draw color. Just remove that line, it's not doing anything. The last time I tried to use the "blur" material in a stencil block, it didn't draw anything either. Have you tried DrawPoly? [url]https://maurits.tv/data/garrysmod/wiki/wiki.garrysmod.com/index4287.html[/url] I'm not sure if "blur" can be used with SetTexture, but you could try SetMaterial instead.[/QUOTE] I tried [CODE] local blur = Material("pp/blurscreen") ... local cHudBackground = { { x = ScrW()-ScrW() + 10, y = ScrH() - 5 }, { x = ScrW()-ScrW() + 10, y = ScrH() - 150 }, { x = ScrW()-ScrW() + 180, y = ScrH() - 150 }, { x = ScrW()-ScrW() + 195, y = ScrH() - 135 }, { x = ScrW()-ScrW() + 195, y = ScrH() - 125 }, { x = ScrW()-ScrW() + 370, y = ScrH() - 125 }, { x = ScrW()-ScrW() + 385, y = ScrH() - 109 }, { x = ScrW()-ScrW() + 385, y = ScrH() - 5 } } surface.SetDrawColor( 255, 255, 255, 255 ) surface.SetMaterial(blur) surface.DrawPoly( cHudBackground ) [/CODE] But the poly is not blurry. It kinda changes its color to the color I aim at. [video]https://youtu.be/FIq_VaNsX_c[/video]
Perhaps the polygon is stretching the texture too much. Try this: [CODE]surface.SetDrawColor( 255, 255, 255, 255 ) local BlurMaterial = Material( "pp/blurscreen" ) render.UpdateScreenEffectTexture() BlurMaterial:SetFloat("$blur", 3.0) BlurMaterial:Recompute() render.UpdateScreenEffectTexture() surface.SetMaterial(BlurMaterial) surface.DrawPoly( cHudBackground )[/CODE] Try modifying the float value and see if that changes anything. I'm not sure if the UpdateScreenEffectTexture() is really needed. [B]Edit:[/B] I added the "Recompute()" function. Not sure what it does, but you probably have to use it. [B]Edit2:[/B] Also, keep in mind that each element of the vertex table has 2 additional values: "u" and "v". These describe which part of the texture should be drawn at that vertex. You HAVE to add those values. Try changing those values to see if it makes any difference. Values range from 0 to 1: u = 0, v = 0 : Top Left u = 1, v = 0 : Top Right u = 0, v = 1 : Bottom Left u = 1, v = 1 : Bottom Right
[QUOTE=MaxShadow;49838224]Perhaps the polygon is stretching the texture too much. Try this: [CODE]surface.SetDrawColor( 255, 255, 255, 255 ) local BlurMaterial = Material( "pp/blurscreen" ) render.UpdateScreenEffectTexture() BlurMaterial:SetFloat("$blur", 3.0) BlurMaterial:Recompute() render.UpdateScreenEffectTexture() surface.SetMaterial(BlurMaterial) surface.DrawPoly( cHudBackground )[/CODE] Try modifying the float value and see if that changes anything. I'm not sure if the UpdateScreenEffectTexture() is really needed. [B]Edit:[/B] I added the "Recompute()" function. Not sure what it does, but you probably have to use it.[/QUOTE] It changes nothing. The polygon looks and behaves exactly like before.
Read my last edit.
[QUOTE=MaxShadow;49838224] [B]Edit2:[/B] Also, keep in mind that each element of the vertex table has 2 additional values: "u" and "v". These describe which part of the texture should be drawn at that vertex. You HAVE to add those values. Try changing those values to see if it makes any difference. Values range from 0 to 1: u = 0, v = 0 : Top Left u = 1, v = 0 : Top Right u = 0, v = 1 : Bottom Left u = 1, v = 1 : Bottom Right[/QUOTE] I'm not sure how to do that. I tried that: [CODE] local cHudBackground = { { x = ScrW()-ScrW() + 10, y = ScrH() - 5, 0, 1 }, { x = ScrW()-ScrW() + 10, y = ScrH() - 150, 0, 0 }, { x = ScrW()-ScrW() + 180, y = ScrH() - 150, 1, 0 }, { x = ScrW()-ScrW() + 195, y = ScrH() - 135 }, { x = ScrW()-ScrW() + 195, y = ScrH() - 125 }, { x = ScrW()-ScrW() + 370, y = ScrH() - 125 }, { x = ScrW()-ScrW() + 385, y = ScrH() - 109 }, { x = ScrW()-ScrW() + 385, y = ScrH() - 5, 1, 1 } surface.SetDrawColor( 255, 255, 255, 255 ) local BlurMaterial = Material( "pp/blurscreen" ) render.UpdateScreenEffectTexture() BlurMaterial:SetFloat("$blur", 3.0) BlurMaterial:Recompute() render.UpdateScreenEffectTexture() surface.SetMaterial(BlurMaterial) surface.DrawPoly( cHudBackground ) } [/CODE] And nothing changed.
Try this one. I couldn't test it tho. [CODE]{ x = 10, y = ScrH() - 5 , u = 0, v = 1 }, { x = 10, y = ScrH() - 150 , u = 0, v = 0}, { x = 180, y = ScrH() - 150 , u = 0.45, v = 0 }, { x = 195, y = ScrH() - 135 , u = 0.5, v = 0.11 }, { x = 195, y = ScrH() - 125 , u = 0.5, v = 0.18 }, { x = 370, y = ScrH() - 125 , u = 0.96, v = 0.18 }, { x = 385, y = ScrH() - 109 , u = 1, v = 0.31 }, { x = 385, y = ScrH() - 5 , u = 1, v = 1 }[/CODE] Also, ScrW()-ScrW() = 0 :v:
[QUOTE=MaxShadow;49838515]Try this one. I couldn't test it tho. [CODE]{ x = ScrW()-ScrW() + 10, y = ScrH() - 5 , u = 0, v = 1 }, { x = 10, y = ScrH() - 150 , u = 0, v = 0}, { x = 180, y = ScrH() - 150 , u = 0.45, v = 0 }, { x = 195, y = ScrH() - 135 , u = 0.5, v = 0.11 }, { x = 195, y = ScrH() - 125 , u = 0.5, v = 0.18 }, { x = 370, y = ScrH() - 125 , u = 0.96, v = 0.18 }, { x = 385, y = ScrH() - 109 , u = 1, v = 0.31 }, { x = 385, y = ScrH() - 5 , u = 1, v = 1 }[/CODE] [/QUOTE] That doesn't work either but it looks very funny now :smile: [IMG]http://i.imgur.com/shkiATS.png[/IMG] [QUOTE=MaxShadow;49838515]Also, ScrW()-ScrW() = 0 :v: [/QUOTE] Whoops :happy:
lets help this man make money, wooooooooooooo!!!
[QUOTE=Sir TE5T;49838679]lets help this man make money, wooooooooooooo!!![/QUOTE] What? [QUOTE=|Shepherd|;49838636]That doesn't work either but it looks very funny now :smile:[/QUOTE] Its weird. I tried to run that code, and all I got was a copy of my screen inside the polygon ._. The square works fine tho. I don't know what could be wrong, perhaps postprocessing materials cannot be used in a polygon. [editline]29th February 2016[/editline] I think I got it: [CODE]local function DrawBlurPoly(steps, multiplier) local blur = Material("pp/blurscreen") local cHudBackground = { { x = 10, y = ScrH() - 5 , u = 10/ScrW(), v = 1-(5/ScrH()) }, { x = 10, y = ScrH() - 150 , u = 10/ScrW(), v = 1-(150/ScrH())}, { x = 180, y = ScrH() - 150 , u = 180/ScrW(), v = 1-(150/ScrH()) }, { x = 195, y = ScrH() - 135 , u = 195/ScrW(), v = 1-(135/ScrH()) }, { x = 195, y = ScrH() - 125 , u = 195/ScrW(), v = 1-(125/ScrH()) }, { x = 370, y = ScrH() - 125 , u = 370/ScrW(), v = 1-(125/ScrH()) }, { x = 385, y = ScrH() - 109 , u = 385/ScrW(), v = 1-(109/ScrH()) }, { x = 385, y = ScrH() - 5 , u = 385/ScrW(), v = 1-(5/ScrH()) } } surface.SetDrawColor(0,0,0,150) draw.NoTexture() surface.DrawPoly( cHudBackground ) render.UpdateScreenEffectTexture() surface.SetMaterial(blur) for i = 1, steps do blur:SetFloat("$blur", (i / steps) * (multiplier or 6)) blur:Recompute() render.UpdateScreenEffectTexture() surface.DrawPoly( cHudBackground ) end render.UpdateScreenEffectTexture() end[/CODE] I added the "for" block. 3 steps should be enough, adding more will make it smoother but reduce performance. There's a small issue tho. For some reason, in the top left corner, there's a square with a lighter color than the rest of the polygon. I don't know why is it drawing that way. [editline]29th February 2016[/editline] I forgot to add "draw.NoTexture()". Now it should work like you wanted.
:snip:
[QUOTE=MaxShadow;49838986]Its weird. I tried to run that code, and all I got was a copy of my screen inside the polygon ._. The square works fine tho. I don't know what could be wrong, perhaps postprocessing materials cannot be used in a polygon. [editline]29th February 2016[/editline] I think I got it: [CODE]local function DrawBlurPoly(steps, multiplier) local blur = Material("pp/blurscreen") local cHudBackground = { { x = 10, y = ScrH() - 5 , u = 10/ScrW(), v = 1-(5/ScrH()) }, { x = 10, y = ScrH() - 150 , u = 10/ScrW(), v = 1-(150/ScrH())}, { x = 180, y = ScrH() - 150 , u = 180/ScrW(), v = 1-(150/ScrH()) }, { x = 195, y = ScrH() - 135 , u = 195/ScrW(), v = 1-(135/ScrH()) }, { x = 195, y = ScrH() - 125 , u = 195/ScrW(), v = 1-(125/ScrH()) }, { x = 370, y = ScrH() - 125 , u = 370/ScrW(), v = 1-(125/ScrH()) }, { x = 385, y = ScrH() - 109 , u = 385/ScrW(), v = 1-(109/ScrH()) }, { x = 385, y = ScrH() - 5 , u = 385/ScrW(), v = 1-(5/ScrH()) } } surface.SetDrawColor(0,0,0,150) draw.NoTexture() surface.DrawPoly( cHudBackground ) render.UpdateScreenEffectTexture() surface.SetMaterial(blur) for i = 1, steps do blur:SetFloat("$blur", (i / steps) * (multiplier or 6)) blur:Recompute() render.UpdateScreenEffectTexture() surface.DrawPoly( cHudBackground ) end render.UpdateScreenEffectTexture() end[/CODE] I added the "for" block. 3 steps should be enough, adding more will make it smoother but reduce performance. There's a small issue tho. For some reason, in the top left corner, there's a square with a lighter color than the rest of the polygon. I don't know why is it drawing that way. [editline]29th February 2016[/editline] I forgot to add "draw.NoTexture()". Now it should work like you wanted.[/QUOTE] Thank you very much. It works. :happy: But there is one thing i would like to know how to change. There is a frame with a different amount of blur around the polygon. Is there a way to remove it or at least to reduce the size of it? [IMG]http://i.imgur.com/q2OcSRV.png[/IMG]
You should be able to use stencils to cutout that shape from a full screen blur.
[QUOTE=Robotboy655;49844238]You should be able to use stencils to cutout that shape from a full screen blur.[/QUOTE] How does it work? I never used stencils before.
[QUOTE=|Shepherd|;49844203]Thank you very much. It works. :happy: But there is one thing i would like to know how to change. There is a frame with a different amount of blur around the polygon. Is there a way to remove it or at least to reduce the size of it?[/QUOTE] I think you'll have to create another vertex table with a little offset in every position. Just make sure the numbers in "u" and "v" are the same as in "x" and "y".
[QUOTE=MaxShadow;49844280]I think you'll have to create another vertex table with a little offset in every position. Just make sure the numbers in "u" and "v" are the same as in "x" and "v".[/QUOTE] What shall i do with it? Draw a second polygon over the first one?
Yeah, but I guess the blur of both frames will combine in the center. Also, using too many blur layers will reduce performance. The wiki says that Recompute() is an expensive operation.
[QUOTE=MaxShadow;49844518]Yeah, but I guess the blur of both frames will combine in the center. Also, using too many blur layers will reduce performance. The wiki says that Recompute() is an expensive operation.[/QUOTE] Alright thanks. The polygon now looks almost perfect :happy: [IMG]http://i.imgur.com/j08gKBn.png[/IMG]
I just noticed you said that there IS a frame with a different blur around the polygon. I thought you wanted to add another frame around it. So ignore the last thing I said :v That blured outline happens because the material is also bluring the dark background, making the frame "bleed" outside the limits of the polygon. I really don't know how to fix that. Perhaps if you make the blur polygon smaller than the background polygon, it would look a bit better. Its a shame that there isn't any polygon shaped "scissor" function. Rubat is right, it would work better with a stencil, but its a bit more complicated, and I don't know if blurscreen works with stencils. I'll see if I can make a stencil version. [editline]1st March 2016[/editline] :snip: [editline]1st March 2016[/editline] I got it. It took me a while but now it should work perfectly fine: [CODE]hook.Add("HUDPaint","BlurHud",function() local cHudBackground = { { x = 10, y = ScrH() - 5}, { x = 10, y = ScrH() - 150}, { x = 180, y = ScrH() - 150}, { x = 195, y = ScrH() - 135}, { x = 195, y = ScrH() - 125}, { x = 370, y = ScrH() - 125}, { x = 385, y = ScrH() - 109}, { x = 385, y = ScrH() - 5} } render.ClearStencil() render.SetStencilEnable( true ) local blur = Material("pp/blurscreen") render.SetStencilWriteMask( 255 ) render.SetStencilTestMask( 255 ) render.SetStencilReferenceValue( 1 ) render.SetStencilCompareFunction( STENCIL_ALWAYS ) render.SetStencilPassOperation( STENCIL_REPLACE ) render.SetStencilFailOperation( STENCIL_KEEP ) render.SetStencilZFailOperation( STENCIL_KEEP ) surface.SetDrawColor(0,0,0,1) draw.NoTexture() surface.DrawPoly( cHudBackground ) render.SetStencilCompareFunction( STENCIL_EQUAL ) render.SetStencilPassOperation( STENCIL_KEEP ) render.SetMaterial(blur) local steps = 3 local multiplier = 6 for i = 1, steps do blur:SetFloat("$blur", (i / steps) * (multiplier or 6)) blur:Recompute() render.UpdateScreenEffectTexture() render.DrawScreenQuad() end surface.SetDrawColor(0,0,0,150) draw.NoTexture() surface.DrawRect(0,0,ScrW(),ScrH()) render.SetStencilEnable( false ) end)[/CODE] However, drawing all this stuff in a HUDPaint hook seem to be more resource intensive than the previous methods, but it should work without problems in most PCs.
[QUOTE=MaxShadow;49844769]I just noticed you said that there IS a frame with a different blur around the polygon. I thought you wanted to add another frame around it. So ignore the last thing I said :v That blured outline happens because the material is also bluring the dark background, making the frame "bleed" outside the limits of the polygon. I really don't know how to fix that. Perhaps if you make the blur polygon smaller than the background polygon, it would look a bit better. Its a shame that there isn't any polygon shaped "scissor" function. Rubat is right, it would work better with a stencil, but its a bit more complicated, and I don't know if blurscreen works with stencils. I'll see if I can make a stencil version. [editline]1st March 2016[/editline] :snip: [editline]1st March 2016[/editline] I got it. It took me a while but now it should work perfectly fine: [CODE]hook.Add("HUDPaint","BlurHud",function() local cHudBackground = { { x = 10, y = ScrH() - 5}, { x = 10, y = ScrH() - 150}, { x = 180, y = ScrH() - 150}, { x = 195, y = ScrH() - 135}, { x = 195, y = ScrH() - 125}, { x = 370, y = ScrH() - 125}, { x = 385, y = ScrH() - 109}, { x = 385, y = ScrH() - 5} } render.ClearStencil() render.SetStencilEnable( true ) local blur = Material("pp/blurscreen") render.SetStencilWriteMask( 255 ) render.SetStencilTestMask( 255 ) render.SetStencilReferenceValue( 1 ) render.SetStencilCompareFunction( STENCIL_ALWAYS ) render.SetStencilPassOperation( STENCIL_REPLACE ) render.SetStencilFailOperation( STENCIL_KEEP ) render.SetStencilZFailOperation( STENCIL_KEEP ) surface.SetDrawColor(0,0,0,1) draw.NoTexture() surface.DrawPoly( cHudBackground ) render.SetStencilCompareFunction( STENCIL_EQUAL ) render.SetStencilPassOperation( STENCIL_KEEP ) render.SetMaterial(blur) local steps = 3 local multiplier = 6 for i = 1, steps do blur:SetFloat("$blur", (i / steps) * (multiplier or 6)) blur:Recompute() render.UpdateScreenEffectTexture() render.DrawScreenQuad() end surface.SetDrawColor(0,0,0,150) draw.NoTexture() surface.DrawRect(0,0,ScrW(),ScrH()) render.SetStencilEnable( false ) end)[/CODE] However, drawing all this stuff in a HUDPaint hook seem to be more resource intensive than the previous methods, but it should work without problems in most PCs.[/QUOTE] Thanks, it works perfect now. I really appreciate that you took some of your time to help me.
Now that I think about it, the solution was much simplier than I thought. The previous method worked fine, I just had to draw the blur poly before the black poly. All that stencil stuff was unnecessary :v: This should be less resource intensive: [CODE]local function DrawBlurPoly(steps, multiplier) local blur = Material("pp/blurscreen") local cHudBackground = { { x = 10, y = ScrH() - 5 , u = 10/ScrW(), v = 1-(5/ScrH()) }, { x = 10, y = ScrH() - 150 , u = 10/ScrW(), v = 1-(150/ScrH())}, { x = 180, y = ScrH() - 150 , u = 180/ScrW(), v = 1-(150/ScrH()) }, { x = 195, y = ScrH() - 135 , u = 195/ScrW(), v = 1-(135/ScrH()) }, { x = 195, y = ScrH() - 125 , u = 195/ScrW(), v = 1-(125/ScrH()) }, { x = 370, y = ScrH() - 125 , u = 370/ScrW(), v = 1-(125/ScrH()) }, { x = 385, y = ScrH() - 109 , u = 385/ScrW(), v = 1-(109/ScrH()) }, { x = 385, y = ScrH() - 5 , u = 385/ScrW(), v = 1-(5/ScrH()) } } render.UpdateScreenEffectTexture() surface.SetMaterial(blur) for i = 1, steps do blur:SetFloat("$blur", (i / steps) * (multiplier or 6)) blur:Recompute() render.UpdateScreenEffectTexture() surface.DrawPoly( cHudBackground ) end surface.SetDrawColor(0,0,0,150) draw.NoTexture() surface.DrawPoly( cHudBackground ) render.UpdateScreenEffectTexture() end[/CODE] Anyway, you should close this thread.
Sorry, you need to Log In to post a reply to this thread.