Gradient ... effect ... shader?
- Gunroar:Cannon()
- Party member
- Posts: 1088
- Joined: Thu Dec 10, 2020 1:57 am
Gradient ... effect ... shader?
I honestly don't know quack about shaders (okay, to be fair I understand their basics), but is there a shader that can achieve this effect with, let's say, color "red" or just this effect in general.
- BrotSagtMist
- Party member
- Posts: 613
- Joined: Fri Aug 06, 2021 10:30 pm
Re: Gradient ... effect ... shader?
Can you explain that with a before>after picture?
I dont get where that orange is supposed to come from.
I dont get where that orange is supposed to come from.
obey
- Gunroar:Cannon()
- Party member
- Posts: 1088
- Joined: Thu Dec 10, 2020 1:57 am
Re: Gradient ... effect ... shader?
Okay, like let's say this was in the before image
A simple orange color.
Then after it has this gradient effect from darker to lighter that makes the orange stand out.
A simple orange color.
Then after it has this gradient effect from darker to lighter that makes the orange stand out.
Re: Gradient ... effect ... shader?
Are you need the blur shader?
Re: Gradient ... effect ... shader?
This might give you somewhere to start. When i was testing locally img.png was a circle in that orange colour you posted. Everything else in the image was blank (i.e., rgba(0,0,0,0)).
This shader will blend any colour in the image with the value in 'c1' (red in my example), based on that pixel's distance to 'tl' (which I've just set to the mouse's normalised position in the window). The clamping is just there for demonstration, there are much better ways to do it. Comment it out and you get a perfectly smooth gradient.
This shader will blend any colour in the image with the value in 'c1' (red in my example), based on that pixel's distance to 'tl' (which I've just set to the mouse's normalised position in the window). The clamping is just there for demonstration, there are much better ways to do it. Comment it out and you get a perfectly smooth gradient.
Code: Select all
function love.load()
img = love.graphics.newImage("img.png")
effect = love.graphics.newShader [[
extern vec2 tl = vec2(0,0);
extern vec4 c1;
vec4 effect(vec4 color, Image texture, vec2 texture_coords, vec2 pixel_coords)
{
float a = distance(tl, texture_coords);
// bad clamping example, but just for demonstration
if (a < 0.25) {
a = 0;
} else if (a < 0.5) {
a = 0.25;
} else if (a < 0.75) {
a = 0.5;
} else if (a < 1) {
a = 0.75;
}
vec4 s = Texel(texture, texture_coords);
vec3 c = mix(c1.rgb, s.rgb, 1- a);
return vec4(c.rgb, s.a);
}
]]
love.graphics.setShader(effect)
effect:send("c1", {1,0,0,1})
end
function love.update()
local x, y = love.mouse.getPosition()
effect:send("tl", {x/love.graphics.getWidth(),y/love.graphics.getHeight()})
end
function love.draw()
love.graphics.draw(img, 0, 0)
end
Re: Gradient ... effect ... shader?
Your example actually might work and look better with something called an emission map. This video shows an example of how to do this in Unity, but the principle is the same in Love. You might then be able to use a gaussian blur or something similar on top of that to get the look you're after, or you can use shades of grey in your emission map to blend between your two colours (i.e., 0 would give red, 1 would give orange and any value in between would be a mix.
Re: Gradient ... effect ... shader?
You can make nice gradients with meshes: https://github.com/darkfrei/love2d-lua- ... sh-01.love
- Gunroar:Cannon()
- Party member
- Posts: 1088
- Joined: Thu Dec 10, 2020 1:57 am
Re: Gradient ... effect ... shader?
Okay, okay. I see. So now I would need to blur the gradients. Hmmm. I'll check the meshes though not really sure how those might work.
- Gunroar:Cannon()
- Party member
- Posts: 1088
- Joined: Thu Dec 10, 2020 1:57 am
Re: Gradient ... effect ... shader?
It's just blank for me.darkfrei wrote: ↑Wed Aug 03, 2022 2:16 pm You can make nice gradients with meshes: https://github.com/darkfrei/love2d-lua- ... sh-01.love
Re: Gradient ... effect ... shader?
https://github.com/darkfrei/love2d-lua- ... esh-01.pngGunroar:Cannon() wrote: ↑Fri Aug 05, 2022 11:32 amIt's just blank for me.darkfrei wrote: ↑Wed Aug 03, 2022 2:16 pm You can make nice gradients with meshes: https://github.com/darkfrei/love2d-lua- ... sh-01.love
https://github.com/darkfrei/love2d-lua- ... h/main.lua
Who is online
Users browsing this forum: No registered users and 225 guests