Saturday June 7, 2025

Home | Contact | Support | WebGPU Graphics and Compute ...

WebGPU/WGSL Tutorials and Articles

Graphics and Compute ...

dual-quaternions racers connected numbers illustation no like race track of runnings usually connected — Transparency (aka opacity or alpha) is such an important aspect of computer graphics - yet, it's ofen overlooked or an after thought!

WebGPU > WebGPU Transparency, Opacity, Alpha, ...

You start on the road to using the WebGPU API, putting triangles on screen, and then onto textures and all sorts of geometry... then you start tinkering with the fragment shader `alpha` only to discover, that it has no affect! Nothing happens, the triangles and shapes do not become ghost like! Why?

Well, to get transparency working, you'll need to do a few extra things!

The first is in the setup configuration:

<?php
context.configure({ device : device, 
                   alphaMode: "premultiplied", // old name compositingAlphaMode: "opaque", 
                   format : presentationFormat });

context.configure({ device : device,
alphaMode: "premultiplied", // old name compositingAlphaMode: "opaque",
format : presentationFormat });

The default setting for

alphaMode

is

opaque

which causes the renderer to ignore alpha values.

Pipeline

The pipeline is the other place, you can configure the `blend` settings - how the colors and alpha values will be mixed together:

<?php
const pipeline = device.createRenderPipeline({
  layout: device.createPipelineLayout({bindGroupLayouts: [sceneUniformBindGroupLayout]}),
  vertex: {
      module: device.createShaderModule({ code: basicVertWGSL }),
      entryPoint: "main",
  },
  fragment: { module: device.createShaderModule({ code: basicPixelWGSL }),
              entryPoint: "main", 
              targets: [{ format: presentationFormat,
                          blend: { color: {srcFactor:'src-alpha', dstFactor:"one-minus-src-alpha" ,operation:"add"},
                                   alpha: {srcFactor:'one',     dstFactor:"one" ,               operation:"add"}  }
                         // blend: { color: { srcFactor: 'one',  dstFactor: 'one-minus-src-alpha', operation:"add" },
                         //          alpha: { srcFactor: 'one',  dstFactor: 'one-minus-src-alpha', operation:"add" }  }
                         }]
  },
  primitive:    { topology: "triangle-strip",  cullMode: 'none' },
  depthStencil: { format:   "depth24plus",    depthWriteEnabled: false,  depthCompare: "less" }
});

const pipeline = device.createRenderPipeline({
  layout: device.createPipelineLayout({bindGroupLayouts: [sceneUniformBindGroupLayout]}),
  vertex: {
      module: device.createShaderModule({ code: basicVertWGSL }),
      entryPoint: "main",
  },
  fragment: { module: device.createShaderModule({ code: basicPixelWGSL }),
              entryPoint: "main",
              targets: [{ format: presentationFormat,
                          blend: { color: {srcFactor:'src-alpha', dstFactor:"one-minus-src-alpha" ,operation:"add"},
                                   alpha: {srcFactor:'one',     dstFactor:"one" ,               operation:"add"}  }
                         // blend: { color: { srcFactor: 'one',  dstFactor: 'one-minus-src-alpha', operation:"add" },
                         //          alpha: { srcFactor: 'one',  dstFactor: 'one-minus-src-alpha', operation:"add" }  }
                         }]
  },
  primitive:    { topology: "triangle-strip",  cullMode: 'none' },
  depthStencil: { format:   "depth24plus",    depthWriteEnabled: false,  depthCompare: "less" }
});

The important nugget is the extra setting for

blend

- to control the color mixing.

Sneaky

discard

WGSL shader command

As with GLSL the

discard

command is supported - so you can prevent the pixel from begin written to the output screen. So for example, if the

alpha

value is less than some threshold (e.g., 0.01), then you might want to have it not passed to the output.

<?php
 @group(0) @binding(1) var mySampler: sampler;
 @group(0) @binding(2) var myTexture: texture_2d<f32>;

@fragment
fn main(@location(0) fragUV: vec2<f32>,
        @location(1) alpha:  f32        ) -> @location(0) vec4<f32> {

  // basic textured 
  var texCol = textureSample(myTexture, mySampler, fragUV);
  
  if ( texCol.a < 0.01 ) { discard; }
  
  texCol.a = texCol.a * alpha;
  return texCol;
}

@group(0) @binding(1) var mySampler: sampler;
@group(0) @binding(2) var myTexture: texture_2d<f32>;

@fragment
fn main(@location(0) fragUV: vec2<f32>,
        @location(1) alpha:  f32        ) -> @location(0) vec4<f32> {

  // basic textured
  var texCol = textureSample(myTexture, mySampler, fragUV);

  if ( texCol.a < 0.01 ) { discard; }

  texCol.a = texCol.a * alpha;
  return texCol;
}

Links and References

• Transparency Demo (Minimal Working Example) - (LINK)
• Billboard Smoke Demo (Alpha) - (LINK)
•

setBlendConstant(..)

- (LINK)
•

blend

- (LINK)

Advert (Support Website)

Visitor:

Copyright (c) 2002-2025 xbdev.net - All rights reserved.
Designated articles, tutorials and software are the property of their respective owners.