Skip to content
Gaming

Shader Coding Challenges

Recreate a target image with a fragment shader.

Intermediate14h1 person16/20 fit
TL;DR

Build Shader Coding Challenges for graphics programmers in ~14h with 1 person. Stack: WebGL + Three.js.

Why it wins: Unique learning game.

Build flow

01 · Problem
Shaders are hard to learn without goals.
02 · Solution
Show a target image, the player writes a shader, and a similarity score compares output to the target.
03 · Build
  1. 1Build editor
  2. 2Render shaders
  3. 3Compare pixels
  4. 4Rank
04 · Demo
Write a shader and see the score rise.

MVP checklist

  • Target images
  • Live editor
  • Similarity score
  • Leaderboard

Tech stack

TechRole
WebGLGPU rendering
Three.js3D rendering

Reference repos

Open-source projects you can build on. Links checked 2026-10-31.

Related ideas

More Gaming

  • Gaming

    Code Bot Arena

    Write bots that battle in an arena and climb a leaderboard

    Intermediate18h2–3
    PyodidePixiJSNode.js
    17/20