How to set an image/sprite to layer blend modes (Ex. Multiply, Additive, etc.)

Hello all!

On top of my environment sprite, I have a giant shadows.png that has all the shadows of the environment and is meant to lay on top of the background sprite.

The trouble is, it's basically just blueish smudges which look great when they're applied through a multiply layer blend mode but look awful just laying on top of everything without that blend mode.

I essentially need to re-create the look of a multiply layer as seen in software such as Photoshop. I understand that not all layer blend modes (rip Overlay) are directly process-able on the GPU but Multiply specifically should be fine?

What would be the simplest way to go about implementing this?

Thank you for your time!

 

The shader needs just 1 edit to perform the multiply blend mode like photoshop programs

the nomenclature/syntax works like this
Blend "Source" + "Destination"

ostensibly : Sprite*(operation) + Game*(operation)
understand?


Blend Zero SrcColor [this operation is saying (Sprite * 0) + (game * Sprite color)]
or
Blend DstColor Zero [this operation is saying (Sprite * game color) + (game * 0)]

they produce identical outcomes for you.

additive is in photoshop 'linear dodge'
Blend One One [this operation is saying (Sprite * 1) + (game * 1)]

https://en.wikipedia.org/wiki/Blend_modes

 

Thank you for the response! Would you know how I could apply this to Shader Graph? I see the blend node with the multiply option, however, I'm not quite sure what to link to "Base" and "Blend". I'm assuming that would be the shadow itself along with the sprite that it's laying on top of, the output colour being the product/multiple of those two colour profiles. But I'm not sure how to get the colour information of those two sprites into that node.

I tried attaching my material to the environment, then collecting the shadow.png and the environment.png into Sample Texture 2D's and applying them as the base/blend of the Blend node. But that results in the environment's opacity getting lowered (perhaps has something to do with the fact that the shadow.png is a very faded/semi-transparent image).

Apologies, I should have specified the Shader tool I was using.

 

Multiply is a standard option on shadergraphs setting menu

graph settings menu

surface = transparent then blending mode option will appear.

that is not a blend mode that is a blend node to process inside a shader....
think of shaders as a bunch of tools, filters and adjustments assigned to a photoshop layer.

But a blend mode is the pulldown on the layer itself; Overlay, multiply, screen etc.. that is a final instruction your video card uses to decide how to blend it to the screen with everything else.


I just went through a setup to help someone with a multiply sprite concept at RTVFX so you can use a color picker to control it intuitively
instead of feeding the 'color' picker though it could be a vertexColor node to use the meshes color like particles, lines or trail renderer.

This was a case when they wanted to re-use a texture as a drop shadow rather than make a new texture just for the shadow.

https://realtimevfx.com/t/unity-sha...d-a-drop-shadow-to-a-sprite/18756/4?u=torbach

blend modes can get savory....been playing with a dodge/burn type
Blend DstColor SrcAlpha.. fun but very niche

 

Thank you very much! This doesn't appear to work for me though; the gradients of my shadow are lost and it's displayed as a big solid block with hard edges. My project is 2D and sprite-based and my shadow is full of gradients/alpha data. Would that change the settings that I need to implement? This is what my Shadow.png (that I want to lay over my environment with a multiply blend mode) looks like for reference.



Thank you once again for your time

 

the texture can't be a black background... otherwise it is a big black box

the texture has to be on white
white = no shadow
black = shadow

otherwise you will have to construct the logic to reverse things and re process it correctly


during import the texture may not have white pixel in the RGB. you can check on the inspector for the texture (ignore this images red boxes)


the RGBA buttons on the bottom can show you each channel (just below 'D')

be mindful of transparency that is a photoshop sofware concept, it is the inverse of Alpha channel
alpha 100% = Opaque.
transparency 100% = invisible
you have to account for that with 3D engines because they use Alpha.. not transparency

 

Oh my goodness, I had no idea about the blank background! I changed it to white and it works perfectly! Thank you so much for your help and patience, it looks amazing!