I need help making a blurred polygon.(HUD)

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:


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)

And thats my HUD background (Polygon):



    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 )


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?

Yes, they are :smile:

Well. It doesn’t work. It says


[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


I think render.SetDrawColor doesn’t exist, does it? I tried render.SetColorModulation and it doesn’t work either.

Try surface.SetDrawColor().

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?

I’m not sure if “blur” can be used with SetTexture, but you could try SetMaterial instead.

I tried



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 )


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:


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 )

Try modifying the float value and see if that changes anything. I’m not sure if the UpdateScreenEffectTexture() is really needed.

Edit: I added the “Recompute()” function. Not sure what it does, but you probably have to use it.

Edit2: 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

It changes nothing. The polygon looks and behaves exactly like before.

Read my last edit.

I’m not sure how to do that. I tried that:




    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 )
}



And nothing changed.

Try this one. I couldn’t test it tho.


{ 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 }

Also, ScrW()-ScrW() = 0 :v:

That doesn’t work either but it looks very funny now :smile:

Whoops :happy:

lets help this man make money, wooooooooooooo!!!

What?

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:


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

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:

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?

You should be able to use stencils to cutout that shape from a full screen blur.