three-text: a 3D font rendering and text layout library for the web

jeremy tribby
jeremy tribby Posts: 284
edited November 7 in Font Technology
Hi all,
I wanted to share a tool I just published that might be of interest to this community. it's a web based 3D font renderer built for three.js (although it may expand to other/no frameworks) and works with regular OTF, TTF, and WOFF fonts (WOFF2 not supported sadly). basically 3D text on the web with real fonts, opentype features, and linebreaking. you can take a look at the demo here, and drop your own fonts in (they stay local and are not uploaded) which has a few animation modes to give some idea of what you can do on the web with 3D text, but there are so many things I would never think of.. the demo is just a demo, ultimately, and I wonder how other people might use the underlying software library. you can check out the code on GitHub or install it from npm. it should support most scripts thanks to harfbuzzjs



I had my own use case in mind for this library, and I tried my best to generalize the API for anticipated ways of using it, but I'm very open to feedback, and have basically said in the repository that I expect the API to be unstable for a period. if you fit the "creative technologist" profile or know anyone who does (especially if they know about three.js), or have worked with any studios who you get the impression would be in interested in this tool but maybe they just haven't had it in their toolkit, please let them know about it! I don't know if it will catch on, but, yeah, I truly wonder how people might wield this thing
let me know if anyone has feature requests or bug reports! can always make an issue in the GitHub repo too :smile: 


Tagged:

Comments

  • Ermin Međedović
    Ermin Međedović Posts: 92
    This is awesome Jeremy!
  • Roel Nieskens
    Roel Nieskens Posts: 204
    This is awesome! When the dust settles around the API, will you include export functionality? Would be cool to build an animation and have an easy way to include this in other projects.
  • jeremy tribby
    jeremy tribby Posts: 284
    thanks ermin and roel! I wouldn't mind having export myself, I'll look into some of the possibilities there when I have a moment - maybe I'll open an issue in the morning so I don't forget. but yes there may be some dust to settle first 😅 
  • SCarewe
    SCarewe Posts: 11
    edited November 7
    This looks amazing! It reminds me of some of the type tools published by DIA/MNKY Type: https://tools.dia.tv/

    Maybe you know of these already? I'm not too familiar with any of these tools, but I just wanted to leave them here as reference.
  • Yves Michel
    Yves Michel Posts: 222
    This is wonderful ! It would be interesting to animate variable fonts on their own different axes.
    Bravo!
  • jeremy tribby
    jeremy tribby Posts: 284
    thanks, yves! we are of the same mind on this, it's one of the first things I wanted to do, but VF animation in 3D is a pretty difficult problem, or at least, non-obvious to me. in order for the transitions between axis locations to be smooth, I have wondered if you might have to generate too many triangles (think of these as 3D pixels), and then pack them along the edges of glyphs so they can move in a clever way to the next axis location, but I haven't really thought beyond that. I might learn some things looking into 2D VF renderers, and existing "morph" techniques in 3D, but I think it's probably very hard. and I suspect, if I look into it, and it does seem viable but is as-yet-unsolved, I will need to find someone who has the right math and graphics background to help :smile: this library is built on more than 40 years of research (which I try to cite in the readme), most of what I did was pull things together in a way that wouldn't have made sense when computers were less powerful
    SCarewe said:
    This looks amazing! It reminds me of some of the type tools published by DIA/MNKY Type: https://tools.dia.tv/
    thank you! and wow, no, I’m familiar with DIA’s work but didn’t realize any of the tools were available to use (vs archives to look at). you just made me remember a campaign I need to mention in the other thread about motion examples..

Categories