The “Slug” GPU Font Rendering algorithms have been opensourced, so I ported it to js, and threejs!
Demo:
Repo:
Screenshot:
Whoa, whats the story behind this? Havent been followinc what Lengyel is doing.
1 Like
It’s an alternative to bitmap/sdf fonts. It takes the font curve data, and encodes it in a texture, which is then used on the GPU to render the font directly…
It has sharp corners and smooth curves at large magnification, and decent behavior at minification.
And Eric Lyengel has just graciously open sourced the algorithm, (after licensing it commercially for the last 10 years.)
I mashed together these 2 libraries and ported them to JS/THREE:
Original algo:
A library that loads a TTF font, and generates a binary format (.sluggish) for it:
I made a ShaderMaterial version, and then a version that injects into StandardMaterial (and other material types probably though less tested…)
The Injected version obeys lighting/casts shadows etc.
Characters use ~quad per glyph.
Article here:
https://terathon.com/blog/decade-slug.html
More info:
3 Likes
This is really cool, a neat alternative to bitmap or SDF fonts. Encoding the font curve data into a texture and rendering it on the GPU keeps things sharp at large sizes and still readable when small.
The fact that it can inject into StandardMaterial and work with lighting and shadows makes it feel like it really belongs in a 3D scene, not just floating on top. Using a quad per glyph is simple but effective, and it’s nice to see the original algorithm from Eric Lyengel finally available open source.
I like that it gives you high-quality curves without the usual artifacts you get with bitmap fonts, and it seems flexible enough to integrate into different material setups. Curious how it handles very dense text or long paragraphs in real-time scenes.
1 Like
Thank you! Yeah it’s a neat algorithm.. and I think could be very useful for games where you need virtual labels for things. Rebuilding the strings is fast. I suspect it’s not the cheapest to render.. but the sample text in the demo is the whole main.js file in one giant string.
The .sluggish files seem to be about half the size of the .ttf, so that’s a bit of a win.
Thanks for checkin it out! 