Drawing & text

The 2-D drawer

Beneath the widgets is an immediate-mode 2-D canvas, kinogaki::gpu::Canvas, that turns drawing calls into batched GPU work over Kinogaki Platform's render hardware interface. Widgets draw to a Canvas, and the canvas batches and submits the GPU work on their behalf.

void draw(gpu::Canvas& cv, const Theme& t) {
    cv.fillRoundedRect(frame, 6, t.panelColor());          // SDF-antialiased
    cv.strokeRect(frame, 1, t.outlineColor());
    cv.drawText(*t.font(), x, baseline, "Inspector", t.textColor());
}

The primitive set is small and composable: filled and rounded rectangles (rounded corners are signed-distance-field antialiased, so they stay crisp at any scale), strokes, lines, and images. A clip stack scissors drawing to a region, and the canvas works in logical points with the DPI scale folded into the projection, so you draw in points and get crisp output on a Retina display automatically.

Batching

Calls are merged into batches by pipeline, texture and clip rect, so a panel full of rectangles and glyphs becomes a handful of draw calls rather than hundreds. The canvas targets either the window or an offscreen texture, which is exactly what the per-region buffering uses to cache a panel's pixels and re-composite them without re-drawing.

Composite helpers

On top of the primitives, a Draw helper layer tessellates higher-level shapes without new shaders: circles and arcs (gizmo rings), cubic beziers (node-graph wires), and horizontal/vertical gradients (ramps, spectral fills). Selectively-rounded rectangles (rounded only on top, for node headers and tab chips) and the node-graph "noodle" (a cubic bezier with a dark-outline pass and a coloured core) live here too.

For depth and legibility the same layer adds soft drop shadows (dropShadow — concentric signed-distance rings with a quadratic falloff, drawn behind menus, popups and tooltips so a floating surface reads as raised rather than pasted on), text shadows (drawTextShadow — a second offset glyph pass so a label stays readable over a busy or gradient background), and an alpha checkerboard (fillCheckerboard — so a partly-transparent colour swatch reads as translucent, not merely darker). All three compose from the same primitives, so every render backend gets them with no new shaders.

Fonts and text

Text goes through a pluggable font interface: a Font is a glyph atlas plus per-glyph metrics, so swapping the implementation swaps the typeface. The shipping implementation is FreeType-backed (makeTrueTypeFont), and a FontBook rasterizes any point size on demand and caches by size, so the UI mixes sizes and scales text crisply, rasterizing each size fresh rather than stretching one bitmap. Canvas::drawText reuses the textured pipeline, so glyphs batch alongside everything else.

auto font = gpu::makeTrueTypeFont(device, "/System/Library/Fonts/Helvetica.ttc", 13, renderScale);
cv.drawText(*font, x, y + font->ascent(), "Hello", color);

Because text is textured quads from an atlas, it composites, clips and scales with the rest of the scene, and a pixel-font implementation of the same Font interface drops in without touching a single widget. The widgets that sit on this drawing layer are covered next, starting with the control set.