Trying to write blended pixels to the screen, getting no transparency / black clear.

[Zageron]

Disclaimer: I am not trying to render the window as transparent, though I may end up doing that, right now I'm just trying to blit a texture with transparency information onto the screen.

Screen is standard screen: &mut [u8] from examples.

Wondering if the format is conflicting, the screen shows "cleared" as \xff\xff\xff,, so I am a little confused as to the format it is expecting.

I also tried the following, with no luck.

let pixels = if let Ok(pixels) = PixelsBuilder::new(WIDTH, HEIGHT, surface_texture)
        .surface_texture_format(TextureFormat::Bgra8UnormSrgb)
        .build_async()
        .await

This is the result. (I've tried different alpha blending modes, with no avail so not sure.) (The colors are correct, just no transparency / blending.)

These are my image conversion options: (I am currently using to_rgba8.)

[parasyte]

If I understand correctly what you are doing, there is no blending in the latest released version so you are going to see the exact color values you put into the buffer. The alpha channel is completely ignored.

The unreleased main branch has configurable BlendState, and defaults to alpha blending, which is probably closer to what you expect.

I don’t know what you mean by “alpha blending modes”, that seems to imply you were trying to change the BlendState on the unreleased main branch, and it was having no affect. Is this the case?

[Zageron]

Please let me know if there is anything I can do to help you understand what might be wrong.
Or, if you have any advice on what I can do to better discover how I might fix this.

[parasyte]

Are you doing your own blending? This might seem like a silly question, but pixels is not going to do any blending when you write color data to the pixel buffer. You're 100% in control of what you put into it.

The BlendState works with texture compositing on the surface. That is, the pixel buffer is a texture containing an alpha channel, and the surface is a texture which does not (with pixels the surface texture only provides the background color). Assuming your pixel buffer is mostly transparent like your source png, you will be able to set the clear color to whatever you want and wgpu will blend your pixel buffer with it, producing the kind of effect that I believe you are after.

That said, your example has a lot of code which is irrelevant to the investigation. The common practice is to share a minimal reproduction case to demonstrate that there is a bug. Since I am not familiar with your code base and there is far too much for me to pick through, I will instead start from scratch and build a small demo that shows blending working as intended.

Even this was a bit painful. I wanted the demo to show there is "nothing up my sleeve" so the background color uses a simple linear animation from black to white and back. I don't have a copy of your source image, but I don't think that is relevant to the issue, either. I just created an image with some colored text on a transparent background.

The demo code is here: https://github.com/parasyte/alpha-test

The main point of interest is that whatever you put into the pixel buffer with alpha < 1 will let some of the background show through. The background can only be a solid color (called the clear color). If you want to do any more advanced blending like compositing two images together, that's up to you in your blit function. Based on your comments, I don't think you are that far along, yet.

Given that my demo works (for me, at least!) it doesn't seem there is a bug on our end.

[parasyte]

I suspect what is happening in your code is precisely what I alluded to. You are not doing any blending in your blit, but you expect pixels to do that.

1. The pixel buffer is cleared with white and 17% alpha.
2. Arrows are blitted to the buffer without any compositing at all, wiping out the existing translucent white.
   • The blit() function is responsible for doing the compositing.

If you take the pixel buffer contents after game.draw() returns and write it to a png file, you will see exactly what has gone wrong. The image will look exactly like what you see in the window! Except the black area around the arrows will be fully transparent (alpha = 0) and everything around it will be translucent white. What you are seeing in the window is a blend of this "broken" image with the clear color (which is black).

You can fix it by replacing your clear() function with one that clears the buffer to transparent black (like what I have in the demo) and set the clear color to the final composited background color that you want. Assuming that is a mid gray, as in the translucent white blended with black, you would do this:

let intensity = (44.0 / 255.0).powf(2.2);

PixelsBuilder::new(WIDTH, HEIGHT, surface_texture)
    .clear_color(pixels::wgpu::Color {
        r: intensity,
        g: intensity,
        b: intensity,
        a: 1.0,
    })
    .build_async()
    .await

That should produce more-or-less exactly what you want. The background will be approximately mid-gray as shown in your first screenshot.

[Zageron]

Thank you very much for all of the details, just based on your explanation I am 100% certain that my issue is exactly as you described. The fact that it didn't automatically blend with the manual clear color went straight over my head.

Thank you very much for the example, I will read through it shortly and hopefully I'm smart enough to solve my problem.

Thanks again for spending all that time writing the example, by the way, that was very generous of you.

[parasyte]

My pleasure! I have an obligation to ensure that pixels functions as intended. If it can help a user, that's even better. :) No wasted effort on my part.

If there is anything else I can do, I'll gladly try my best.