Medium Game effectsAnimated
Pixel-art fire
The Campfire flame, but drawn as chunky pixels with only four flat colors, like a retro game.
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 1079 characters in Unity (Built-in)) and GPU speed. Work in HLSL, GLSL, WGSL, Metal or Godot and export the result when you are done.
What it is built from
- Pixel grid
cell = floor(uv * float2(?, ?)); q = (cell + 0.5) / float2(?, ?) (use q instead of uv from now on)- Heat
x = (q.x - 0.5) * aspect; n = fbm(float2(x * ?, q.y * ? - time * ?)); f = n * ? - q.y * ? - abs(x) * ? + ?- Four levels
level = floor(saturate(f) * ?) / ?- Colors
base float3(0.05, 0.0, 0.0); level >= ? → float3(0.9, 0.15, 0.0); >= 0.5 → float3(1.0, 0.75, 0.1); >= ? → float3(1.0, 0.95, 0.7)
The exact numbers are left out (shown as ?), but every colour is given. Measure the rest with the pixel readout on both pictures and Diff.
Helper functions provided
The toolbox has: hash(), vnoise(), fbm(). 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