How to use BMFont?

Questions
1

Hello, I want to use BMFont with THREE.js, but all the tuts I found use require and ‘.fnt’ font file.

How to use import or normal .js file and ‘.json’ font file?


2

I suggest you ask this question at the respective GitHub repo.

3

Okay, thanks. After searching this repo, I found some related issues, I will look into it first.

4

While looking for a 3D text solution for three-mesh-ui, I came across this package, but it’s really hard to decipher… There is a lot of small useless dependencies, the bundling is unconventional, comments are sparse… I ended up coding my own MSDF font shader and I’m very happy with the result.

Feel free to tinker with three-mesh-ui, and if you want to code your own thing you might be interested about this this article and in particular this bit of fragment shader :

#version 330 core
in vec3 texCoords;
in vec4 fragColor;
out vec4 color;
uniform sampler2DArray msdf;
float median(float r, float g, float b) {
    return max(min(r, g), min(max(r, g), b));
}
void main()
{
    vec3 flipped_texCoords = vec3(texCoords.x, 1.0 - texCoords.y, texCoords.z);
    vec2 pos = flipped_texCoords.xy;
    vec3 sample = texture(msdf, flipped_texCoords).rgb;
    ivec2 sz = textureSize(msdf, 0).xy;
    float dx = dFdx(pos.x) * sz.x; 
    float dy = dFdy(pos.y) * sz.y;
    float toPixels = 8.0 * inversesqrt(dx * dx + dy * dy);
    float sigDist = median(sample.r, sample.g, sample.b);
    float w = fwidth(sigDist);
    float opacity = smoothstep(0.5 - w, 0.5 + w, sigDist);
    color = vec4(fragColor.rgb, opacity);
}
5 Likes
5

@felixmariotto Thanks! I’ll try it.

6

@felixmariotto Success! three-mesh-ui is very easy to use, and already comes with wrapping and alignment functions.
Great job, thanks a lot!

2 Likes
7

I’m glad you find it useful :blush:

8

Hello @felixmariotto, I found a problem and made an issue, could you please solve it?

9

@felixmariotto Another question is, can you please confirm that three-mesh-ui also uses bitmap fonts technology?

10

Hi @gonnavis. Yes it does, it uses the fonts generated from @donmccurdy’s msdf generator, which is a wrapper around this package

edit: I fixed your issue

3 Likes