Canvas2D Main Post

[FlashyGoblin]

On 5/14/2016 at 8:53 PM, Nockawa said:

Basically, how does it work?

You can create many Canvas2D instance on a given Scene, you have two kinds of Canvas:

• ScreenSpace: the canvas is displayed above the 3D Scene, in 2D space, like you would expect See this example. But there's another interesting mode:
• WorldSpace:the canvas is displayed in a 2D Rectangle as a part of the 3D Scene, you setup its position, rotation and scale, like a Mesh (well, it's in fact a Mesh of a Plane). See this example.

 

I receive errors on the two Playground links you posted.

http://babylonjs-playground.com/#272WI1#1: 

Compilation error

Line 26:6118 - Can't use Canvas Background with the caching strategy TOPLEVELGROUPS

 

 

http://babylonjs-playground.com/#1BKDEO#3: 

Compilation error

Line 24:7673 - Cannot read property 'contentSize' of null

 

[Nockawa]

3 minutes ago, FlashyGoblin said:

I receive errors on the two Playground links you posted.

http://babylonjs-playground.com/#272WI1#1: 

Compilation error

Line 26:6118 - Can't use Canvas Background with the caching strategy TOPLEVELGROUPS

 

 

http://babylonjs-playground.com/#1BKDEO#3: 

Compilation error

Line 24:7673 - Cannot read property 'contentSize' of null

 

These are certainly outdated version of the beta, being still in beta for the 2.4 I allowed myself to change few API signature upon feedback.

You can find here the latest version of all the PGs: http://doc.babylonjs.com/overviews/Canvas2D_Home

[FlashyGoblin]

2 minutes ago, Nockawa said:

These are certainly outdated version of the beta, being still in beta for the 2.4 I allowed myself to change few API signature upon feedback.

You can find here the latest version of all the PGs: http://doc.babylonjs.com/overviews/Canvas2D_Home

Great, thank you! Diving into this stuff now. I like what I'm seeing already! Great job on this. I'm looking forward to seeing how far you can push this!

[Nockawa]

1 minute ago, FlashyGoblin said:

Great, thank you! Diving into this stuff now. I like what I'm seeing already! Great job on this. I'm looking forward to seeing how far you can push this!

Thank you! well, this is an ambitious project I got myself into, didn't mean to go that big initially, but I'm glad of the progress... There will be bugs to fix because the overall cyclomatic complexity of the feature is huge. But I hope to fix them quickly.

[Nockawa]

@Samuel Girardin and everybody, a new version is available in the Playground and in Github's preview folder.

This version will hopefully resolves some of the bugs you had on rendering, supports alphatest (to render masked based objects) and transparency (which I struggled to developed...).

Samuel, thanks for telling me if your errors are gone, I really hope so.

@meteoritool the bug you had with interaction manager and events was fixed by our lovely boss @Deltakosh, it was occurring on OS with a big DPI (big screen resolution). You should have a check and tell us if things are ok now.

Thank you all!

[FlashyGoblin]

I'm curious if you have considered working with the VR cameras and ScreenSpace. It seems that the ScreenSpace adds it on top of the entire 3D scene and doesn't take into account the VR camera viewports. I guess currently a workaround would be to use WorldSpace and parent it to the camera. Thoughts about having the ScreenSpace render through the VR cameras? Or am I thinking about this in a totally wrong way? 

Here is a PG: http://babylonjs-playground.com/#20MSFF#3

You can toggle the Canvas2D between ScreenSpace and WorldSpace on lines 23 & 26.

 

Thank you!

[Nockawa]

Wow. I have to admit, i didn't think about VR. I will ask someone of the team to explain the basics and will come back to you.

[jerome]

Just pretend instead that you already took in account the VR cameras but for one eye only so far 

[meteoritool]

3 hours ago, Nockawa said:

@meteoritool the bug you had with interaction manager and events was fixed by our lovely boss @Deltakosh, it was occurring on OS with a big DPI (big screen resolution). You should have a check and tell us if things are ok now.

I've updated and eveything workds now !!! 
I did little so far but it works great !

Here is a small feedback :
# There seems to be some kind of error in the tutos webpage, I'm not sure where:
http://doc.babylonjs.com/tutorials/Using_the_Canvas2D
var canvas2 = Canvas2D.CreateScreenSpace(scene, { size: new Size(300, 100), cachingStrategy: Canvas2D.CACHESTRATEGY_DONTCACHE }); canvas2.backgroundFill = Canvas2D.GetSolidColorBrushFromHex("#C0C0C040"); canvas2.backgroundRoundRadius = 50; var text = Text2D.Create(canvas2, "Hello World!", { x: 80, y: 40, fontName: "20pt Arial", defaultFontColor: new Color4(0.6, 1.0, 0.6, 1.0) }); text.origin = Vector2.Zero();

# I've tried to replace SetValueAction with InterpolateValueAction but it came with a console error

# Assigning an object to an action usually comes with a mouseover pointer change, alike HTML Links, wouldn't it be nice to have that with Canvas2D with Actions ?

Thanks for all the fixes ! Very useful for the whole community I hope !

[Nockawa]

4 minutes ago, meteoritool said:

I've updated and eveything workds now !!! 
I did little so far but it works great !

Here is a small feedback :
# There seems to be some kind of error in the tutos webpage, I'm not sure where:
http://doc.babylonjs.com/tutorials/Using_the_Canvas2D
var canvas2 = Canvas2D.CreateScreenSpace(scene, { size: new Size(300, 100), cachingStrategy: Canvas2D.CACHESTRATEGY_DONTCACHE }); canvas2.backgroundFill = Canvas2D.GetSolidColorBrushFromHex("#C0C0C040"); canvas2.backgroundRoundRadius = 50; var text = Text2D.Create(canvas2, "Hello World!", { x: 80, y: 40, fontName: "20pt Arial", defaultFontColor: new Color4(0.6, 1.0, 0.6, 1.0) }); text.origin = Vector2.Zero();

# I've tried to replace SetValueAction with InterpolateValueAction but it came with a console error

# Assigning an object to an action usually comes with a mouseover pointer change, alike HTML Links, wouldn't it be nice to have that with Canvas2D with Actions ?

Thanks for all the fixes ! Very useful for the whole community I hope !

Can you be a little more specific about what line/error you have in the tutorial? What behavior should be expect and what you have instead?

Thanks

[meteoritool]

I copy-paste this chunk of code I mentioned and got : "ReferenceError: Canvas2D is not defined"

But I'm sure there is something stupid of me here, I've used the PG code to start my stuff  and no problemo !

[Nockawa]

3 minutes ago, meteoritool said:

I copy-paste this chunk of code I mentioned and got : "ReferenceError: Canvas2D is not defined"

But I'm sure there is something stupid of me here, I've used the PG code to start my stuff  and no problemo !

No, that's me... I've streamlined the sample code in the tutorial, it doesn't compile if you copy/paste it directly, but if you use the PG it will work.

The thing is I should do "BABYLON.Canvas2D" when I reference the type and instead of that I have on the top of my PG the following line which creates an alias:

var Canvas2D = BABYLON.Canvas2D;

To solve the reference. And it's the same for all other BABYLON types... Just look at the very start of each PG, you will see what I mean

[GameMonetize]

This proves thatyou cannot do that in the doc  

[Samuel Girardin]

@nockawa, no more webgl error ! well done !

 

[Nockawa]

20 minutes ago, Samuel Girardin said:

@nockawa, no more webgl error ! well done !

 

well you can thank @Deltakosh and @Sebavan they're the ones who actually fixed the bug and came to the rescue, I was burned out...

[FlashyGoblin]

@Nockawa Is there a Canvas2D PG example with loaded images serving as UI elements and buttons? UI and menu elements are often made up of images and it would be great to see your recommendation for the best way to implement this.  I think this would be a great addition to the Canvas2D home page as well. 

[Nockawa]

1 minute ago, FlashyGoblin said:

@Nockawa Is there a Canvas2D PG example with loaded images serving as UI elements and buttons? UI and menu elements are often made up of images and it would be great to see your recommendation for the best way to implement this.  I think this would be a great addition to the Canvas2D home page as well. 

I'm currently working on solving every issues we can find and finish few little things that were unfinished (always the things that you're too lazy because it boring/long to do compared to the outcome).
Anyway, after that I have one feature to finish: Primitive Alignment and Margin. This will ease the positioning of primitive, typically in case where you want to create a Button, with a text and a picture inside.

So what I've planned is as soon as the alignment/margin is done I will do a PG showcasing what you just asked along with it.

 

[FlashyGoblin]

2 minutes ago, Nockawa said:

I'm currently working on solving every issues we can find and finish few little things that were unfinished (always the things that you're too lazy because it boring/long to do compared to the outcome).
Anyway, after that I have one feature to finish: Primitive Alignment and Margin. This will ease the positioning of primitive, typically in case where you want to create a Button, with a text and a picture inside.

So what I've planned is as soon as the alignment/margin is done I will do a PG showcasing what you just asked along with it.

 

Sweet! Awesome! Boss! Super! Great! Fin! 

[Nockawa]

ok guys, a little update, the last couple of days were spent on bug hunting (and killing) and also finishing some features.

We solved many little bugs that showed up during experimentation, so the more you use the feature, the better it'll become by the time it's released, I can't stress that enough: I can't test everything by myself, there are too many combinations.

In the meantime I've added couple of things:

-  intersection works better on Lines2D, I now support every Cap types, it's also accurate on rounded Rectangle (if you click on the empty zone create by the rounding corner it won't generated a hit).

- interaction mode can now be enable in WorldSpace Canvas, you can take a look at this PG for an example: http://babylonjs-playground.com/#1BKDEO#9

- I've also added a alignToPixel property in Sprite2d to make sure the rendering of the sprite will be aligned to the render target device pixel, is ensure the best rendering quality, but in rare case of slow animation you would probably want to turn it off to ensure smooth animation. by default it's on.

 - I won't detail it too much here because it need proper doc to be fully understood, but now you can give your own WorldSpaceNode to render a WorldSpace Canvas on something else that a simple Plane mesh. This mode is easy if you don't use Interaction, but if you do, you have to give a method that compute the world space intersection with your mesh and then compute the local position in the Canvas of the resulted intersection. This is not the simplest method to code but you have an example with the current implem for Plane World intersection to Canvas.

Today I'll focus on Alignment/Margin @Sebavan pointed out the interesting idea of supporting positioning in something else than pixel, in % actually (like CSS does for top/bottom/left/right margin). I'm going to go and try to do that: like the pointerEvent copy the behavior of HTML5 I will try to copy the behavior of CSS for these property: it won't be easy and I don't know yet what I will end up with, time constraint will be key...

One last idea I got going to bed:

I want the users to be able to declare using a complex JSON object a whole hierarchy of Canvas content, really in a declarative fashion. For the .net guys like XAML does for WPF, of like HTML does...for HTML.
Yet again: I'm not saying it will make it for the 2.4, but that would awesome ihmo to be able to declare a whole content of a canvas that way, storing json files like that and be able at runtime to create a Canvas's content out of it.

That's all folks! As always, feedback is welcomed, the more you give me feedback, bugs, the better it will be, even for doc, which is kinda unsync right now with the current implem, but I'll update it sooner.

Edit: as always you can find a recap of this post as an update in the first post of this topic.

[jerome]

huge work....

is there a word in english to mean huger than huge ?

[Wingnut]

Enormous,  gargantuan, monumental. 

Ok, "hard nox" (Nockawa)... let's talk tech.  (I have lots more funny names for Nockawa, yet.  I'm just getting started.)  heh

Umm... over in another thread (lost rings)... I told Ian that I would try some tests to get the virtual joystick working again.  http://doc.babylonjs.com/playground?q=VirtualJoysticksCamera

Currently, we've lost backward compat on the virtual joysticks and vj camera .  The functionality is still there, but not the graphics rings.

Nockawa, remember when you fixed VJ demo #12 for me?  Well, in another thread, I wondered if you ONLY fixed my demo, or if you also PR'd the repair into BJS src.

On a side subject... looking at https://github.com/BabylonJS/Babylon.js/tree/master/src/Cameras/Inputs ... we see that there is no virtualJoysticksInput for arcRotateCam, and that's what Ian needs, and... maybe soon.

So, with the pre-release of 2.4, Ian's project quit working... and he can't fig how to get it back, other than reverting to BJS 2.3... which is possibly the only solve at the moment.

All that crap aside...

#1 - Do you know how to get the VJ's working in 2.4... without needing all that massive code that we see in demo #12?  In other words, can you do the same thing to Virtual Joysticks SOURCE CODE... as you did to my #12 demo?  (which made it start drawing rings again).   Then 2.4 will be VJ backward-compatible.  Thanks.

#2 - Can I ask... where we are at... in performing drags/drops on 2D primitives?  We will need primitive dragging if we are to move rings in future (Canvas2d) versions of VJ's.

Davrous said a re-factoring of VJ was coming in a few weeks, but we need to get the old VJ system working again, first, for backwards compat.  Ian is counting on us.  If you did not perform a PR on the VJ source code... at the same time you fixed my #12 demo, would you consider doing such, and repairing the VJ source in the same way?  That would be... um... "stupendous". 

[Nockawa]

#1 VJ is not my part I can't answer on the behalf of others, the only thing I know is I'll help @davrous to refactor it for the 2.5.

#2 interaction is fully supported right now, you have a behavior similar to the PointerEvent of HTML (it's similar, not the same) on a Primitive basis with a bubbling of the events to ease the creation of UI such as the VJ

So I would say it's not in my hands right now and they're already full (my hands) anyway!

Best

[adam]

5 hours ago, jerome said:

is there a word in english to mean huger than huge ?

I like GINORMOUS!!

[Wingnut]

Well I was going to show a playground with an error... http://www.babylonjs-playground.com/#29DV9X

I thought I was going to be able to blame Nockawa... but the error just disappeared.  hrmph.  I swear to gosh, Virtual Joysticks are haunted.  I have seen the weirdest things happen when fighting with them.

Anyway, sorry, there was no BABYLON.SmartCollection is not a constructor error... or undefined is not a constructor error.  It didn't happen.  I imagined it all.    Ok, back to Canvas2D. Yay!

[Samuel Girardin]

@nockawa

Maybe this is a bug. PG here : http://babylonjs-playground.com/#UVDG0#47 (tested in edge,ff and chr)

The 2nd button has an alpha < 1.

After a second clic on the 1st button, even if levelVisible is set to true, I can see the text but not the 2nd button's background.

Is it specific on my computer or not ?