wgpu(web): potential alpha blending issue / weirdness.

[petalas]

Disclaimer
I am new to wgpu and graphics programming in general, it is possible this is not actually a bug and I am just missing something.
I figured I would open this issue just in case and get some feedback.

Description
Drawing semitransparent triangles on top of a white background results in them having the wrong opacity.
In fact they are almost (if not exactly) half as transparent as they are supposed to be.
So around a:0.5 they lose all transparency and look like a:1.0.

I am targeting a very specific BlendState (which if I am not mistaken is equivalent to the default browser canvas one).

let blend_state: BlendState = BlendState {
    color: wgpu::BlendComponent {
        src_factor: wgpu::BlendFactor::SrcAlpha,
        dst_factor: wgpu::BlendFactor::OneMinusSrcAlpha,
        operation: wgpu::BlendOperation::Add,
    },
    alpha: wgpu::BlendComponent {
        src_factor: wgpu::BlendFactor::One,
        dst_factor: wgpu::BlendFactor::One,
        operation: wgpu::BlendOperation::Max,
    },
};

Here is what a bunch of triangles that all have a:128 look like drawn by native canvas vs wgpu.

Very interestingly, I have discovered a hacky workaround that results in seemingly correct colors.
The workaround is to manually draw 2 white triangles first, covering the entire background, before drawing anything else.

I have set load: wgpu::LoadOp::Clear(wgpu::Color::WHITE) for my renderpass.
Drawing white triangles on top of what is already a white background should have no effect (right?), but here is the result:

Hopefully given the fact that this workaround corrects the colors someone more knowledgeable can reverse engineer what the actual issue is.

Repro steps
I have created a test-canvas-vs-wgpu branch on my test project, feel free to use it. You just have to ./build.sh && npm i && npm run start .

You can comment out L36 and uncomment L37 to switch between the two tests (white triangles added vs not).

Platform
wgpu 0.17
Ubuntu 22.04.3 LTS (WSL2) - host is Windows 11 Pro 22H2 (22621.2215)
rustc 1.65.0
wasm-bindgen 0.2.87
Chrome: Version 116.0.5845.141 (Official Build) (64-bit)
GeForce RTX 4090, driver version 537.13

cc @cwfitzgerald

[LunaTheFoxgirl]

As far as I know Canvas uses premultiplied alpha, so your color blending factor should be 1, 1-SrcAlpha.

[petalas]

As far as I know Canvas uses premultiplied alpha, so your color blending factor should be 1, 1-SrcAlpha.

@LunaTheFoxgirl If you mean this:

let blend_state: BlendState = BlendState {
    color: wgpu::BlendComponent {
        src_factor: wgpu::BlendFactor::One,
        dst_factor: wgpu::BlendFactor::OneMinusSrcAlpha,
        operation: wgpu::BlendOperation::Add,
    },
    alpha: wgpu::BlendComponent {
        src_factor: wgpu::BlendFactor::One,
        dst_factor: wgpu::BlendFactor::One,
        operation: wgpu::BlendOperation::Max,
    },
};

I have tried it and it's not any better: