Experience-Monks / three-bmfont-text

renders BMFont files in ThreeJS with word-wrapping
http://jam3.github.io/three-bmfont-text/test/
MIT License
786 stars 169 forks source link

Colored & styled text would be nice #6

Open kig opened 8 years ago

kig commented 8 years ago

In doing the syntax highlighter for https://tabletree.io I had to figure out a way to efficiently color & style text geometries with bold & italics. Would be nice to have something like that built in.

My current version uses the w-coord of the text geometry vertices to store a palette index and a faux-bold flag that changes the SDF threshold. The palette is passed in as a uniform array. The faux-italics are baked into the geometry by shifting the x-coord of top verts to the right and bottom verts to the left (should be possible to do in the vertex shader too, but smells a bit complicated).

The Right Way to do the bold/italic thing would be to use a separate font variant. And use a texture for the palette.

mattdesl commented 8 years ago

There's lots of different ways of doing things so I'd rather not make three-bmfont-text too opinionated to a particular technique. It's worth discussing and seeing if we can make some standard shaders that users can opt-in to.

In past projects we've packed many styles/fonts/variants into a single atlas with gdx-fontpack, but it does not support SDF. I would love to see a fully node version of that (e.g. with node-fontnik or freetype2).

Proper styling tends to get very complicated since it affects word wrap and line alignment. I was experimenting here but never finished it, and it still has some bugs.