What is Alpha - Built-in functions - Shader Learning

Built-in functions

What is Alpha

Task

You are given a full-screen color overlay. Right now, it completely hides the background image.


Your goal: make the overlay semi-transparent so the background becomes partially visible. To do this, you need to change the alpha value of the output color to 50%.

Theory

Alpha ( $A$ ) tells us how see-through a pixel is:

  • $A$ = 1.0 - fully opaque (you see only the foreground)
  • $A$ = 0.0 - fully transparent (you see only the background)
  • $A$ = 0.5 - half-transparent (you see a mix)

This is especially useful in compositing, where we layer images:

  • Background - the image already on screen
  • Foreground - the image we want to place on top

How Blending Works

When placing a foreground pixel over a background pixel:

  • If the foreground is opaque, we fully replace the background
  • If the foreground is transparent, we leave the background unchanged
  • If the foreground is partially transparent, we blend the two

This blending depends on alpha ( $A$ ). It represents how much of the pixel is covered by the foreground.

How to Change Alpha in GLSL and HLSL

In both shading languages, colors are typically represented as a vec4 (or float4 in HLSL), where the fourth component is alpha ( $A$ ), controlling transparency.

// Yellow with 50% transparency
vec4 color = vec4(1.0, 1.0, 0.0, 0.5);