MasterK Posted August 3, 2016 Share Posted August 3, 2016 http://www.babylonjs-playground.com/#DSJDT#4 There is a not opaque rectangle in center. And Sprite2d on the rectangle, has a white stoke... Quote Link to comment Share on other sites More sharing options...
MasterK Posted August 3, 2016 Author Share Posted August 3, 2016 http://www.babylonjs-playground.com/#DSJDT#5 And this is set canvas visible problem... canvas.levelVisible = false. is no effect... Quote Link to comment Share on other sites More sharing options...
MasterK Posted August 5, 2016 Author Share Posted August 5, 2016 @Nockawa Are you still here? At least the second problem is serious. Can't set canvas not visible. Quote Link to comment Share on other sites More sharing options...
Nabroski Posted August 5, 2016 Share Posted August 5, 2016 as long nockawa fixing it run a loop and grap everything and then http://www.babylonjs-playground.com/#DSJDT#6 Good Luck MasterK 1 Quote Link to comment Share on other sites More sharing options...
Nockawa Posted August 5, 2016 Share Posted August 5, 2016 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. Quote Link to comment Share on other sites More sharing options...
Nockawa Posted August 5, 2016 Share Posted August 5, 2016 I'm on the Visibility bug right now, I hope to fix it quickly. The other one is a little more complex and I'll explain just after I've fixed the visibility. Quote Link to comment Share on other sites More sharing options...
Nabroski Posted August 5, 2016 Share Posted August 5, 2016 @Nockawa It was working 2weeks ago! my oh my. roll back version. Quote Link to comment Share on other sites More sharing options...
Nockawa Posted August 5, 2016 Share Posted August 5, 2016 @Nabroski which one was working 2 weeks ago, visibility? Quote Link to comment Share on other sites More sharing options...
Nabroski Posted August 5, 2016 Share Posted August 5, 2016 No, transparency, was working! now the pictures looking ugly since 1 week Quote Link to comment Share on other sites More sharing options...
Nockawa Posted August 5, 2016 Share Posted August 5, 2016 2 minutes ago, Nabroski said: No, transparency, was working! now the pictures looking ugly since 1 week Yep, I know why and will explain this one shortly. It's a not so short story! Nabroski 1 Quote Link to comment Share on other sites More sharing options...
Nockawa Posted August 5, 2016 Share Posted August 5, 2016 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: http://www.babylonjs-playground.com/#DSJDT#4 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. Nabroski and MasterK 2 Quote Link to comment Share on other sites More sharing options...
Nockawa Posted August 5, 2016 Share Posted August 5, 2016 @MasterK I've made the Sprite2d transparent and I've adding the zOrder as an optional parameter at creation time. So please try again your PG with the good zOrder values and tell me if the result is what you expect or not. Thanks. (PG should be update soon with this change) adam 1 Quote Link to comment Share on other sites More sharing options...
MasterK Posted August 6, 2016 Author Share Posted August 6, 2016 @Nockawa 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: http://www.babylonjs-playground.com/#DSJDT#7 I can't see 'G' of "BAG". and if dont use zOrder, it's ok. Quote Link to comment Share on other sites More sharing options...
Nockawa Posted August 6, 2016 Share Posted August 6, 2016 Here is what I have in the PG, can you tell me what's wrong? Quote Link to comment Share on other sites More sharing options...
MasterK Posted August 6, 2016 Author Share Posted August 6, 2016 It's mine: Quote Link to comment Share on other sites More sharing options...
Nockawa Posted August 6, 2016 Share Posted August 6, 2016 Just now, MasterK said: It's mine: Which Internet Browser ? Have you CTRL-F5 to hard refresh the babylon.js file? Quote Link to comment Share on other sites More sharing options...
MasterK Posted August 6, 2016 Author Share Posted August 6, 2016 5 minutes ago, Nockawa said: Which Internet Browser ? Have you CTRL-F5 to hard refresh the babylon.js file? I use latest version in local project is same. Chrome.... I try IE11 is fine... Quote Link to comment Share on other sites More sharing options...
Nockawa Posted August 6, 2016 Share Posted August 6, 2016 6 minutes ago, MasterK said: I use latest version in local project is same. Chrome.... I try IE11 is fine... Yep, only Chrome is failing, IE, FF and Edge are fine. I'm on it, but I'm no expert when it's about debugging web browser issues. Quote Link to comment Share on other sites More sharing options...
Nockawa Posted August 6, 2016 Share Posted August 6, 2016 @MasterK I've spotted the issue and I'm fixing right now. Quote Link to comment Share on other sites More sharing options...
MasterK Posted August 6, 2016 Author Share Posted August 6, 2016 1 minute ago, Nockawa said: @MasterK I've spotted the issue and I'm fixing right now. You're my hero. Another question. If I create 2 or more screenCanvas, can i use zOrder to sort them? Quote Link to comment Share on other sites More sharing options...
Nockawa Posted August 6, 2016 Share Posted August 6, 2016 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! Quote Link to comment Share on other sites More sharing options...
MasterK Posted August 6, 2016 Author Share Posted August 6, 2016 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. Quote Link to comment Share on other sites More sharing options...
MasterK Posted August 8, 2016 Author Share Posted August 8, 2016 new problem. http://www.babylonjs-playground.com/#1XMFC7#3 There are two click button in two screen canvas. If I set first screen canvas unVisible, the second click button in second screen canvas is disable. Quote Link to comment Share on other sites More sharing options...
MasterK Posted August 8, 2016 Author Share Posted August 8, 2016 @Nockawa And i really need sort Screen Canvas's render order... Another question: https://github.com/BabylonJS/Babylon.js/blob/master/src/Canvas2d/babylon.renderablePrim2d.ts#L458 https://github.com/BabylonJS/Babylon.js/blob/master/src/Canvas2d/babylon.renderablePrim2d.ts#L420 does it dipose twice??? Quote Link to comment Share on other sites More sharing options...
Nabroski Posted August 11, 2016 Share Posted August 11, 2016 @MasterK 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:http://www.babylonjs-playground.com/#23N1H9#10 redraw, hole thing at 60fps requestAnimationFrame/per Frame and it will drop performance to around to 25pfs so use it wisely http://www.babylonjs-playground.com/#23N1H9#9 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. Best Quote Link to comment Share on other sites More sharing options...
Recommended Posts
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.