Look at that beautiful stroke 
4 Likes
How hard would it me to include some sort of markup styling?
Like bold italics etc…?
Yeah! I would imagine markup styling the same as readme files would be easier than like html markup.
Main problem is that each textrenderer is bound to a font asset so we would need to build the font asset with each version of each character in bold, italic etc
So your saying there is a chance.
1 Like
I envision the dynamic generation of the texture from a font. Something like this:
font (browser) → canvas → image → MSDF texture
Alrhough I’m not sure it’s possible. I’m still looking for a way to generated the MSDF texture from a glyph image rather than from a font directly. (Maybe a link below?) However, decoding the kerning table from the font file might still be required. I don’t expect decoding font glyphs from a font file to be particularly easy in javascript.
Alternatively, perhaps freetype in webassembly would be useful: GitHub - flyover/freetype-js: JavaScript bindings for FreeType using Emscripten and TypeScript
MSDF generators:
One of the original implementations: GitHub - Chlumsky/msdfgen: Multi-channel signed distance field generator
Another link: GitHub - lightning-js/msdf-generator
Another link: GitHub - donmccurdy/msdf-bmfont-web: Web tool for creation of MSDF bitmap font spritesheets and JSON
Offline generator of json font data: GitHub - gero3/facetype.js: typeface.js generator
Discusses technical details and settings (including gamma, anti-aliasing, and black-on-white vs white-on-black: Signed Distance Field Fonts - basics
Generate from image: GitHub - mapbox/tiny-sdf: Browser-side SDF font generator
Play around with sizes: TinySDF demo
Create font atlas on canvas: GitHub - dy/font-atlas-sdf: Populate <canvas> with SDF font atlas texture
2 Likes
Oh yes! Thank you!
@Deltakosh what was the intetion for the 3rd parameter in your examples? It’s not used by the factory function anymore.
const textRenderer = await ADDONS.TextRenderer.CreateTextRendererAsync(
fontAsset,
engine,
200
);
public static async CreateTextRendererAsync(font: FontAsset, engine: AbstractEngine) {
1 Like
@deltakosh Adding a color property to ParagraphOptions would be very handy, I think.
It was meant to give the max number of characters but I made it automatic later on
1 Like
That would force the color to be a instanced buffer
1 Like
“Your wisdom is beyond mine, Master. Still… something about the outcome troubles me. I thought it right to bring it to you. Use the Force to rotate the camera — the failure reveals itself only when seen from another angle.”
What is troubling you my son?
1 Like
No it does not 
Babylon.js Playground
Ok I will add that line in the renderer
2 Likes
Interestingly, WebGPU is not affected.
Well I have a PR to make sure webgl is not bothered either
1 Like
So I started looking into how to support styling without having to include more glyphs and might be on to something for bold, italic, underline and color without having to do much witchcraft and so far it looks like all of that could be handled on the shader with the italic being the only one that needs to distort the sampling UV, bold is just overweighting the sdf sample and Im still mulling color around.
I have a ton on my plate right now but am interested in this and might have a PR here once there has been some time to dabble.
If we can get even that simple of markup included then this will become an absolute powerhouse text rendering solution. The thing I have not addressed yet is how to turn the string into a key table so I know which are glyphs and which are modifiers but I’m sure it would be the same or very similar as when I made my programing language for Frame.
4 Likes
For color it is easy but we need to add an instanced buffer for each character