SPECIMEN · 007 · GLSL
PROJECT LAVOS · SPECIMEN SERIES
Ex calculo, color. FROM CALCULATION, COLOR · STAGE II · SHADING

every pixel.

GLSL · WEBGL2 · FRAGMENT SHADER · LIVE RECOMPILE
Stage
fragment
Backend
webgl 2
Resolution
— × —
Pixels / frame
Compile
ok
FPS
FIG. 1 · DOMAIN-WARPED FBM
live · gpu · 60 hz
uniforms
u_scale · u_warp · u_speed
u_scale 2.40
u_warp 2.20
u_speed 1.00
fragment.glsl · #version 300 es
§ I

Every pixel runs the same program.

The square above is a quadrilateral — two triangles, four vertices. The interesting work happens after the rasteriser turns it into pixels. For each pixel, the GPU runs the program in the textbox below — once, in parallel, alongside two million siblings. There is no loop in your code. The loop is the silicon.

This is the model GLSL was designed for. Vertex shaders position geometry; fragment shaders shade the pixels that result. A modern phone has a few thousand cores doing this work simultaneously. A modern desktop GPU, tens of thousands. The price of admission is that your program cannot decide what its neighbours are doing — every pixel must answer for itself.

No loops. The loop is the silicon.

§ II

What you are looking at.

The default shader is a domain-warped fractal Brownian motion field — a technique popularised by Inigo Quilez. Three steps: compute a noise field, use that noise to displace the input coordinates, then sample noise again at the displaced coordinates. Iterate. The result looks organic without any image data being involved. There is no underlying texture. The colour at every pixel is the output of about thirty additions and multiplications, applied to that pixel's (x, y) alone.

Move the sliders. u_scale sets how zoomed-in the noise is; u_warp controls how far each iteration bends the field back on itself; u_speed changes the rate at which the field evolves over time. None of these names are special — they are uniforms, channels by which the CPU tells the GPU what numbers to use today.

§ III

Edit the source. Watch it recompile.

Now do something the other specimens cannot let you do: change the substance. Click in the textbox and edit the code. Try changing the colour mix at the bottom. Try replacing fbm(uv * uScale) with sin(length(uv) * 12.0 - uTime). The compiler runs after each change; if your code fails to compile, the panel below the editor will tell you why.

Every visual on the page is the live output of the text in that box. Nothing here is pre-rendered. Nothing here is cached. The image you are watching is being computed, right now, by your GPU, from a few hundred lines of arithmetic. This is what people mean when they say the GPU is a function.

Math, made visible.

math, made visible.
SPECIMEN 007 · MMXXVI
PROJECTLAVOS-BAUHAUS
../specimens