Your first shader — Parallax Sketchbook

SKETCHBOOK / 11 The shader desk · 2-week chapter

Page 1 of 3: The browser is a real graphics bridge

One API, one small visual change

The browser is a real graphics bridge

The Shader Lab uses WebGL2 to compile and run GLSL ES 3.00 shaders in a supporting browser. This is actual shader execution through the browser graphics API; hardware acceleration depends on the browser and driver, and a software renderer may be used. It is separate from the C++ CPU executables; the browser is not compiling the native renderer.

The reference draws a fullscreen triangle. Its vertex shader receives a_position and writes clip-space gl_Position. The fragment shader uses u_resolution in backing pixels and u_time in seconds to produce its procedural postcard. Begin paused so that one source change has a stable image to compare.

If WebGL2 is unavailable, record that result honestly and inspect the source and expected interface. Device support, driver behavior, and context loss are part of real API work. A fallback explanation should not pretend the shader ran.

TRY IT IN YOUR STUDIO

Open the Shader Lab, keep time paused, and change one named color or circle radius. Save the source difference and an image or an honest unsupported-browser note.

From the page to your own work

Your studio assignment.

Change one real browser shader and explain the interface between its stages.

A finish line you can see

Your own shader variation, the source diff, one screenshot, and a note connecting its inputs to the CPU triangle experiments.

Run the WebGL2 reference when the browser supports it, or record an honest unsupported-device result.
Change an expression or add a bounded control rather than submitting a preset.
Read a deliberate compile failure, then restore a valid shader.
Explain GLSL ES 3.00 versus desktop GLSL and state that native OpenGL is a later bridge.

Keep the evidence in your weekly notebook ↗

Explain it like an engineer

Try answering aloud before opening the review notes. Use your own implementation as evidence.

What is the difference between a vertex attribute, a varying, and a uniform?

Attributes supply per-vertex data from configured buffers.
Matching stage outputs/inputs carry interpolated values to fragments.
Uniforms are program inputs updated through the API, not mutable shared memory between shader invocations.

These prompts support practice; they are not an automatic assessment of your work.

A tip for this exercise

Save the last compiling shader before each experiment. Change one visible expression at a time, keeping the geometry fixed, so a color result and a compiler diagnostic each answer a clear question.

Hints, when you need them.

Try a first step, then reveal as much help as you need. Each hint gets a little more specific.

1Hint 1 · Find a starting point

Begin in the fragment stage and identify the expression that determines output color. Predict a visible change before editing it.

2Hint 2 · Choose an approach

Trace one input back to its source: vertex attribute, matching stage output, or uniform. Check GLSL ES 3.00 declarations rather than copying desktop shader syntax blindly.

3Hint 3 · Check your reasoning

If WebGL2 runs, compile your variation, save its source and screenshot, then introduce and restore one syntax error. Otherwise, save an honest unsupported-browser note. In either case, explain which input should make your pattern vary across the image.

A small creative variation ↗

Make an original two-color spatial pattern controlled by one uniform. Keep the geometry and draw count fixed.

Optional. Save it for later if this chapter already feels full.

Coming back after a break? ↩

Restore the last compiling shader and make one color constant visibly different. Stop when the change renders.

Books & principles behind this study +

Original Parallax explanations and assignments, with these works for further reading.

YOUR MARGIN NOTES

Leave yourself a good question.

What changed your mind? What would you try next?

Notes for Your first shader

Notes are private to this browser and saved as you write.

A CHECKPOINT, NOT A SCORE

Can you explain the idea and try the exercise yourself?

Completion records your own assessment. It does not compile or test your C++.

Companion source 2 files