Node Settings / Blend Operations / Alpha Channel Questions

[JosephHorsmann]

Hello, I've recently begun working with the Amplify Shader Editor and have some questions regarding node settings, blend operations and alpha. I am trying to create a shine effect where a bar of light would move across a medal, but I am having some trouble trying to achieve the types of effects I am shooting for.

As I've experimented with the Blend Operations modifier, I've found that I'm not getting the results I would expect based on my prior knowledge of blend modes. For example, using the Overlay setting I would expect a result similar to what is seen on the wiki here, where the second input is applied onto the first input. Instead, my second input seems to completely overwrite my first, as seen below.

PIC 1.jpg (109.18 KiB) Viewed 3774 times

In addition, it seems that any time I use an image with transparency, the empty space gets filled in by the edges of the image 'stretching' to fill the empty space. This does not appear in the shader editor itself, but rather, in the Unity scene. In this case, the white stripe seems to stretch to cover the entirety of the medal it is being layered on top of. An example of this can be seen in the final image I've included.

The white bar used in the above example is a sprite, but I haven't had success using other texture types either. This issue also persists beyond the Overla setting. Across the board, any transparency I have in my images seems to be getting filled in with color.

I have a feeling that something in my Node Settings isn't set right for what I am trying to achieve, but I haven't been able to determine what thus far. My current settings for the shader are below. Worth pointing out is that I am using the Lightweight Render Pipeline 3.0 and have used this tutorial to allow me to create lightweight shaders.

PIC 3.jpg (86.99 KiB) Viewed 3774 times

The be very clear about what I am trying to achieve, I included another example below, showing what I am running into, vs what I am trying to achieve. Any insight you can provide would be greatly appreciated. Thank you for your time.

PIC 4.jpg (166 KiB) Viewed 3774 times

[Amplify_Borba]

Hello! There are a few ways of achieving this type of glint effect, and it will depend on how you've got your objects and shaders set up. In the examples I'm sharing, I'm using the MaskedUI sample with the DefaultUI template as the base, which works for canvas elements even in LWRP.

Here I'm using the Lerp node to interpolate between a sprite and its yellow tinted version, using an animated mask as the interpolator:



Resulting in this:



You can also achieve this effect by using math operations but, since the setup is slightly more complex, I'm sharing a modified MaskedUI sample that you can examine, just be sure to backup your current sample:

MaskedUIModified.zip

(96.13 KiB) Downloaded 101 times

The sample contains both cases above, and you can use the Toggle Switch to change between both.

Please let me know if this helps, I'll be happy to elaborate.

[JosephHorsmann]

Hello, and thanks for the reply. I've managed to find a method that achieves the effect I'm looking for by taking my image, filling the transparent background with black instead and using both a combination of HardLight and Lighten filters.

PIC 1.jpg (108.51 KiB) Viewed 3749 times

This results in the 'overlay' effect approximated in the third image from my previous post and the second image of this post. This works fine in this specific instance, but I would still like to find a cleaner way of accomplishing this effect, namely, without having to color the background black, which is done in your example as well.

Do you have any additional insight on how I could accomplish this same effect by using an image with transparency instead of filling in transparency with black?

PIC 2.jpg (224.8 KiB) Viewed 3749 times

[Amplify_Borba]

Could you provide us with a sample of both your textures, the shader and material, so that we can use the same in order to best help you?

[JosephHorsmann]

Sure, here is a package with my textures (including a version of the shine with transparency, and one with black) and my shader and material.

Thanks for looking into this.

[Amplify_Borba]

Thank you for providing a sample, using the LinearDodge of the Blend Operations node in the example I'm sharing below seems to produce the intended behavior:

MedalSample.zip

(95.77 KiB) Downloaded 99 times

Please let me know if this helps.

[JosephHorsmann]

The LinearDodge Blend Operation does seem to be another way to achieve the effect I am looking for, but unfortunately still seems to be reliant on filling any transparency in my second image input with black. This is the main issue I would like to solve at this point.

[Ricardo Teixeira]

The LinearDodge Blend Operation does seem to be another way to achieve the effect I am looking for, but unfortunately still seems to be reliant on filling any transparency in my second image input with black. This is the main issue I would like to solve at this point.

Hey there,

Not sure if we can assist you further, you will always have to handle the Alpha channel. Since the sample shared already accounts for your image transparency, what exactly do you intend to achieve?

Please elaborate, in a shader development context.

Thanks!

[JosephHorsmann]

Hello,

To clarify further, in both my workaround and Amplify_Borba's sample, achieving the sort of 'overlayed' effect I am aiming for (in which the color of my second input is applied to my first input, rather than simply layering on top of it) are reliant on filling the transparency of the second input with black.

In the package I provided, I included 2 versions of the image of a white bar. One with a transparent background and one with that area filled with black instead. The current solutions both rely on using the version with black. I am trying to figure out a way I could achieve the same effect, while instead using the version with transparency.

My hope is that I can find a way to handle this is in a shader, rather than relying on the images themselves to be prepared in a certain way.

Thanks for your time.

[Ricardo Teixeira]

Hello,

To clarify further, in both my workaround and Amplify_Borba's sample, achieving the sort of 'overlayed' effect I am aiming for (in which the color of my second input is applied to my first input, rather than simply layering on top of it) are reliant on filling the transparency of the second input with black.

In the package I provided, I included 2 versions of the image of a white bar. One with a transparent background and one with that area filled with black instead. The current solutions both rely on using the version with black. I am trying to figure out a way I could achieve the same effect, while instead using the version with transparency.

My hope is that I can find a way to handle this is in a shader, rather than relying on the images themselves to be prepared in a certain way.

Thanks for your time.

Thank you for clarifying, we really appreciate it.

When using images with transparency, such as png files, Unity shaders will actually use Alpha channel to drive the transparency; connecting the RGBA value directly will cause unwanted results as the RGB content is completely white(and opaque!).

Plugging the correct channel should resolve the issue.


You can further manipulate that channel as you see fit.


Hope it helps!