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:
You can fix it by setting the texture sampling mode to nearest:
dynamicTexture.updateSamplingMode(BABYLON.Texture.NEAREST_NEAREST);
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.
Well there must a difference 
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. 
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.
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.