Welcome, Guest. Please login or register. Did you miss your activation email?

Author Topic: Color and alpha blending.  (Read 5017 times)

0 Members and 1 Guest are viewing this topic.

frogi16

  • Newbie
  • *
  • Posts: 3
    • View Profile
    • Email
Color and alpha blending.
« on: July 18, 2018, 03:57:16 pm »
Hello,
I recently tried to write simple light system and after hour of very satisfying prototyping I encountered a problem which I can't solve to this day.
My idea was to create completely black, opaque mask (default state, darkness) and for each light create one render texture. At the end I would have to combine everything and just draw on top of game. Simple enough, I prepared lights (gradient circle with opaque color in the center and the same color, but transparent on the edges), and drew them on transparent masks. Places blocked by obstacles I made transparent again. After combining everything with standard sf::BlendAdd result looks very promising (first attachment) but it doesn't show any background. Ok, it's completely understandable, 255 is opaque so adding can't give transparent mask. I changed blend mode to reverse subtract

sf::BlendMode masksCombining = sf::BlendAdd;
masksCombining.colorEquation = sf::BlendMode::Add;
masksCombining.alphaEquation = sf::BlendMode::ReverseSubtract;
finalMask.draw(maskSprite, masksCombining);

and opacity works perfect, but it changes vivid colors into Tim Burton works... Also high intensity of light causes colors to whiten.
And this is the problem I can't get around. I've read a lot about blending, tried multiple permutations of factors and equations and nothing. I just can imagine how it should be done to preserve colors and change opacity at the same time. Maybe I should change default masks colors to different values? If this is the solution, what are these values?

I'm looking forward to your respones,
frogi16
« Last Edit: July 18, 2018, 04:21:29 pm by frogi16 »

verdog

  • Newbie
  • *
  • Posts: 25
    • View Profile
    • Email
Re: Color and alpha blending.
« Reply #1 on: July 18, 2018, 06:11:49 pm »
In the first image, is the background an opaque black, or transparent (with nothing behind it)?

Can you post code necessary to reproduce this?

frogi16

  • Newbie
  • *
  • Posts: 3
    • View Profile
    • Email
Re: Color and alpha blending.
« Reply #2 on: July 18, 2018, 07:02:15 pm »
In the background I used random image just to check if opacity works (first attachment  ;) ). You can see it in the first post.
If you had in mind main mask, it's completely black and opaque.
And here is the code, I stripped it out of unnecessary parts like shadows (they work fine) or whole class managing drawing, but I couldnt collapse it to one file.
https://pastebin.com/54ktWCrg
Nevermind, I hope you'll find it helpful.

verdog

  • Newbie
  • *
  • Posts: 25
    • View Profile
    • Email
Re: Color and alpha blending.
« Reply #3 on: July 19, 2018, 01:45:06 am »
I think I got it!  :D

You were very close. All you had to do was draw the very final mask on with a blend mode of Multiply.
// change this:
window.draw(maskSprite);
// to this:
window.draw(maskSprite, sf::RenderStates(sf::BlendMultiply));
 

frogi16

  • Newbie
  • *
  • Posts: 3
    • View Profile
    • Email
Re: Color and alpha blending.
« Reply #4 on: July 19, 2018, 10:56:47 am »
Ha, it really works. I'm not a specialist, but it looks realistic.

Thank you for your help, and if anyone could explain me why it works, I would be grateful.

EDIT:
I played with this code a little, added some lights in different colors, experimented with position etc. and I think this is not the best blending possible. It's hard to tell, because in real life we don't see many clear 2D examples, but I think that after decreasing distance between lights effect becomes too strong and that's because of multiplication.
Anyway, I can't think of better solution and for now I'll stick with it.

Attachment shows how it looks with normal light (left side) and after moving together two lights (very bright, "long" light).
« Last Edit: July 19, 2018, 12:05:47 pm by frogi16 »

Laurent

  • Administrator
  • Hero Member
  • *****
  • Posts: 32498
    • View Profile
    • SFML's website
    • Email
Re: Color and alpha blending.
« Reply #5 on: July 19, 2018, 01:25:38 pm »
Multiply blending mode is typical when drawing lights, as it mimics the ability of surfaces to reflect some components of the light and absorb the rest. If your surface is red in "normal" (white) light, then it means that it reflects red and absorbs green and blue. If you light it with a red light, it will still be red, but if you use a green light it will appear black because it absorbs that color and there's nothing left to reflect. Now if you put that in simple equations, you'll see that it is component-wise multiplication of colors, which is precisely what the Multiply blending mode does.

And of course, lights themselves must be added together (additive blending), because they produce (emit) color.
« Last Edit: July 19, 2018, 01:28:02 pm by Laurent »
Laurent Gomila - SFML developer