WebGL-kleurverlopen en shaders, uitgelegd voor ontwerpers

Een WebGL-kleurverloop is een kleurverloop dat je browser schildert met een shader: een kort programma dat op de grafische chip (de GPU) draait en voor elke pixel op het scherm één vraag beantwoordt: ‘welke kleur ben je op dit moment?’ Een CSS-kleurverloop is een vast recept van kleuren en posities. Een shader is een formule, dus hij kan de kleur buigen, korrelen, laten gloeien en bewegen, en dat zestig keer per seconde opnieuw doen, zonder dat er een afbeelding wordt gedownload.

Je hoeft geen shaders te schrijven om ermee te ontwerpen, maar weten wat ze wel en niet kunnen helpt je een developer te briefen, een tool te beoordelen en te beslissen wanneer een gewoon CSS-kleurverloop de betere keuze is.

Wat een shader is, in gewone woorden

WebGL is de manier waarop de browser met de GPU praat, en elke WebGL-tekening gebruikt twee soorten shaders. De vertex shader plaatst vormen; voor een schermvullend kleurverloop is dat gewoon één rechthoek die het canvas bedekt. De fragment shader doet het interessante werk: hij draait één keer per pixel, krijgt de positie van die pixel en de huidige tijd, en geeft een kleur terug.

Omdat de GPU duizenden van deze programmaatjes parallel uitvoert, wordt een formule die in gewone code traag zou zijn goedkoop genoeg om elk frame opnieuw te tekenen. Hier is een complete fragment shader voor een kleurverloop in drie kleuren waarvan de grens zachtjes meedeint in de tijd, met een regel korrel erbovenop.

#version 300 es
precision highp float;

uniform vec2 u_resolution;   // canvas size in pixels
uniform float u_time;        // seconds since start
out vec4 outColor;

void main() {
  vec2 uv = gl_FragCoord.xy / u_resolution;   // 0 to 1 across the canvas

  vec3 night  = vec3(0.07, 0.04, 0.18);  // #120a2e
  vec3 violet = vec3(0.49, 0.23, 0.93);  // #7c3aed
  vec3 coral  = vec3(0.98, 0.45, 0.45);  // #fa7373

  // A slow wave bends the blend so the colours drift.
  float wave = sin(u_time * 0.3 + uv.x * 3.0) * 0.08;
  float t = clamp(uv.y + wave, 0.0, 1.0);

  vec3 color = mix(night, violet, smoothstep(0.0, 0.6, t));
  color = mix(color, coral, smoothstep(0.55, 1.0, t));

  // Fine grain: a different random value per pixel, per frame.
  float n = fract(sin(dot(gl_FragCoord.xy + u_time, vec2(12.9898, 78.233))) * 43758.5453);
  color += (n - 0.5) * 0.04;

  outColor = vec4(color, 1.0);
}

Hoe een shader-kleurverloop verschilt van een CSS-kleurverloop

Een CSS-kleurverloop is declaratief: je somt kleuren en posities op, en de browser schildert ze. Meestal is het het juiste gereedschap. Een shader is procedureel: je beschrijft hoe kleur zich moet gedragen, en de wiskunde levert haar. Dat verschil zie je terug in wat elk kan en wat elk kost.

Waarom shader-kleurverlopen levend aanvoelen

Drie technieken doen het meeste werk, en je zult developers ze horen noemen. Ruis is vloeiende willekeur: in plaats van een recht verloop volgt de kleur een landschap van zachte heuvels, en daarom ogen shader-kleurverlopen organisch in plaats van geometrisch. Domain warping voert ruis terug in zichzelf, zodat de kleur vouwt en wervelt als inkt in water. Tijd schuift het hele landschap op, en dat maakt van een stilstaand vlak een drijvende beweging.

• Korrel kan per pixel en per frame worden gegenereerd, dus hij glinstert als film in plaats van stil te liggen als een textuur die erbovenop is gelegd. Zie korrelige kleurverlopen.
• Licht kun je met een paar regels nabootsen: een hooglicht dat de ruis volgt, leest als glans op zijde of glas.
• Resolutie is gratis. De formule draait op de grootte van het scherm, dus een shader-kleurverloop blijft met dezelfde code scherp op een telefoon en op een 4K-monitor.
• Banding is makkelijker te verslaan, omdat de shader een beetje dither kan toevoegen voordat de kleur naar 8 bits wordt afgerond. Banding in kleurverlopen legt uit waarom dat ertoe doet.

De kosten van een bewegende WebGL-achtergrond

Een shader die animeert, houdt de GPU aan het werk zolang hij in beeld is. Op een desktop merk je dat nauwelijks. Op een oudere telefoon kan het warme handen betekenen, een batterij die leegloopt en een pagina die minder soepel scrolt. De kosten schalen mee met het aantal pixels en de complexiteit van de formule, dus een schermvullende shader op een scherm met hoge pixeldichtheid is het zwaarste geval. Vertragen kleurverlopen een website behandelt hoe je het meet.

1. 1

   Toon eerst de CSS-terugvaloptie

   Schilder het stilstaande kleurverloop meteen en laat het canvas invervagen zodra de shader zijn eerste frame heeft getekend. Niemand hoort een leeg vak te zien.

2. 2

   Controleer of WebGL beschikbaar is

   Sommige browsers, apparaten en privacy-instellingen zetten het uit. Kan de context niet worden aangemaakt, houd dan de terugvaloptie.

3. 3

   Respecteer verminderde beweging

   Vraagt de bezoeker om minder beweging, teken dan één frame en stop. Verminderde beweging legt de instelling uit.

4. 4

   Pauzeer wanneer het niet te zien is

   Stop de animatielus wanneer het canvas uit beeld scrolt of het tabblad verborgen is.

5. 5

   Render op een verstandige resolutie

   Zachte kleurverlopen hebben zelden elke apparaatpixel nodig. Op halve resolutie tekenen en de browser laten opschalen kan veel werk schelen voor een vervaging waarin je het verschil niet ziet.

const canvas = document.querySelector('#hero-canvas')
const gl = canvas.getContext('webgl2')
const still = matchMedia('(prefers-reduced-motion: reduce)').matches
let visible = true

if (!gl) {
  canvas.remove() // the CSS gradient behind it stays
} else {
  new IntersectionObserver(([entry]) => {
    visible = entry.isIntersecting
  }).observe(canvas)

  const frame = (ms) => {
    if (visible && !document.hidden) draw(gl, ms / 1000) // your draw call
    if (!still) requestAnimationFrame(frame)
  }
  requestAnimationFrame(frame)
}

Ter referentie: de WebGL API op MDN documenteert elke aanroep die hier wordt gebruikt, en caniuse houdt de ondersteuning voor WebGL2 in browsers bij.

Een shader-kleurverloop ontwerpen: wat je brieft

Je kunt een shader sturen zonder GLSL te lezen. Brief hem zoals je een materiaal zou briefen, niet een kleurstaal. Geef de grondkleur en de drie tot vijf kleuren die erop leven, in hex. Beschrijf de structuur: zachte poelen, lange banden, gevouwen zijde. Noem de snelheid in seconden per cyclus in plaats van ‘langzaam’, want langzaam betekent voor iedereen iets anders. Zeg hoeveel korrel, en of hij beweegt. Zeg tot slot waar tekst komt te staan, zodat het drukste deel van het vlak daar wegblijft.

Hoe Gradiently Marks tekent met shaders

De Marks van Gradiently zijn shader-kleurverlopen. Elke Mark is een recept van kleuren, tot drie gestapelde materialen, licht, korrel en beweging, en de Studio tekent hem live met WebGL2 achter wat je ook ontwerpt. Omdat hij wordt berekend in plaats van opgeslagen, rendert dezelfde Mark scherp op elk van de platformformaten en beweegt hij wanneer je een loopende video exporteert. De renderer weet ook waar je woorden staan, dus hij kan het rustigste deel van het vlak erachter schuiven. Wat is een Mark legt het recept volledig uit.

GR·2BAQ·CR

Thistle Mosaic

Bekijk deze Mark