Jump to content

Using 10 ScreenSpaceCanvas2D classes vs using 1


Raitch
 Share

Recommended Posts

Currently in my project I've ended up using around 10 ScreenSpaceCanvas2D class and controlling them with the .levelVisible boolean. I'm curious on if this is bad practice or not. Does it drain a lot more from Babylon even though they are hidden?

I am currently considering remaking a part of my project to only use 1 ScreenSpaceCanvas2D and have Group2Ds instead for each part with relevant caching. Is that considerably superior to do?

Thanks!

Link to comment
Share on other sites

Ok, if you're brave you can read this document: http://doc.babylonjs.com/overviews/Canvas2D_Overview_Architecture

But I'll TL;DR for you:
If you have more than one canvas visible at the same time, it should be faster to deal with only one Canvas with x Group2D instead of x Canvas.
Why?
The Canvas2D library was built to take advantage of the Instanced Array extension of WebGL, to issue the fewest draw calls possible. For instance, if  you have several Text2D instances using the same font or BitmapFont, all these instances (inside a given Canvas2D object) will be drawn in one single call. The same apply to Rectangl2D/Ellipse2D with the same kind of Brush2D (solid or gradient, whatever the colors you use): one draw call will be issued for any Rectangle2D instances using SolidColorBrush, whatever the color is used for each instance (i.e. red, blue green rectangles will be drawn in a single Call).
Same thing for all instances of Sprite2D sharing the same texture.
But this apply to instances inside a given Canvas2D. If you have two instances of Canvas2D, then the calls will be doubled.

I hope this is clear enough, tell me if it's not.

Link to comment
Share on other sites

I tried grouping up instead of using ScreenCanvases but that caused too many weird behaviors I couldn't make sense of. Feels like transparencies and/or caching overlaps each other or scaling and/or position inside groups instead of screen canvas creates some rather odd behaviors for me. This is through the 2.4 Canvas. Every attempt I've tried with a later version has had even wonkier behavior so far. 

Link to comment
Share on other sites

I can't provide a PG or the entire behavior right now. If this image makes any sense, it should cover the entire screen and for some reason the .png's transparence goes through the intended blackness behind it. in 2.4 the Canvas covers the entire screen with no transparency bug, but this happens in the hours old version. Have any new measurement become the new standard than pixels?

download.png

Link to comment
Share on other sites

You don't use a CACHE mode for the Canvas ? I mean it's the default one "DONT_CACHE" ? 

You didn't answered my question about which version of C2D you were using?

Try to code/repro in the playground, I can't help you otherwise, or send me the code in private, but PG is definitely better.

Link to comment
Share on other sites

Looks like I could solve the alpha issue by adding `.hasAlpha = true` to the texture. Wasn't required before but it makes sense. 

About the scale/sizing, I used to fetch the canvas.width and canvas.height but that doesn't seem to be the max size in the newest versions. How is max width and height of canvas supposed to be calculated?

Link to comment
Share on other sites

Multiplying `canvas.width` and `canvas.height` by 4 seems to "solve" that as well. Weird, but can't complain about result. 

Or it seems I can. Having it cover the entire screen by multiplying seems to cause a lot of lag. @Nockawa, do you have an example on how you would calculate something 100% across the screen? How would you calculate a ScreenCanvas or Rectangle to cover the entire screen?

It's quite funny. When I try to use `size`, it's 1/4 of actual size. When I try to use `width` and `height`, it's 1/8 of actual size.

I can't get the canvas element in Playground either to replicate it. 

Link to comment
Share on other sites

I tried using your examples in the Playground but I still only get the lower left corner covered: 

Can't really tell why the Canvas2D limits itself to only a 1/4th of the screen. The behavior reminds me a bit of the optimize function I experienced problems with before. 

download.png

Link to comment
Share on other sites

I've made a lot of Canvas2Ds that I have in my game. They work perfectly with size and all in the 2.4 Babylon JS version. When I try the update from today they all get shrinked a 1/4th of the screen for some reason. Most of my Canvas2D design is based on percentage of canvas.width and canvas.height. I want them to be scaled and positioned as they were in 2.4, but maybe I'm missing some essential information since 2.4 which creates this difference?

As you see in the 2 above images the entire Canvas2D area is limited to the bottom left corner when they're supposed to be covering 100%. I can bypass this by multiplying canvas.width and canvas.height by 4, but that seems to make it lag a whole lot more. 

I can't reproduce the behavior in PG which makes me wonder if it's caused by the lack of cameras or something else upon load. I have already built everything and it works as intended of the older version and I don't see why it wouldn't on the newest one. 

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.

Guest
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.

Loading...
 Share

  • Recently Browsing   0 members

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