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

Author Topic: Overlaying two textures  (Read 2686 times)

0 Members and 1 Guest are viewing this topic.

SetLN10

  • Newbie
  • *
  • Posts: 3
    • View Profile
Overlaying two textures
« on: April 16, 2021, 12:59:19 pm »
I am trying to overlay one texture on top of another one. Both textures have semi-transparent areas. Expected result: like layers in Photoshop or other raster graphics editors (image 1). I am trying to do this by drawing both textures in RenderTexture one by one.
But I have two problems:
1. When simply drawing a texture on top of a transparent RenderTexture, a dark stroke appears along semi-transparent the contour (image 2). I already found a solution to use BlendMode(BlendMode::One, BlendMode::OneMinusSrcAlpha).
2. This problem occurs when trying to solve the first one. If I only apply BlendMode to the first texture, it draws fine, but the second texture makes the transparent part of the first texture opaque (images 3, 4). Applying BlendMode to both textures produces completely inappropriate result.
Is there a way to solve both problems and achieve the effect of overlaying layers like in raster graphics editor?

sf::BlendMode blendMode(sf::BlendMode::One, sf::BlendMode::OneMinusSrcAlpha);

sf::Texture tex0;
tex0.loadFromFile("layer_0.png");

sf::Texture tex1;
tex1.loadFromFile("layer_1.png");

sf::RenderTexture rtex;
rtex.create(width, height);
rtex.clear(sf::Color::Transparent);
rtex.draw(sf::Sprite(tex0), blendMode);
rtex.draw(sf::Sprite(tex1));
rtex.display();

sf::Texture layers = rtex.getTexture();
layers.copyToImage().saveToFile("layers.png");
 

eXpl0it3r

  • SFML Team
  • Hero Member
  • *****
  • Posts: 10801
    • View Profile
    • development blog
    • Email
Re: Overlaying two textures
« Reply #1 on: April 16, 2021, 02:38:05 pm »
I think if you render the first texture with BlendMode::None it shouldn't mix with the black but transparent background.

I am however unsure what you need to pick for the second texture.
Official FAQ: https://www.sfml-dev.org/faq.php
Official Discord Server: https://discord.gg/nr4X7Fh
——————————————————————
Dev Blog: https://duerrenberger.dev/blog/

SetLN10

  • Newbie
  • *
  • Posts: 3
    • View Profile
Re: Overlaying two textures
« Reply #2 on: April 16, 2021, 03:55:11 pm »
I think if you render the first texture with BlendMode::None it shouldn't mix with the black but transparent background.

This would work if I didn't need to save transparency. If I initially fill RenderTexture with an opaque color and render textures over that color without BlendMode then there will be no dark stroke. But this doesn't work on a transparent background. Even if I draw one texture on a transparent background without BlendMode, it will have dark stroke

eXpl0it3r

  • SFML Team
  • Hero Member
  • *****
  • Posts: 10801
    • View Profile
    • development blog
    • Email
Re: Overlaying two textures
« Reply #3 on: April 16, 2021, 10:07:02 pm »
What do you mean "save transparency"?

The situation is that your "transparent" color that you use to clean the window, isn't just transparent, but it's actually black with an alpha set to 0.
So when you alpha blend your textures, it will blend with the black color, thus you get the black strokes.

If you render it with blend none, then it's applied 1:1. This of course doesn't necessarily work for overlaying multiple textures, as you do want to alpha blend then.
Official FAQ: https://www.sfml-dev.org/faq.php
Official Discord Server: https://discord.gg/nr4X7Fh
——————————————————————
Dev Blog: https://duerrenberger.dev/blog/

SetLN10

  • Newbie
  • *
  • Posts: 3
    • View Profile
Re: Overlaying two textures
« Reply #4 on: April 17, 2021, 04:44:55 am »
I am sorry, I misunderstood your previous message.
I think if you render the first texture with BlendMode::None it shouldn't mix with the black but transparent background.
BlendNone indeed gives the same effect as BlendMode(BlendMode::One, BlendMode::OneMinusSrcAlpha) for one texture.

What do you mean "save transparency"?
When I say "save transparency", I mean that I want to keep transparent the part of the image that is transparent in both images.

The situation is that your "transparent" color that you use to clean the window, isn't just transparent, but it's actually black with an alpha set to 0.
So when you alpha blend your textures, it will blend with the black color, thus you get the black strokes.

If you render it with blend none, then it's applied 1:1. This of course doesn't necessarily work for overlaying multiple textures, as you do want to alpha blend then.
Yes, I know about the reasons for the black stroke. And what you talked about really works for one texture. But, as I said, I need to combine two textures into one, overlaying them. Is it really impossible to do this without unwanted artifacts?

Could it be possible to do this using shaders? I know very little about it. Is it possible to achieve the desired effect using shaders?