MSDF Text Rendering

I didn’t find any solution to render text using sdf/msdf technique in babylon js, so thought I’d implement on my own. I just started with babylon js but have some experience with three js. So used this three js example of sdf text rendering.

Here is demo video on twitter since forum doesn’t allow new users to upload media.

Also anyone thinks it will be useful if publish it as package on NPM?


Welcome to the community and awesome contribution! It would be pretty cool to have an npm package, yes :smiley:

1 Like

Thank you : )

I published it as Npm package and here is git repo. It only supports filled style only as of now but working on stroke option too.


@Bhushan_Wagh this is awesome im definitely going to try it. thanks for getting this up on npm

1 Like

@Bhushan_Wagh this works great. my only question is the shader seems to not write to depth so its hard to use this as 3d text in a scene. Instead of using a shadermaterial is it possible to use a MaterialPlugin and extend this off of PBRMaterial so that it can be used in a scene with other 3d objects?

I am not really sure what you mean, it does takes z buffer. it can be part of 3d scene like this. or do you mean something else. It doesn’t reacts to light like PDR or other material, thats the only difference I can see.

1 Like

@Bhushan_Wagh interesting! yes your example app is exactly right. it may be something wrong with my setup on my end. Thanks again for cross checking this with me. appreciate it.

1 Like

Glad it helped you : )

somehow I missed this and went on to create on my own. I’ll go through that example and try to see if something I can use from it to make my code better. Thanks for sharing

1 Like

Figured you would dig that!

If you follow the git links you can get to the generator to make new fonts too.

1 Like

Awesome! :muscle:

1 Like

Oh generating atlas for font at run time? That’s be neat. I wanted to add option to give stroke. I tried that couple times and couldn’t get it right lol.

Thanks : )

@Bhushan_Wagh i have a slight feature request that would be really helpful for what im trying to do. Is adjust the thickness of the text. Been testing this out and it all works really well.

What do you mean by thickness? Font weight or instead of 2d plane it should also have some depth?

sorry i mean font weight. reason this would be helpful is sometimes you want the font to be a little thicker (literally by a pixel or 2) if the available pixel resolution is small to make the font more readable. Also and more importantly, alpha blending can erode away the edges of the font a little , so adding back a little weight to the font could help. i tried alpha test and it did make the font look like it had the appropriate weight. but the edges had a white outline to it for some reason. not sure whats going on there. Either way, i think one approach is to use alpha blend and add back a little weight via a weight param in the shader.

Adding font weight is bit tricky for me tbh, I am struggling to add even stroke option. There are not lot of resources and I am also not expert in shaders tbh, but I’ll try or if anyone comes with solution that’d be cool too. But right now all I can say is “I’ll try”.