solved can't use canvas antialiasing for DynamicTexture

[mise]

Hi! I am very new to Babylon. I am hoping to switch to Babylon for a game that's already well underway after trying two other engines.
I am really liking it so far!

For now my game is a lot of 2D and one of my requirements is nice text rendering (which I haven't found in the other engines).

https://playground.babylonjs.com/#O4OXG#16 

I want to render text on Planes like that, with dynamic backgrounds. This is how for I got with what I want (my camera will be straight facing and stationary) but as you can see if you zoom in, the canvas text's alpha values are mixed with black. The orange part is how I want it to look, but of course that is not a dynamic background.

How can I preserve those alpha values coming from the Canvas?

Thanks a lot!

[trevordev]

Try this: https://playground.babylonjs.com/#O4OXG#24 , I think you were missing setting the opacityTexture

[mise]

Nice one. With your help I figured it out: https://playground.babylonjs.com/#O4OXG#25
we paint the diffuse texture completely text color, which gets rid of the left over black pixels in your version.

I don't think you can get the orange rectangle in there without making more textures, but I think that is fine.

Thanks mate!

[mise]

I still think it's strange that you can't directly use the alpha values, at least not without also taking the black background pixels that have no business being there :).

I think you now need a texture layer for each color you want to draw on the canvas (at least if you want anti aliasing, which seems wise if you want any image quality).

Edit: Am I correct that hasAlpha doesn't work as expected? it seems to round alpha values to 1 or 0, that is why my original example looks so weird. Can someone explain why that is? That would also make it hard to display regular non-square sprites.

[Sebavan]

hasAlpha determines if alpha TEST is on not alpha Blend, alpha blend is defined by the presence of vertex alpha, opacity texture, alpha < 1 or the flag use alphaFromDiffuseTexture being true in the material. Hope that helps.

[brianzinn]

5 hours ago, mise said:

Am I correct that hasAlpha doesn't work as expected?

In addition to what Sebavan has said, have a look at assigning an AdvancedDynamicTexture to a mesh 4th parameter:
https://github.com/BabylonJS/Babylon.js/blob/master/gui/src/2D/advancedDynamicTexture.ts#L867
You will see from the comment that on the variable 'onlyAlphaTesting' that  alpha testing will be used, but not alpha blending.  Also note how different textures are assigned to the material (ie: hasAlpha = true doesn't assign opacityTexture, but does assign diffuseTexture). HTH.

[mise]

7 hours ago, Sebavan said:

hasAlpha determines if alpha TEST is on not alpha Blend, alpha blend is defined by the presence of vertex alpha, opacity texture, alpha < 1 or the flag use alphaFromDiffuseTexture being true in the material. Hope that helps.

that is clear, thank you. useAlphaFromDiffuseTexture works well to create nice half alpha pixels, I definitely missed that.

I am still wondering where these part-black pixels are coming from then, now that the alpha is working.
updated example with useAlphaFromDiffuseTexture: https://playground.babylonjs.com/#O4OXG#26 (orange square is just there to make the black pixels more clear)

how I would like it to look, but without using opacityTexture (if this is possible of course!): https://playground.babylonjs.com/#O4OXG#25

I'm seriously loving Babylon so far and thanks for the quick responses.

 

[mise]

I am finding more reasons to figure out a way to do this, can anyone help?

Summary of what I want:

- draw to Canvas context, text and shapes of varying colors
- use texture in such a way that both color info and partial alpha values are preserved
- without having leftover color values that don't belong (like black values in above example)
- without using multiple Planes (this is how I do it now, but if you stack them too close strange things happen)

Thank you so much for helping.

[Sebavan]

Main issue is it is not only partial alpha you are getting but color information from the antialiasing technique used in canvas 2D so either the background needs to be the color of the drawn objects or you need to use only the alpha info without the color.

Last possibilities would be to try disabling anti aliasing for the text in the canvas 2D (if it is possible  ???) and use your own AA technique when you are drawing the text.

[mise]

23 minutes ago, Sebavan said:

Main issue is it is not only partial alpha you are getting but color information from the antialiasing technique used in canvas 2D so either the background needs to be the color of the drawn objects or you need to use only the alpha info without the color.

Last possibilities would be to try disabling anti aliasing for the text in the canvas 2D (if it is possible  ???) and use your own AA technique when you are drawing the text.

The Canvas is transparent by default (https://stackoverflow.com/questions/4815166/how-do-i-make-a-transparent-canvas-in-html5), I confirmed this by right click saving and I got a transparent png. So I still don't understand where this extra color information comes from (my guess would be from the code that creates the texture from the Canvas). The way I see it, the canvas has alpha and color info and I want both of those values, so I'm not sure what you mean by 'you need to use only the alpha info without the color'.

Maybe that is the solution though. Create a canvas, save it to a image element, and then use that to create a texture. quite messy, but it just might work.

[Sebavan]

The thing is the black colors are coming from interolation due to texture sampling. As the neighbors pixels are black even if transparent. while sampling the texture black will be interpolated in.

Disabling it works but you ll need to adjust your texture to fit with the desired screen size.

https://playground.babylonjs.com/#O4OXG#29

 

[mise]

Ok, I get now where the blacks are coming from.

I think I will start a new topic with a broader question of how to approach my goal, thanks so far :))