Smooth Min

13 / 15

📝 Exercise Goal

Practice core GLSL math building blocks used across shaders.

💡 💡 Tutorial Content

Practice core GLSL math building blocks used across shaders.

Overview

  • Use a distance field and a mask to shape the image.

Learning Objectives

  • Understand the math behind the effect

Prerequisites

  • uv-coordinates

Key Concepts

  • Distance to center builds a distance field.
vec2 p = vUv - 0.5;
float d = length(p);
  • Convert distance into a mask.
float mask = 1.0 - smoothstep(r, r + aa, d);

How To Implement (Step-by-step)

  • Center coordinates: p = vUv - 0.5.
  • Compute distance: d = length(p).
  • Build a mask with smoothstep or step.
  • Mix foreground/background by the mask.

Self-check

  • Does it compile without errors?
  • Does the output match the goal?
  • Are key values kept in [0,1]?

Common Mistakes

  • Clamp t into [0,1] when needed.
  • Make sure edge0 < edge1 for smoothstep().

GLSL Code Editor

Correct Code Preview

Current Code Preview