Texture Transparency (Alpha/Blending)

Textures can have alpha values. 32bit textures consist if red, green, blue and alpha values. We want to enable our WebGPU renderer so these alpha values are not ignored. As up to know, you might not have noticed - if you load in a texture and it has alpha - it will just be ingnored.

Loaded texture mapped to the surface of a square.

Functions Used: setVertexBuffer(), setIndexBuffer(), drawIndexed(), createBuffer(), getMappedRange(), getContext(), requestAdapter(), getPreferredCanvasFormat(), createCommandEncoder(), beginRenderPass(), setPipeline(), draw(), end(), submit(), getCurrentTexture(), createView(), createShaderModule()

There are two key places that make alpha blend work (the first switches it on and the second lets you adjust the blending options).

First when you setup the canvas - set the

alphaMode'':

[XCODE]

Then in the pipeline, there is also a

blend`` structure that goes with the fragment target:

<?php
const context = canvas.getContext('webgpu');
const adapter = await navigator.gpu.requestAdapter();
const device  = await adapter.requestDevice();
const presentationFormat = navigator.gpu.getPreferredCanvasFormat(); 
context.configure({ device: device, format: presentationFormat,
                    alphaMode: 'premultiplied',  /* IMPORTANT IMPORTANT - vs default opacity */ });

const context = canvas.getContext('webgpu');
const adapter = await navigator.gpu.requestAdapter();
const device = await adapter.requestDevice();
const presentationFormat = navigator.gpu.getPreferredCanvasFormat();
context.configure({ device: device, format: presentationFormat,
alphaMode: 'premultiplied', /* IMPORTANT IMPORTANT - vs default opacity */ });

Let's bring it all together and look a the full example:

<?php
const pipeline = device.createRenderPipeline({
  layout: device.createPipelineLayout({bindGroupLayouts: [sceneUniformBindGroupLayout]}),
  vertex:      {   module: shaderModule, entryPoint: 'vsmain', 
                   buffers: [
                            { arrayStride: 4*3,attributes: [ {shaderLocation: 0, offset: 0, format: 'float32x3' } ] },
                            { arrayStride: 4*2,attributes: [ {shaderLocation: 1, offset: 0, format: 'float32x2' } ] }
                            ]
               },
  fragment:    {   module: shaderModule, entryPoint: 'psmain',
                   targets: [ { format: presentationFormat,
                                blend: { color: {srcFactor:'src-alpha', dstFactor:"one-minus-src-alpha" ,operation:"add"},
                               alpha: {srcFactor:'one',       dstFactor:"one" ,                operation:"add"}  }
                              
                             } ]
               },

const pipeline = device.createRenderPipeline({
  layout: device.createPipelineLayout({bindGroupLayouts: [sceneUniformBindGroupLayout]}),
  vertex:      {   module: shaderModule, entryPoint: 'vsmain',
                   buffers: [
                            { arrayStride: 4*3,attributes: [ {shaderLocation: 0, offset: 0, format: 'float32x3' } ] },
                            { arrayStride: 4*2,attributes: [ {shaderLocation: 1, offset: 0, format: 'float32x2' } ] }
                            ]
               },
  fragment:    {   module: shaderModule, entryPoint: 'psmain',
                   targets: [ { format: presentationFormat,
                                blend: { color: {srcFactor:'src-alpha', dstFactor:"one-minus-src-alpha" ,operation:"add"},
                               alpha: {srcFactor:'one',       dstFactor:"one" ,                operation:"add"}  }

                             } ]
               },

Resources and Links

• WebGPU Lab Example []

Advert (Support Website)

Visitor: