Medium Filters
Edge detection (Sobel)
Show only the edges of the picture as white lines on black.
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 1157 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
- Step
e = 0.004 (uv units); sample the luminance (dot with float3(0.299,0.587,0.114)) of the 8 neighbours- Gx
(tr + 2*r + br) - (tl + 2*l + bl)- Gy
(tl + 2*t + tr) - (bl + 2*b + br)- Edge
saturate(length(float2(gx, gy)) * 3.0)
Helper functions provided
The toolbox has: scene(). 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