Wanneer een continue vorm — een diagonale lijn, een cirkel, een curve — wordt geprojecteerd op een discreet pixelraster, ontstaan onvermijdelijk trapvormige artefacten die aliasing of “jaggies” worden genoemd. Anti-aliasing verzacht dit door randpixels te mengen met kleuren die tussen voorgrond en achtergrond in liggen, waardoor de illusie van vloeiende randen ontstaat, ten koste van het introduceren van nieuwe kleuren in het beeld.
Hoe het werkt
Het basisprincipe is supersampling: render de scène op een hogere resolutie en schaal daarna terug. Elke uiteindelijke pixel wordt het gemiddelde van meerdere subpixels, wat voor vloeiende gradients langs randen zorgt. In de praktijk gebruiken moderne implementaties efficiëntere benaderingen:
- MSAA (Multi-Sample) — Neemt meerdere samples per pixel, maar alleen langs polygonranden. Efficiënt in GPU-hardware.
- FXAA (Fast Approximate) — Post-processingfilter dat randen in het uiteindelijke beeld detecteert en vervaagt. Snel, maar kan textures zachter maken.
- Subpixel rendering — Benut de fysieke opbouw van LCD-subpixels (RGB-stripes) om de horizontale resolutie te verdrievoudigen. Wordt veel gebruikt bij fontrendering.
De Pixel Art-uitzondering
Anti-aliasing is een van de weinige rendertechnieken die in bepaalde contexten juist actief onderdrukt moet worden. Pixel art is ontworpen om met het raster samen te werken — elke pixel is bewust geplaatst, en de harde randen zijn een esthetisch kenmerk, geen fout. Anti-aliasing toepassen op pixel art vervaagt de precieze randen die de kunstenaar zorgvuldig heeft opgebouwd.
Daarom bieden browsers de CSS-eigenschap image-rendering: pixelated en stelt de Canvas API imageSmoothingEnabled = false beschikbaar. Beide instrueren de renderer om bij het schalen van beelden nearest-neighbor-interpolatie te gebruiken, zodat de harde pixelgrenzen behouden blijven die het visuele karakter van pixel art bepalen.
Impact op paletanalyse
Anti-aliasing heeft directe invloed op het extraheren van kleurpaletten. Een puur zwart-witbeeld bevat exact 2 unieke kleuren. Datzelfde beeld met anti-aliased randen kan tientallen tussentinten grijs bevatten die door het smoothing-algoritme zijn geïntroduceerd. Wanneer onze analysepipeline een klein aantal unieke kleuren detecteert (≤256), wordt elke waarde als intentioneel beschouwd — maar als die extra kleuren aliasing-artefacten zijn in plaats van bewuste keuzes, wordt het aantal paletkleuren kunstmatig opgeblazen.
