Forem: mu san

GLSL Tutorial (Part 1): Solid Color Fill

mu san — Tue, 23 Dec 2025 14:55:19 +0000

When learning shader programming, the fragment shader is the most approachable and visually intuitive place to start. In this tutorial, we will use a minimal example to understand the basic structure of a GLSL shader and learn how to render a solid color across the entire canvas using gl_FragColor.

1. What Is a Fragment Shader?

The role of a fragment shader is simple in concept:

It determines the final color of every pixel on the screen.

You can think of it as a color calculator. The GPU executes the main() function once for every pixel, and the result defines that pixel’s color.

2. Complete Example Code

Let’s start by looking at the full shader code:

precision mediump float;

uniform float u_time;
uniform vec2 u_resolution;

void main() {
    gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);
}

This shader produces the following result:
👉 The entire canvas is filled with solid red.

3. Basic Structure of a GLSL Shader

3.1 Precision Declaration

precision mediump float;

This line defines the default precision for floating-point numbers:

lowp – low precision (fast, less accurate)
mediump – medium precision (most common)
highp – high precision (most accurate, slower)

In WebGL fragment shaders, declaring float precision is mandatory, otherwise the shader will fail to compile.

3.2 `uniform` Variables

uniform float u_time;
uniform vec2 u_resolution;

A uniform variable:

Is passed in from the CPU (JavaScript)
Has the same value for all pixels during a draw call
Is read-only inside the shader

Common usage examples:

Variable	Meaning
`u_time`	Elapsed time in seconds
`u_resolution`	Canvas resolution (width, height)

In this example, these variables are not yet used, but declaring them early prepares us for animations and coordinate-based effects later.

4. `main()`: The Shader Entry Point

void main() {
    ...
}

main() is the only entry point of a GLSL shader
It is executed once per pixel
You never call it manually

5. `gl_FragColor`: Outputting the Pixel Color

gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);

This is the most important line in the shader.

5.1 What Is `gl_FragColor`?

gl_FragColor is a built-in output variable
It defines the final color of the current fragment (pixel)
Its type is vec4

5.2 The RGBA Color Model

A vec4(r, g, b, a) represents:

Channel	Description	Range
R	Red	0.0 – 1.0
G	Green	0.0 – 1.0
B	Blue	0.0 – 1.0
A	Alpha (opacity)	0.0 – 1.0

vec4(1.0, 0.0, 0.0, 1.0)

This means:

100% red
0% green
0% blue
Fully opaque

Result: pure red

5.3 Common Color Examples

// White
vec4(1.0, 1.0, 1.0, 1.0);

// Black
vec4(0.0, 0.0, 0.0, 1.0);

// Green
vec4(0.0, 1.0, 0.0, 1.0);

// Semi-transparent blue
vec4(0.0, 0.0, 1.0, 0.5);

6. Why Is the Entire Screen the Same Color?

Because:

Every pixel executes main()
Every pixel assigns the same value to gl_FragColor
No coordinates, time, or varying data are used

As a result:
The whole canvas is filled with a single color.

Shader Learn: Your Fast-Track to Hands-On GLSL Mastery

mu san — Sat, 14 Jun 2025 02:54:12 +0000

When you first dip your toes into GPU programming, the flood of scattered tutorials can feel overwhelming. Shader Learn (shader-learn.com) takes a different approach: one browser-based hub that blends concise lessons, live coding, and project challenges into a single feedback loop. Below is a practical tour of the platform, ready for publication on dev.to.

Why Shader Learn Deserves Your Attention

Zero setup friction – An in-browser editor and WebGL canvas mean you write code and watch pixels change instantly; no local tool-chain required. ([shader-learn.com][1])
A structured curriculum – Six thematic tracks (Basic, Math, Lighting, Patterns, Animation, Noise) span 30-plus micro-lessons, each capped with an exercise and a canonical solution. ([shader-learn.com][2])
Project-first pedagogy – From particle storms to procedural textures, every module ends with a mini-project so you leave with a share-ready artifact instead of half-digested theory. ([shader-learn.com][1])
Cross-domain relevance – Examples target game effects, creative coding, data-viz heatmaps, and web UI flourishes, making it easy to port skills back to real client work. ([shader-learn.com][2])

Five-Minute Quick-Start

Sign up at shader-learn.com and open the Basic path.
Locate lesson 1, “Coordinate Basics”, then clear the editor and paste the fragment shader below.
Press Run and enjoy the instant gradient; tweak values to feel the GPU react in real time.

// Fragment shader: render an XY gradient
void main() {
  // Normalized pixel coordinates (0-1 range)
  vec2 st = gl_FragCoord.xy / u_resolution;

  // RGB = (x, y, constant blue)
  vec3 color = vec3(st.x, st.y, 0.5);

  gl_FragColor = vec4(color, 1.0);
}

What’s happening?

gl_FragCoord gives us the current pixel; dividing by the resolution normalizes it.
We pack those XY values into RGB channels, producing a diagonal sweep.
Because the code runs per-pixel on the GPU, changes are visible the moment you hit Run, cementing the mental model of parallel shading long before matrix algebra enters the chat.

Learning Tracks at a Glance

Track	Key Topics	Lessons	Ideal Stage
Basic	Coordinates, UVs, color	10	Novice
Math	Trig, vectors, matrices	5	Beginner
Lighting	Phong, PBR fundamentals	2	Intermediate
Patterns	Procedural textures, ramps	6	Intermediate
Animation	Time uniforms, easing, FFT	4	Advanced
Noise	Perlin, FBM, worley	3	Advanced

Completion progress is tracked so the site can suggest what to tackle next. ([shader-learn.com][2])

Project Ideas to Cement Your Knowledge

Interactive Starfield – Combine the Noise track’s FBM lesson with mouse-driven camera motion for a lobby-screen ready background.
Hero Banner Shader – Adapt the Patterns stripes demo into a lightweight animated header for your personal site—one <canvas> beats a 2 MB GIF.
Heatmap Renderer – Use gradient lookup + simplex noise for a performant data-visualization layer that paints directly in the fragment stage.

Each sample ships with copy-pasteable scaffolding so you drop it straight into React, Vue or raw Three.js.

Shader Learn vs. Shadertoy: Picking the Right Tool

Aspect	Shader Learn	Shadertoy
Learning Flow	Guided curriculum + tasks	Open gallery; self-directed
Onboarding Time	Minutes	Depends on prior GLSL fluency
Community Focus	Discord Q&A, instructor feedback	Showcase & peer critique
Pricing	Free core; optional Pro packs	Free (donation supported)

If you already crank out signed-distance fields on Shadertoy, Shader Learn’s quizzes will help patch theory gaps; if you’re new, start here, then graduate to Shadertoy’s wild west of inspiration.

Study Tips for Consistent Progress

One lesson per day – Momentum matters more than marathon sessions.
Annotate your tweaks – Keep a Git repo or Gist of every shader variant; watching diff-logs is a crash course in GPU performance trade-offs.
Write post-mortems – After each mini-project, jot down what surprised you (e.g., precision qualifiers, branching costs). Those notes turn into blog posts—and potential job-interview talking points.

Final Thoughts

Shader Learn distills the “edit-run-see” loop of shader art into a clean, incremental curriculum. Whether you’re a front-end engineer chasing buttery scroll effects or a technical artist prototyping next-gen visuals, the platform’s bite-size tasks and instant GPU feedback form a straight, well-lit path to mastery.

Ready to level up? Head to http://www.shader-learn.com, crack open the first lesson, and watch your pixels spring to life. If the journey hits home, spread the word—GLSL newcomers everywhere will thank you.