Recipe

Shader basics

Write your first fragment shader and understand the GPU pipeline Meridian uses under the hood.

What is a shader?

A shader is a small program that runs on your GPU. Meridian uses fragment shaders to compute the color of every pixel on screen — millions of them, all in parallel.

Your first shader

Every Meridian shader exports a main function that receives a UV coordinate and returns a color.

vec4 main(vec2 uv) {
  return vec4(uv.x, uv.y, 0.5, 1.0);
}

This fills the screen with a gradient — red left-to-right, green top-to-bottom, blue constant.

Built-in uniforms

Meridian injects these values automatically every frame:

u_time — seconds since load
u_resolution — viewport width and height
u_mouse — normalized cursor position

Next steps

Try animating with u_time, or explore the noise and distortion recipes for more advanced techniques.

← Back to docs Noise recipe →