Smooth graphics
Glossary
Short definitions of anti-aliasing, MSAA, SSAA, FXAA, signed distance fields, coverage, device pixel ratio, squircles, OKLab, banding and dithering.
Updated pixi-silk 0.1.0
This page defines the terms used across these docs. Each entry starts with a one-sentence definition.
- Aliasing(jaggies, staircase artifacts)
- The jagged or crawling edges that appear when you sample a continuous shape at only one point per pixel. Each pixel is then either fully in or fully out.
- Analytic anti-aliasing
- Anti-aliasing computed exactly per pixel from the shape's geometry, not from extra samples. pixi-silk derives coverage from the signed distance to the shape and the size of one device pixel. Read more
- Anti-aliasing(antialiasing, AA)
- Techniques that remove the jagged "staircase" look of edges on a pixel grid. Each edge pixel gets a partial colour proportional to how much of it the shape covers. Read more
- Coverage
- The fraction of a pixel's area covered by a shape, from 0 to 1. Anti-aliasing uses coverage as the pixel's opacity along edges.
- Device pixel
- One physical pixel of the display. A canvas is sharp only when each of its pixels maps to exactly one device pixel.
- Device pixel ratio(DPR, devicePixelRatio)
- The number of physical screen pixels per CSS pixel: 1 on standard displays, 2 or 3 on retina or HiDPI screens. Many laptops and phones have fractional ratios such as 1.25 or 1.5. Read more
- Dithering
- Adding a little structured noise (here ±½ of an 8-bit step) before quantising. It hides banding and leaves exact colours unchanged.
- Draw call
- One command from the CPU telling the GPU to draw. Fewer draw calls usually mean better performance. Each SilkGraphics is one draw call.
- FXAA(fast approximate anti-aliasing)
- A cheap post-processing filter that detects and blurs high-contrast edges in the finished image. It softens detail and text and cannot recover geometry lost between pixels.
- Gradient banding(colour banding)
- Visible steps in a smooth gradient caused by 8-bit colour precision, most obvious in dark, wide gradients. Read more
- Hairline
- A line thinner than one device pixel. pixi-silk keeps hairlines one pixel wide and scales their opacity with their width, so they fade instead of breaking up. Read more
- Instanced rendering(instancing)
- Drawing many copies of one mesh in a single draw call, each with its own data. pixi-silk draws every primitive of a SilkGraphics as one instance of a quad. Read more
- Monotone interpolation
- A curve through data points that never overshoots them. Peaks stay on the data and flat runs stay flat. pixi-silk uses Steffen's method (like d3's curveMonotoneX) for charts. Read more
- MSAA(multisample anti-aliasing)
- A GPU technique that stores several coverage samples per pixel (typically 4) and averages them. In PixiJS, you enable it with antialias: true. By default it covers only the main canvas. Filters and render textures must opt in one by one. Read more
- OKLab
- A perceptual colour space by Björn Ottosson, where equal steps look equally different. Gradients interpolated in OKLab stay bright and even, without muddy midpoints. Read more
- Premultiplied alpha
- Storing colour already multiplied by opacity. Interpolating premultiplied colours prevents dark fringes when a gradient fades to transparent.
- Signed distance field(SDF)
- A function that returns the distance from any point to the nearest edge of a shape: negative inside, positive outside. Rendering a shape from its SDF gives exact edges at any scale. Read more
- Squircle(superellipse corner, continuous corner)
- A rounded rectangle whose corners are superellipse arcs, so curvature grows gradually from the straight edge instead of jumping. iOS app icons and cards use it. Read more
- SSAA(supersampling)
- Anti-aliasing by rendering at a higher resolution and downscaling. It is simple and high quality. Memory and fill-rate costs grow with the scale factor squared.
- Tessellation
- Converting curves and shapes into triangles for the GPU. PixiJS Graphics tessellates when you draw, so curves become polygons with a fixed number of segments.