Question Creating a shader that creates a gradient on specific colors with an edge on a texture?

Hello there, I'm new to shaders, so I'm not too sure how to approach this problem. apologies if it's a noob question.

in the above, I want to be able to only create an adjustable gradient along the edge of the orange and purple blob.I don't want it to blend anywhere else unless there is another 2 blobs with the same colors touching. I want to use this to process some sprites since re-rendering them for my project will prove to be difficult.

Thank you.

 

Smoothstep could maybe help here. Not sure on the exact implementation however.

 

just random thoughs,

with stencils, you could get that overlapped area, render it to rendertexture..
but not sure how to put accurate gradient into that. (maybe blur it and use that grayscale value with gradient texture?)

DistanceFields could probably do something, maybe prebaked sdf maps for objects,
but again not sure how the gradient kicks in.

using depth blending, not sure how it would work here.. and would require depth maps on objects.
https://inresin.wordpress.com/2020/04/03/terrain-and-mesh-blending-in-unity/

 

thanks for the leads. I'll try and do some research on it.

To clarify, it might not affect how the shader is written but the blobs and background will be on the same texture.

I want to be able to recreate this effect seen here.

 

not sure which effect it is on that video? can you clarify or screenshot.

 

Before: blush color is a flat color on the sprite.




After: only blush color and skin color are blended. gradient doesn't bleed into any other colors.

 

after testing some stuff out. I was able to isolate specific colors with a mask, but the gradient part was tripping me up. I'm not smart enough to come up with a calculation that affects all separate blobs of color in a way that's similar to the video. from my limited understanding a lerp needs to be clamped and if there are separate regions it seems difficult to not only calculate each region but apply the lerp selectively to each based on the criteria. (At least purely through a shader. I'm still thinking about gradient maps, but I would like to generate those instead of painting it since it would be more consistent this way. Not too sure how to do that yet.) Are shader masks treated like everything else is alpha? I'm getting very confused on the lerp calculations and how to approach that for separate blushes. Would I need to separate each blush into it's own layer? It seems like it'll become very unwieldy if I need to create a new layer for every gradient I want to create.

Will continue to research but if anyone has any thoughts please let me know. I also found the plugin used in the video on github. (I believe this is the correct one? https://github.com/bryful/F-s-PluginsProjects/tree/master/SelectedBlur ) it's a bit confusing to me since I'm not used to reading C++ but I'll also try to dig in and see if there's anything useful to see from there.

 

would it work if the blushes would be pre-blurred?

where is the gradient in that blush, or what do you mean by gradient map here?

 

The blush seems to be smoothly blending with the skin color. Images are usually exported as 2d images to after effects for processing. I think it's a gradient between the skin and the original blush tone. I could be wrong though. to clarify, I was thinking is there's some way to programmatically generate a black and white area to control the blurring and radius?
I don't know if there's a way to selectively pick out each blob of color and apply the blurring effect or if there's some smart blurring thing in unity that I'm not aware of?


Pre-blurred can present some challenges, mainly it's pretty expensive to maintain an adobe CC license, but if I do it by hand, it would be difficult to maintain consistency/I may need to split things into more layers on a sprite sheet which can be a little annoying to handle for one effect. (for instance, making layers for every different area I want to blend can easily turn a 3 layer sprite into 1 for every color. just for the face in this example, I'd need to create a skin layer, blush layer, skin shine layer, lineart and hair layer instead of potentially handling all of that on 1 for simplicity and not needing to create so many assets. This is so the blush doesn't exit the range it's being applied to. it can become more cumbersome if I have more things I want to apply this blending effect to such as certain shadows or if a character has a 2 tone hair color that blends in the middle.) I don't mean to dismiss the idea, but I wanted to try to see if I can avoid that headache and make processing my sprites a little more convenient by handling everything in unity where I can already apply effects like tint, line recolor, light, etc.

 

have you tested any of the unity transparent materials?
whats the issue there? is that 2 blushes on top of each other become additive?

also,
there seems to be some tutorials for those vrchat related face blushes,
check if anything interesting there:
https://extra-ordinary.tv/2020/10/19/animating-vroid-facial-texture-changes-in-unity/
https://github.com/unity3d-jp/Unity...ransparent-shaders-for-transparency-materials
https://vrcmods.com/item/3533-Working-Blush-for-MMD-Models
and more..

try some photoshop alternatives, like affinity photo,
even this one in browser https://www.photopea.com