ShaderBattle

Medium EffectsAnimated

Morphing distance field

A circle and a box sliding in and out of each other, drawn as glowing contour lines.

Play this challenge All challenges
The target picture for the shader challenge "Morphing distance field"
Recreate this picture. You pass at a 99% match, then try to write it in fewer characters than the par.

How this challenge works

You write a fragment shader that draws the picture above, live in your browser. A match bar shows how close you are, and the score combines accuracy, code size (the par is 620 characters in Unity (Built-in)) and GPU speed. Work in HLSL, GLSL, WGSL, Metal or Godot and export the result when you are done.

The numbers you need

Circle
center float2(0.15 * sin(time), 0.0), radius 0.2
Box
center -float2(0.15 * sin(time), 0.0), half-size float2(0.15, 0.1)
Union
smooth min with k = 0.15 (see smin in the Toolbox)
Color
inside float3(0.3,0.6,0.9), outside float3(0.9,0.5,0.3): lerp(inside, outside, step(0.0, d))
Contours
col *= 0.6 + 0.4 * cos(d * 120.0)
Outline
lerp(col, white, 1.0 - smoothstep(0.0, 0.005, abs(d)))

Helper functions provided

The toolbox has: smin(). Add them above your frag function with one click.

Solve it in your language

Unity (Built-in), Unity (URP), Unreal, Shadertoy / WebGL, OpenGL (LWJGL, raylib), three.js, GameMaker, LÖVE (Lua), Godot, Apple (iOS, macOS), WebGPU / Bevy.

Start coding

More effects challenges