← LEARNING PATHS

Shaders & 3D

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.

See what changed

The preview is generated from your choices above.

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 · A future paid tier could add a guided GLSL editor. The explorer stays free.