// James C. Kane

developer (xr, ai, web);

Hubs Troika Text

let abstract = "On any interactive project, there are heavy design and UX requirements for display of copy, and edits happening constantly. Add in the complexity, performance requirements and hardware variance inherent to 3D text rendering, and managing this kind of content on the 3D open web becomes a significant challenge.

I’ve written how Mozilla Hubs is the best analog we have to “the metaverse,” and I wanted to create an easy-to-manage, performant 3D text rendering system within their 3D CMS, Spoke. I wanted to include as many styling and rendering options as possible to give the widest possible design choice while providing performant SDF glyph rendering generated at runtime from standard .otf or .ttf font files – that means characters turn into mathematical expressions on the fly, only as needed, for incredibly efficient memory use and rendering.

Porting to Spoke, I largely duplicated the format of the existing components, but added many custom React inputs for styling options. Once it was working and cleaned up, I submitted PRs to the Spoke and Hubs repositories, and worked with their team on some CORS issues specific to their Hubs Cloud implementation.

The new library more widely supports non-English languages, uses memory more efficiently (no need to stuff 4k pngs from PhotoShop into scenes), and gives unparalleled 3D text editing and styling capabilities to Mozilla’s platform, and taking less time to incorporate updates. It has been merged into Hubs master branch, replacing the entire 3D text system, and deployed to millions of users around the world. In the words of Mozilla’s staff engineer Dominick D’Aniello, it’s ‘better in every way.’"

let media = {