Canvas2D Main Post

[Nockawa]

3 minutes ago, FlashyGoblin said:

So what about zooming out? Text2D objects get crunchy when the camera zooms out. Is there a way to soften them? 

PG: http://babylonjs-playground.com/#1BKDEO#21

 

Well, it's the next on the list of the "quality improvements", I've focused on zoom in, and next is zoom out. for this particular case I think I have to rely on mipmapping, with three levels: super(*2)/normal(*1)/tiny(*.05) and let the GPU do the trilinear filtering to achieve good quality... maybe also activating anisotropy...

[FlashyGoblin]

@Nockawa Can you help me understand the difference between setting the size of the canvas2D vs. setting the renderScale?

These two different settings end up looking the same. What would be the difference?

var canvas = new BABYLON.WorldSpaceCanvas2D(scene, new BABYLON.Size(800, 800), {
    renderScaleFactor: 1
});

vs.

var canvas = new BABYLON.WorldSpaceCanvas2D(scene, new BABYLON.Size(100, 100), {
    renderScaleFactor: 8
});

 

[Nockawa]

Just now, FlashyGoblin said:

@Nockawa Can you help me understand the difference between setting the size of the canvas2D vs. setting the renderScale?

These two different settings end up looking the same. What would be the difference?

var canvas = new BABYLON.WorldSpaceCanvas2D(scene, new BABYLON.Size(800, 800), {
    renderScaleFactor: 1
});

vs.

var canvas = new BABYLON.WorldSpaceCanvas2D(scene, new BABYLON.Size(100, 100), {
    renderScaleFactor: 8
});

 

The difference is your 3D Mesh (the plane) that displays the rectangle will be 800*800 world units in the first case and 100*100 world units in the second.

The thing to understand here is : in 3D all is relative to the camera! the znear/far clip plane of the camera truly define what is big and what is not. With the same camera setting the first case leads to a rectangle that is 8 times bigger on screen than the second case.

[FlashyGoblin]

2 minutes ago, Nockawa said:

The difference is your 3D Mesh (the plane) that displays the rectangle will be 800*800 world units in the first case and 100*100 world units in the second.

The thing to understand here is : in 3D all is relative to the camera! the znear/far clip plane of the camera truly define what is big and what is not. With the same camera setting the first case leads to a rectangle that is 8 times bigger on screen than the second case.

Ok, great! That's what I expected. I just wanted to make sure that there isn't any unnecessary performance by setting the renderScaleFactor higher vs a larger plane. Thanks! 

[Nockawa]

Hello people,

I try to organize myself a bit for the sake of efficiency (and mostly to compensate my weak memory), so I use Trello to store everything that needs to be done, work in progress, and so on.

Disclamer: this is my own stuff, not a "babylon.js dev team" one, there's no commitment or whatsoever.

But I thought it would be nice to share with the ones of you that wants to get a better view of what's going on and also (if you create/sign in with a Trello account):

• you can make suggestion of features by commenting in the very first card.
• you can upvote for feature already present in the board for me to get a better sense of what is more important to dev first (again no commitment, I'll do my best, but there's no guarantee)
• you can comment existing card if you think a given feature should be done differently, support something else, etc.

Here's the link:

https://trello.com/b/eKMKhCFc/canvas2d

Cheers

[Nockawa]

Hello everybody,

As mentioned few days ago I was working on improving the quality of World Space Canvas, the feature is now complete and integrated in the 2.5beta and the Playground.

You can see the result with this PG: http://babylonjs-playground.com/#1BKDEO#22 and also this one http://babylonjs-playground.com/#EPFQG#4

Thanks to @Sebavan I've improved the overall feature for both close or far World Space Canvas, I now rely on a cached bitmap stored in a MipMapped Texture and render it using Anisotropic filtering if available. The size of the cached bitmap has no longer the need to be constantly recomputed, its minimal size is 256*256 (well, saying that made me realized that for very small canvas it may be too big! lol) and then it's power of two sized up to 1024 (then 512 and 1024). You can choose a bigger maximum size if you want and it will be used as long as the rendering device allows it. By doing this I don't resize/render the Canvas often and it's a good thing for canvas containing static content.

I'm overall pretty happy about the improvement made on both Text2D and World Space Canvas, I'm not saying it's perfect and I wait for your feedback but I personally think it's now decent enough for real world case.

BEWARE with the latest version a breaking changed occurred, the babylon.js team doesn't take lightly decisions concerning breaking change because we want you the users to keep using the latest version of our lib without spending hours to adapt your existing codebase. However, considering this particular setting and the fact that Canvas2D is pretty new: we decided we could allow a breaking change.

The renderScaleFactor setting no longer exists, it has no purpose now the Canvas resize itself automatically. If you were using this setting, then you have to be aware it's completely ignored now and you should change the positioning of your primitive as if its value where 1.

I truly hope it won't bother many of you.

Now that I've completed this task I move forward to the following, which is a series of bug fixes and implementing a set of performance metrics to get a better idea of what's going on inside the Canvas2d feature.

 

 

[adam]

2 hours ago, Nockawa said:

I truly hope it won't bother many of you.

You are too nice.  

I can't wait to start using Canvas2d in my project.

[Nockawa]

Hello Everybody,

I've recently worked on fixing some bugs, adding Perf Metric and creating a little Canvas that display the performances. You can find a little playground here: http://babylonjs-playground.com/#1S2MDR#2

This playground is basically my unit test to to test the Z-Order, the value in the text is a Math.round(zOrder*1000). You can also take a look at how to create/get the profiling canvas, it's just one line of code.

[Nockawa]

@FlashyGoblin your wish has been granted!

All primitives have now an opacity property to set its overall opacity factor (between 0 for totally invisible and 1 for totally opaque). The actualOpacity property is used to render each primitive, this is the accumulation of all the opacity through the parent tree. Which means you can create a Group2D, set its opacity to 0.5 (this is why the property is even present in non renderable primitives) and all its children will have an actualOpacity of 0.5 if their opacity has kept its default value (1).

The PR is submitted, soon to be merged and playground updated.

@Samuel Girardin I'm now starting the transparent Draw Calls optimization, then after I will try to figure something out to get text rendering nicely when it's above a transparent background.

When both tasks will be done (I'm not sure for the last one), I'll be able to resume my work on the GridLayout and then I will (finally) start the GUI Library, @Deltakosh gave the green light for the basics controls to be part of the babylon.js full distribution.
You guys will have a "real" button class, you won't have to hard code it anymore!

[Nockawa]

Until know I was rendering transparent objects one by one, without taking advantage of the Instanced Arrays if supported, which leads to a lot of Draw Calls.

But during the development of the Transparency 90% of the job were done to support Instanced Arrays, I finally got the time to add it yesterday and I'm pretty happy about the result.
Basically when preparing the render the first time, I sort all the transparent primitives and then I built TransparentSegments, which describe a continuous (Z-Order wise) segment of primitives of the same type (ModelKey).
The primitives in this segment can be rendered one by one (which is what being done if Instanced Array are not supported or if there's less than 5 primitives in the segment) or using a dedicated Instanced Array.
In the screenshot below I've create 50 primitives with the following pattern: 10 rects, 10 ellipses, 10 rects, 10 ellipses, 10 rects.
During the preparation of render I recompose these sets of 10 prim into Transparent Segments and create an Instanced Array for each of them.
You can see the result, to render the 50 prims I only need 5 Transparent Draw Calls!
If there's a change in Z-Order, the Transparent Segment are recomputed, if there's a change in a prim (if its rotation changed for instance), the Instanced Buffer is updated with the new state.

[Nockawa]

Ok, guys, the latest PR got merged, I assume the playground was also updated. This version reflects what I wish the V1.0 of the Canvas2D would be.

The transparency is handled correctly and efficiently, the text quality is good, the z-order is working with a large amount of objects. The text finally blend correctly over transparent surface. @Samuel Girardin you should be able to set your rect that serve as background with more transparency if you want, the text should blend nicely this time and the draw call would now be optimized.

As I said earlier, I resume the work on the Grid Layout Engine, it's going to be a simple thing, I don't want to spend too much time on it, then after I'll start the GUI lib. I may do a little performance profiling/optimization between those two, I'll see...

[FlashyGoblin]

On 6/24/2016 at 6:06 PM, Nockawa said:

@FlashyGoblin your wish has been granted!

All primitives have now an opacity property to set its overall opacity factor (between 0 for totally invisible and 1 for totally opaque). 

WooHoo!!!!!! This is fantastic! Thank you thank you thank you! 

[FlashyGoblin]

On 6/24/2016 at 6:06 PM, Nockawa said:

 

@Samuel Girardin I'm now starting the transparent Draw Calls optimization, then after I will try to figure something out to get text rendering nicely when it's above a transparent background.

Better text rendering over a transparent background would be awesome! Honestly, that is the one reason that is currently stopping me from using Text2D. 

[Nockawa]

11 hours ago, FlashyGoblin said:

Better text rendering over a transparent background would be awesome! Honestly, that is the one reason that is currently stopping me from using Text2D. 

It's done and working well now!

[FlashyGoblin]

4 hours ago, Nockawa said:

It's done and working well now!

You animal!!!!!!! 

[Dal]

On 6/24/2016 at 4:32 PM, Nockawa said:

Hello Everybody,

I've recently worked on fixing some bugs, adding Perf Metric and creating a little Canvas that display the performances. You can find a little playground here: http://babylonjs-playground.com/#1S2MDR#2

This playground is basically my unit test to to test the Z-Order, the value in the text is a Math.round(zOrder*1000). You can also take a look at how to create/get the profiling canvas, it's just one line of code.

I'm seeing teeny tiny text on a 4k monitor... just in case you didn't know already

[Nockawa]

11 hours ago, Dal said:

I'm seeing teeny tiny text on a 4k monitor... just in case you didn't know already

Looks like I've set the font size in pixel instead of pt, but I thought HTML px were not the same as device px...anyway I need to find someone to make some test for me because I don't have this kind of display.

You're talking about the perf metric window, right?

[Nockawa]

@Dal there's a trello card for your bug: https://trello.com/c/lgwBo54M

[KevinBLT]

You saved me from a lot of pain, thanks! 

[Nockawa]

21 hours ago, KevinBLT said:

You saved me from a lot of pain, thanks! 

lol, why that?

[Wingnut]

Sorry to insert at a bad point, but nocks... a quick concern:

http://babylonjs-playground.com/#DIF54#2

Fun PG, by the way.  Line 10-13 ... 'fontName' parameter.  Any chance that could be changed to just 'font'? 

Any chance that the Text2D prims could ALWAYS use the CSS names... precisely... for all applicable parameter names?  I think... the closer to CSS property names, the better.

btw, folks I'm not implying that Canvas2D primitives will/should EVER act-like or honor CSS-like things.  I just think it would be easier to use Text2d if the param names matched CSS names... which folks like me already have memorized.   

Nockzy... you're already using it as if it were the 'font' css shorthand.  'Bold 12pt Arial'.  So why 'fontName'?  I officially request this change (to 'font') ... (unless it's a dumb idea). 

So far, what I have seen of Canvas 2D is just fabulous.  Look how fast and easy it is to turn-on some well-behaved text and rectangle panels.  Nice. 

And it's dynamic... which means you can make pokes at it and it will have instant results.  Yum.  For those who might be wondering WHY the "left" and "bottom" text is further from origin, it is because of crap programming on the author's part.  (just kidding, of course)  (I LOVE Nockawa, actually.  I think he's coooool... and friggin' way smart.)

Ok, let's turn-on a border around a text... 

http://babylonjs-playground.com/#DIF54#3

Line 13... using the same CSS shorthand method "2pt inset gold"...  using the same naming convention fontName/borderName, we try to turn-on the border for "bottom" text.  This way we can learn if text is positioned in lower left of its container... by default.

No border.  ALL I wanted was a thin little pretty gold border... but nooooooo.  hehe.  I suppose NEXT, somebody is going to say that I should read the Canvas2D docs, and quit trying to learn it by looking-at playgrounds.    Reading... sigh... it's hard work.  Learning in playgrounds is MUCH more fun.

hmm.  I just thought of something.  Maybe the text needs to be put inside a Rectangle2D, and then it can have a border of its own.  hmm.  Bet so. 

Okay, back to you, Kevin Bacon Lettuce and Tomato.  Why so?

[adam]

In this example:

http://babylonjs-playground.com/#DIF54#2

It looks like "fontName" should be renamed to "fontStyle" "textStyle" "style" 

OK, I agree with Wingnut: 

http://www.w3schools.com/cssref/pr_font_font.asp

"font" makes the most sense.

[Nockawa]

On 27/06/2016 at 0:03 AM, Dal said:

I'm seeing teeny tiny text on a 4k monitor... just in case you didn't know already

Well, turned out that I don't support the DevicePixelRatio CSS property which makes everything too small on high DPI device.
This issue becomes the first on my priority list.
Thank you for reported it to me.

[Nockawa]

1 hour ago, Wingnut said:

Sorry to insert at a bad point, but nocks... a quick concern:

http://babylonjs-playground.com/#DIF54#2

Fun PG, by the way.  Line 10-13 ... 'fontName' parameter.  Any chance that could be changed to just 'font'? 

Any chance that the Text2D prims could ALWAYS use the CSS names... precisely... for all applicable parameter names?  I think... the closer to CSS property names, the better.

btw, folks I'm not implying that Canvas2D primitives will/should EVER act-like or honor CSS-like things.  I just think it would be easier to use Text2d if the param names matched CSS names... which folks like me already have memorized.   

Nockzy... you're already using it as if it were the 'font' css shorthand.  'Bold 12pt Arial'.  So why 'fontName'?  I officially request this change (to 'font') ... (unless it's a dumb idea). 

So far, what I have seen of Canvas 2D is just fabulous.  Look how fast and easy it is to turn-on some well-behaved text and rectangle panels.  Nice. 

And it's dynamic... which means you can make pokes at it and it will have instant results.  Yum.  For those who might be wondering WHY the "left" and "bottom" text is further from origin, it is because of crap programming on the author's part.  (just kidding, of course)  (I LOVE Nockawa, actually.  I think he's coooool... and friggin' way smart.)

Ok, let's turn-on a border around a text... 

http://babylonjs-playground.com/#DIF54#3

Line 13... using the same CSS shorthand method "2pt inset gold"...  using the same naming convention fontName/borderName, we try to turn-on the border for "bottom" text.  This way we can learn if text is positioned in lower left of its container... by default.

No border.  ALL I wanted was a thin little pretty gold border... but nooooooo.  hehe.  I suppose NEXT, somebody is going to say that I should read the Canvas2D docs, and quit trying to learn it by looking-at playgrounds.    Reading... sigh... it's hard work.  Learning in playgrounds is MUCH more fun.

hmm.  I just thought of something.  Maybe the text needs to be put inside a Rectangle2D, and then it can have a border of its own.  hmm.  Bet so. 

Okay, back to you, Kevin Bacon Lettuce and Tomato.  Why so?

I agree, if possible the naming should be close to CSS' one and unfortunately it's not the case on the fontName one. BUT, I don't support all the font-* attribute in text 2D. I don't even know what's really supported, I guess name, size, style, bold are supported, but borders or things like that won't for sure. Text2D uses FontTexture which creates a font map, each different character is drawn just once then when Text2D need this character a quad is drawn using the appropriate texture UV to display this character.

 

[Dal]

8 hours ago, Nockawa said:

Well, turned out that I don't support the DevicePixelRatio CSS property which makes everything too small on high DPI device.
This issue becomes the first on my priority list.
Thank you for reported it to me.

I should also add that this is a bug in the core of BabylonJS... the debug GUI displays everything very small in 4K monitors also. ( @Deltakosh )

Plus, when using engine.setHardwareScalingLevel to scale the game down to 1080p, it doesn't scale the debug GUI either, so the clickable labels end up being too small AND in the wrong place