Hard Game effectsAnimated

Hex energy shield

The sci-fi force field from shooters: a glowing dome of hexagon cells that flicker one by one, with a bright rim.

The target picture for the shader challenge "Hex energy shield"
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 941 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

Space
uses length
Hex grid
uses frac, shorter, lerp, step, dot
Hex distance
uses hexd, max, dot, abs, normalize
Cell lines
uses smoothstep, hexd
Flicker
uses floor, pow, frac, hash
Dome
uses smoothstep
Rim
uses smoothstep
Colors
colours float3(0.02, 0.03, 0.06), float3(0.2, 0.7, 1.0), float3(0.3, 0.8, 1.0)

Only the building blocks and the colours are listed. Work out how they fit together, then measure the numbers from the target.

Helper functions provided

The toolbox has: hash(). 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