Light colored text with alpha = aliasing artifacts?

I’m trying to get rid of the black aliasing artifacts around my text:

I’ve come up with a viable solution to just use the texture for alpha, and color separately:

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:


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.

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.


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:

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.