Architecture

This document provides a high-level overview of the textmode.js rendering architecture, explaining how drawing commands are processed and rendered to the screen.

How it works (high‑level)

The renderer operates in two passes:

1. Draw pass (offscreen): your drawing commands emit instances that are flushed into a special framebuffer with three color attachments (MRT). Each attachment encodes a different piece of per‑cell information.
2. Conversion pass (onscreen): a conversion shader reads those attachments plus the font atlas to draw the final glyphs aligned to the grid.

Render pipeline at a glance

The three attachments (MRT)

0. o_character - glyph index (RG channels), transform flags (B channel), and rotation data (A channel)
1. o_primaryColor - character color information
2. o_secondaryColor - cell color information

These textures have the same resolution as the grid (cols x rows). That makes readback and export straightforward and efficient.

Why instanced rendering matters

textmode.js packs many draw calls’ worth of work into a few batched, instanced draws. This reduces driver overhead dramatically, enabling high FPS even with complex scenes and thousands of shapes drawn per frame.