Light colored text with alpha = aliasing artifacts?

I’m trying to get rid of the black aliasing artifacts around my text: https://playground.babylonjs.com/#TMHF80#357

I’ve come up with a viable solution to just use the texture for alpha, and color separately: https://playground.babylonjs.com/#TMHF80#358

However, I’m curious as to why I need to do it that way, when using pure WebGL does not have these artifacts? jsfiddle[dot]net/6p8xr1mc/ (broke the link due to being a new user and only able to post 2 links in a post)

Hello this is because the texture is rendered on black (like #00000000) background:

and when the sampling mode (which is by default set to linear) will smooth the pixels it will read a bit from the black border

You can fix it by setting the texture sampling mode to nearest:

dynamicTexture.updateSamplingMode(BABYLON.Texture.NEAREST_NEAREST);

Size Plane Based on Dynamic Texture | Babylon.js Playground

That’s what I’m trying to figure out.

The same texture works fine in plain WebGL with Linear sampling.
jsfiddle.net/6p8xr1mc/

But in BJS it’s sampling the black. There must be some GL configuration BabylonJS is using.

Are you sure it is the same picture? I mean from a byte to byte comparison

It’s the same thing black around the text.

image

Well there must a difference :wink:
That being said the way bjs operates seems legit to me

Maybe one is using premultiplied alpha and not the other?

Try with: gl.pixelStorei(gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL, false); // NEW

That gives very ugly ugliness. :slight_smile:

That’s sort of covered in WebGL Fundamentals - HTML5 Rocks

Interestingly, if I set change canvas.getContext('webgl'); to canvas.getContext('webgl', {premultipliedAlpha: false}); I get the same black outline that we get in BJS. So I wonder if that’s what BJS is doing. I wonder if that is configurable?

I did try dynamicTexture.update(true, true) to set the texture to premultiplied (after rendering the text), but the black outline just gets thicker.

Either way, I agree BJS seems to be doing the right thing with the texture, on the other hand, I spent quite a number of hours trying to get the black outline to go away. Food for thought. :slight_smile:

You need to set the dynamic texture as pre-multiplied as well as enable the right blending mode.

This blending mode should be set to ALPHA_PREMULTIPLIED_PORTERDUFF but when doing this there’s a line in the shader code that is added: color.rgb *= alpha. However, we don’t want this to happen, we only want to set the OpenGL blending factors to 1 / ONE_MINUS_SRC_ALPHA / 1 / ONE_MINUS_SRC_ALPHA.

The easiest way is to override the blending factors and set the ones we want in the material.onBind observable:

https://playground.babylonjs.com/#TMHF80#363

Yes! There we go, that’s what I want. Maybe there should be another version of alphaMode similar to ALPHA_PREMULTIPLIED_PORTERDUFF that doesn’t multiply the rgb.