Rendering texture with partial transparency on canvas.

[shriharirathod]

Facing issue when rendering overlapping quads with partial transparent sampled textures.
Issue: Holes visible in texture due to partial transparency portions of original image.

Detailed steps:

1. Texture created using image. Image has partial transparent edges or parts of image are transparent.
2. Same texture rendered on overlapping quads.
3. On last rendered quad, it takes partial transparency from sampled texture. End result looks like a hole in canvas instead when it was expected that colour from previous render pass would persist.

Have enabled alpha mode flags at 3 levels:

1. While configuring GPUCanvasContext
   canvasContext.configure({
   ...
   alphaMode: "premultiplied" });
2. While copyExternalImageToTexture
   device.queue.copyExternalImageToTexture(
   ...
   { texture: externalImageTexture, premultipliedAlpha: true });
3. Also while creating image bitmap for creating textures:
   createImageBitmap(await response.blob(), {
   ...
   premultiplyAlpha: "premultiply" });

Can you please suggest if these are correct?
If correct, what could be the possible fix to ensure that colour of previous render pass are kept in case fragment shader encounters transparent colour when sampling?

[greggman]

If you are rendering across multiple frames (multiple requestAnimationFrame events) then the texture you get from getCurrentTexture is always cleared each frame

Otherwise, if you have 2 or more render passes, every pass except the first needs it's loadOp set to 'load'

Finally, whatever values are in the canvas, if their alpha is less than 255 (less then 1.0) and the canvas is configured to alphaMode: premultiplied then there will be transparency through the canvas.

Some more details and examples here:

https://webgpufundamentals.org/webgpu/lessons/webgpu-transparency.html

[shriharirathod]

@greggman Thanks for the transparency link it was very detailed and helped to solve my problem.