← LEARNING PATHS

Shaders & 3D

INTERACTIVE LAB — SCROLL DOWN TO TRY THE LIVE PREVIEW ↓

Interactive Lab · ~20 MIN · FREE · LOCAL ONLY

Coordinates, repetition and distance fields: the mental model behind shader demos, without writing GLSL yet.

Explain how per-pixel maths and simple 3D distance fields make images.

  • per-pixel thinking
  • normalised coordinates
  • domain repetition
  • signed distance fields
  • raymarching in outline

Lessons

  1. Every pixel asks the same question

    A shader is one small program answering 'what colour am I?' for every pixel, independently. There is no drawing order and no shapes — only maths at a coordinate.

    TRY THIS BELOW · Move Sphere radius and watch every cell of the field change at once.

  2. Repetition is free

    Wrapping a coordinate before you use it repeats the whole scene infinitely for almost no cost. That is why shader demos are full of endless grids and tunnels.

    TRY THIS BELOW · Change repetition and watch one coordinate cell become many.

  3. Distance fields

    A signed distance field returns how far a point is from a surface. Raymarching steps along a ray using that distance, which is how 3D scenes appear from a page of maths.

    TRY THIS BELOW · Turn on the coordinate grid to see the cell each distance calculation is wrapped into.

Field explorer

Move the parameters until you reach a tight, repeated field with a small sphere radius — the configuration most shader tunnels start from.

Multiplies the coordinate before any maths: higher zooms out and shrinks features.

How many times the space wraps: repetition costs nothing extra per pixel.

The distance-field threshold: smaller means thinner, more negative space.

Shifts where the palette starts, without changing the geometry at all.

Live Preview — Your changes appear instantly below

Use the controls above, then play or inspect the live result here.

Conceptual field preview · not GPU raymarching

Conceptual field: 1 × 1 repeated cells, sphere radius 80.0 pixels, about 20% of the frame filled, palette hue 0 degrees.

WHAT CHANGED · Coordinate scale 1.0 decides how much coordinate space fits on screen: raising it zooms out, so the same maths produces smaller features (80.0px here). Domain repetition 0 wraps the coordinate before the distance function runs, turning one cell into 1 identical cells for no extra cost per pixel. Sphere radius 0.50 is the distance-field threshold, so it trades occupied space against negative space — about 20% of the frame is filled. Colour phase 0.0 shifts where the palette starts (hue 0°) and never moves a single circle, which is exactly how shader code separates colour from geometry.

0/2 REQUIREMENTS MET

  • Repetition ≥ 4, scale ≥ 2, radius ≤ 0.3
  • Preview changed from its initial state

COMPLETION RULE · Change the field away from its initial configuration and reach a repeated, tightly scaled field with a small radius.

Your plan

Everything above stays on this device. Take a copy with you.

Shaders & 3D — SceneStart


Completion: 0/2 — Change the field away from its initial configuration and reach a repeated, tightly scaled field with a small radius.

SceneStart is not affiliated with any demoparty and cannot certify compliance. The party's published rules always take precedence.

Where to do the real work

  • Shadertoy ↗Free browser shader playground with an enormous public archive.
  • Bonzomatic ↗The live-coding tool used in shader showdown competitions.

SCOPE · No GLSL is compiled here and nothing is rendered on the GPU. This path builds the model you need before your first shader.

FREE FOREVER · This path stays local-first, account-free and open to every learner.