Jump to content

Transparency problem with Canvas2D


Recommended Posts

Hello, I will check these two issues in few hours, I can't do it before. The Canvas.levelVisible not working is again "something that were never tested, so there's no reason it should work" but it should be fixed pretty quickly.

For the first issue, I have to take a look at it to tell if it's serious or not, but most of the time transparency stuff are serious.

I'll let you turn how things goes asap.

Link to comment
Share on other sites

Ok, @MasterK I've just fixed and merge for the Visibility bug. The PG should be updated.


On 03/08/2016 at 6:08 AM, MasterK said:


There is a not opaque rectangle in center.

And Sprite2d on the rectangle, has a white stoke...

On your PG you're again using orderZ in the constructor of your Rectangle2d which is (still) an unsupported parameter... I think I'm going to add it soon, just for you! ;)

Here's what I have, this is also what you have? Did you expect the rectangle to be above the sprite? If so the cause may be the zOrder you used incorrectly. I think the order issue should be solve if you assign the zOrder appropriately on both primitives.

Concerning the white stroke around the sprite, this is the "not so short story" I was mentioning above. So here is goes:

While developing the rendering engine of the Canvas2d I tried to goes the same way as the 3D's one, working with three kind of objects: opaque, alpha test and transparent.

  • opaque would render with depth compare and write, with alpha blend off and in no particular order
  • alpha test would render width depth compare and write, with alpha blend on and in no particular order
  • transparent objects would be sorted and rendered back to front with depth compare (but not write) and with alpha blend

Each primitive has a RenderMode which is one of the three mentioned above.

For shape based primitives it's either opaque or transparent depending on if you use transparency in one of the brush.

For Sprite the mode is already Alpha Test, and that's where things are actually wrong. The Alpha Test Render Mode should be called Alpha Mask and only be used when you have a 1 or 0 alpha value in your texture to fully render the pixel or completely discard it. But you should not have intermediate values, because the Alpha Test based object are rendered in the second pass, in no particular order and if you have an intermediate value it won't blend correctly!

And this is exactly what happens here. Your rectangle is transparent, so rendered in the third pass: always after the Sprite2d. So when you Sprite2d is rendering, it has texel with intermediate alpha values to create anti-aliasing, but it's blended against the background, which is white: hence the white stroke. If you set the background red, you will have a red stroke around you sprite.

I've talked about this with @Deltakosh few weeks ago and came to the conclusion that the Alpha Test render mode where inappropriate for the Canvas2d and should be removed. Primitives being rendered would be either opaque or transparent, the Alpha Test case is more deceiving people than it helps them, because nowadays we rarely deal with raw 0 or 1 alpha values because it creates aliasing, which is pretty ugly in the final result.

So what I'm going to do as a quick fix is to make Sprite2d of the Transparent render mode, so it's rendered sorted, then blended correctly. It'll be done in few minutes.



Link to comment
Share on other sites


Yeah, transparent problem is ok.But, with zOrder, new problem is coming.



I'm my case, this looks more weird... I use zOrder and animation, every expand action shows different look.

And I made you a simple case:


I can't see 'G' of "BAG". and if dont use zOrder, it's ok.


Link to comment
Share on other sites

3 minutes ago, MasterK said:

You're my hero.

Lol, looks like you're using the lib for very serious stuff, so I try to help as much as I can!

The issue is fixed and the PR is merged already in the main repo, but only @Deltakosh can update the PG

Another question. If I create 2 or more screenCanvas,  can i use zOrder to sort them?

Not unfortunately you can't, but in such case I would create only one ScreenCanvas matching the whole rendering device (then not specifying width/height or size) then rely on Group2d as directly children to achieve such purpose.

Are you aware of the different Caching Strategies? Are you planning to use a different than DONTCACHE?

Can you tell me a bit more about your project, I'm curious and I think I could understand more how to do things with Canvas2d. Thanks!

Link to comment
Share on other sites

Of cause it's serious.

We work overtime and Saturday not rest too.

Not very aware of Caching Strategies. And we use Group2D not fine..

So we use sized and positioned screenCanvas as a clipNode. To make a scrollView or listView.

Link to comment
Share on other sites


Hello here is an other approch to animate Canvas2D Element, i did it 3Weeks ago, on a other topic,
i have to think over it, and then dicede if its useful, for me it's never fail, on any browser.

minimal version:

redraw, hole thing at 60fps requestAnimationFrame/per Frame and it will drop performance to around to 25pfs so use it wisely 

I know its Nockawas baby, and he like to play with, i don't share this for any reason in the past.
When he is back, he will add all the babylonjs.GivemesoMeGold(true) functions.


Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...