Troika: The Three.js Framework That Solved WebGL Text Rendering

Text rendering in WebGL is one of those problems that sounds simple until you try it, at which point it becomes a small nightmare involving texture atlases, signed distance fields, and a lot of quiet cursing. Troika, by Jason Johnston, makes the nightmare go away. Its troika-three-text package parses .ttf, .otf, and .woff files directly, generates SDF glyphs on the fly inside a web worker so your frame rate doesn't flinch, and then patches whatever Three.js material you hand it with the right shader code. The result is crisp, antialiased text that plays nicely with lighting, PBR, shadows, fog. You throw a font at it, you get gorgeous text back. It handles kerning, ligatures, right-to-left layout, Arabic joining. It just works, which is the most dangerous phrase in software because it makes you forget how hard the problem was.

But Troika is more than a text renderer. It started life in 2016 as an internal framework at ProtectWise for building interactive 3D security visualizations, and it still carries that DNA: a declarative scene management system that sits on top of Three.js the way React sits on top of the DOM. You describe what your scene should look like, Troika figures out how to get there. There's GPU instancing with per-instance uniforms (via InstancedUniformsMesh), a createDerivedMaterial utility for extending any Three.js material with custom shader code without rewriting the whole thing, flexbox-based 3D UI, and WebXR support.

Poke around the live examples to see what the framework feels like in motion, then dig into the repo where the real education happens. The text rendering package alone is worth studying for how it threads font parsing off the main thread and assembles glyph geometry.