Antialias and MSDF fonts `three-bmfont-text`

Questions
, ,
1

Hello there!

I’m using three-bmfont-text and MSDF font to create high-performance letter animations. The antialiasing is awesome, but when the letters overlap each other, you can notice a borderline.

Is there a way to fix this? Do you know what’s happening? I think it’s something related to alpha multiplier… don’t know if I can choose another blend mode like SCREEN or MAXIMUM.

As the idea is to record screen to create some short videos, I can do a little trick like blurring a little bit and changing levels to get rid of this line, but I would like to solve this issue using Three.JS only.

Thanks in advance!

55
Screen Shot 2019-10-15 at 12.06.55.png860×820 28 KB

2

Can you provide a minimal example, please?

1 Like
3

This problem does not occur when I create the Material with transparent: false, but it looses antialiasing

var material = new THREE.RawShaderMaterial(MSDFShader({
    map: texture,
    transparent: false,
    color: colorObj,
    side: THREE.DoubleSide
}))
4

@marlus a couple of lines of code is rarely enough to go on. Please provide a complete example using codepen or something similar. You can use this as a template:

5

Thank you guys, I will try to share the code somehow. Couldn’t use three-bmfont-text and load-bmfont packages on CodePen…

6

You can try codesandbox.io or glitch.com instead.

7

hello @looeee and everybody, here is the minimal example on glitch:

(The load time is a lit bit slow since it uses browserify to bundle everything)

When I disable antialias, the problem disappear… But that’s the point, how to mantain antialiasing even when letters overlap each other?

8

I’m only seeing a black screen. There’s a couple of errors in the console related to images:

Failed to load resource: the server responded with a status of 404 (Not Found)
host.marlus.com/glitch/Beatrice-SemiBold.png:1 Failed to load resource: net::ERR_CERT_COMMON_NAME_INVALID
host.marlus.com/glitch/Beatrice-SemiBold.png:1 GET https://host.marlus.com/glitch/Beatrice-SemiBold.png net::ERR_CERT_COMMON_NAME_INVALID

Maybe it will work if you move the images to glitch?

9

OK, moved the image to glitch.
I was getting error before, but this line worked for me on load-font.js:

THREE.ImageUtils.crossOrigin = '';

10

Hmm, I’m not sure what’s going on there. A couple of things I would reccomend before trying to debug this further:

  • update three.js r70 -> r109
  • don’t use the three-orbit-viewer, it hasn’t been updated in 5 years. Use OrbitControls instead - you can use the misc_controls_orbit example as a template, or just skip controls since they don’t add much to this example

If you do both of these and the problem persists, it’s probably the shader. You are setting material.transparent = controls.aliasing which is kind of a red flag.

1 Like
11

It’s a pity that we can’t modify example.

  1. You don’t need MSDF if you have only black and white picture, SDF also good as described here https://blog.mapbox.com/drawing-text-with-signed-distance-fields-in-mapbox-gl-b0933af6f817
  2. Probably AA with OES_derivatives not the best algorithm for you
  3. Try to increase constant in this string if (gl_FragColor.a < 0.0001) discard;
12

You can modify the glitch.com example:

13

@looeee thanks, didn’t know about this site, looks like good alternative code sandbox.

When I tried to check alpha channel I find that we have some kind of z-fight here

      //'  gl_FragColor = vec4(color.xyz, alpha * opacity);',
      '  gl_FragColor = vec4(vec3(alpha * opacity), 1.0);',

Screenshot%20from%202019-10-26%2017-49-26
Screenshot from 2019-10-26 17-49-26.png752×527 8.37 KB

So I created some random offset in main.js on 127 line

text.translateZ(Math.random())

Screenshot%20from%202019-10-26%2017-55-02

after that result become more predictable, but appears on some letters. Just change Math.random() to index/255 where index is some unique index of letter.