Canvas2D Main Post

[NasimiAsl]

1 minute ago, Nockawa said:

You have to use the Text2D.text property to change the text's content. Text2D._text is private, you're not supposed to interact with it.

Sorry, I don't understand, can you be more explicit?

when we use '\n' we see text in next line but in here we see it in top Line

[Nockawa]

Yes, you're right, the theory would be:

- Use "\r " for carriage return, which means you reset the X position but don't feed a new line.

- Use "\n" for line feed, which is used to create a new line.

But in reality, a lots of text parsing don't interpret things this way because \r is most of the time not supported well. I decided to use a "\n" which is the equivalent of "\r\n" like you should do.
I can change the code based on the community feedback, I don't mind at all, I can support both \r and \n properly, it's really easy thing to do.

[jerome]

maybe for right-to-left written languages ?

[NasimiAsl]

57 minutes ago, Nockawa said:

Yes, you're right, the theory would be:

- Use "\r " for carriage return, which means you reset the X position but don't feed a new line.

- Use "\n" for line feed, which is used to create a new line.

But in reality, a lots of text parsing don't interpret things this way because \r is most of the time not supported well. I decided to use a "\n" which is the equivalent of "\r\n" like you should do.
I can change the code based on the community feedback, I don't mind at all, I can support both \r and \n properly, it's really easy thing to do.

i just see Thanks Any Decision you have we accept

[meteoritool]

Hi !

Awesome feature ! It makes BABYLON.Js even more versatile, the definitive Framework for WebGl and other stuffs !

I was wondering : With this new feature, does the bGUI extension still makes sense to be used ? I have happily used bGUI for the 2D-like features of a user interface, but now I wonder how the 2 methods (bGUI or BABYLON.Canvas2D) differentiate. Is there a better method than the other, performance-wise ?

(I don't mention CastorGUI, I haven't really used CastorGUI but, from what I can understand, CastorGUI supports HTML/CSS, which difference from Canvas2D justifies itself)

 

[Nockawa]

16 minutes ago, meteoritool said:

Hi !

Awesome feature ! It makes BABYLON.Js even more versatile, the definitive Framework for WebGl and other stuffs !

I was wondering : With this new feature, does the bGUI extension still makes sense to be used ? I have happily used bGUI for the 2D-like features of a user interface, but now I wonder how the 2 methods (bGUI or BABYLON.Canvas2D) differentiate. Is there a better method than the other, performance-wise ?

(I don't mention CastorGUI, I haven't really used CastorGUI but, from what I can understand, CastorGUI supports HTML/CSS, which difference from Canvas2D justifies itself)

 

Hello @meteoritool, thanks for cheering!

@Temechon did a great job with bGUI considering the time he spent, but I put a lot more effort on the Canvas2D feature, that was one of the reason I started something over, from scratch: I've spent a lots of time for the 2D Rendering Engine being dedicated and not an particular configuration of the 3D one.

But before any misunderstanding, let me emphasis that I rely on everything of babylon.js itself that is making sense for a 2D Engine (Texture, Effect, Buffer, Math stuffs, etc.), but the rendering engine is unique: tailored for 2D stuffs.

In my opinion, feature and performance-wise the Canvas2D will be better for sure very soon. No offense to Temechon, but I did (and still do) spend a lots of time on this feature. I have specific goals to achieve and they're pretty ambitious. But I need it for a project I'm developing.

For instance I will submit later on today a Pull Request where Interaction is supported, you will see that from this point the foundations to build a GUI library will be pretty much done. A Primitive will have an observable where users can attach observer to listen to event like Pointer Enter/Leave, Move, Button/Touch down/up, etc.

What will make Canvas2D an ideal candidate for a GUI lib is the caching mechanism, you will be able to compose complex GUI Controls based on 2D primitives, their rendering will be very efficient because the content will be cached into a bitmap, while still allowing the control to change/redraw when needed.

There's work left to do, but I'm on the right path!

[Temechon]

Absolutely no offense taken  You are spending way more time than me on this! 

As far as I know, bgui will be useless with this new (much more) powerful feature, as everything will be handled in the core. No point to use it anymore.

[adam]

I love what you are doing Nockawa.

I'm not sure if you misunderstood what NasimiAsi was saying about the \n character or if I have misunderstood something.

Anyway, Nockawa's PG should say Hello World like this:

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

I think this line is the issue:

https://github.com/BabylonJS/Babylon.js/blob/30e38b75af3c366691927a6452223bcf02267957/src/Canvas2d/babylon.text2d.js#L301

I changed it to: 

offset.y -= texture.lineHeight;

in the PG example.

 

[NasimiAsl]

5 hours ago, adam said:

I love what you are doing Nockawa.

I'm not sure if you misunderstood what NasimiAsi was saying about the \n character or if I have misunderstood something.

Anyway, Nockawa's PG should say Hello World like this:

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

I think this line is the issue:

https://github.com/BabylonJS/Babylon.js/blob/30e38b75af3c366691927a6452223bcf02267957/src/Canvas2d/babylon.text2d.js#L301

I changed it to: 

offset.y -= texture.lineHeight;

in the PG example.

 

big Like adam

[Kesshi]

@Nockawa you did an awsome job here.
What i would like to see in future is a line primitive which supports thickness/line width. Having 2D lines with thickness would help a lot in my case.
Actually i would also need 3D lines with thickness but you are concentrating on 2D at the moment so ... maybe later

[Nockawa]

34 minutes ago, Kesshi said:

@Nockawa you did an awsome job here.
What i would like to see in future is a line primitive which supports thickness/line width. Having 2D lines with thickness would help a lot in my case.
Actually i would also need 3D lines with thickness but you are concentrating on 2D at the moment so ... maybe later

Actually the Border Part of a Primitive has a Thickness property, try to create a Rectangle2D, set only a SolidColorBrush on the Border and change the Thickness (you have to set a roundRadius also, there's a bug right now where Border is only supported on Rectangle2D when there's a roundRadius).

@jerome mentioned the exact same type of primitive you talk about, I think it's going to come sooner than later. If no one does it before me I'll do it right after I finished the Interaction, Alignment features currently in progress.

[Nockawa]

11 hours ago, adam said:

I love what you are doing Nockawa.

I'm not sure if you misunderstood what NasimiAsi was saying about the \n character or if I have misunderstood something.

Anyway, Nockawa's PG should say Hello World like this:

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

I think this line is the issue:

https://github.com/BabylonJS/Babylon.js/blob/30e38b75af3c366691927a6452223bcf02267957/src/Canvas2d/babylon.text2d.js#L301

I changed it to: 

offset.y -= texture.lineHeight;

in the PG example.

 

LOL finally I understand! Thank you for pointing that out!

Ok, I'll fix the bug, this is due to the fact that when I've started the lib the origin was TOP/left and I had to change it to BOTTOM/left (because of WebGL's Viewport being Bottom/left as well). I hope I don't have much more little mistakes like this!

[Kesshi]

15 minutes ago, Nockawa said:

Actually the Border Part of a Primitive has a Thickness property, try to create a Rectangle2D, set only a SolidColorBrush on the Border and change the Thickness (you have to set a roundRadius also, there's a bug right now where Border is only supported on Rectangle2D when there's a roundRadius).

I saw the border already, that is great but i would need a real line primitive with a start and end point or even better a path.
Currently i'm forced to overlay my GL canvas with a SVG or 2D canvas.

[Nockawa]

1 hour ago, Kesshi said:

I saw the border already, that is great but i would need a real line primitive with a start and end point or even better a path.
Currently i'm forced to overlay my GL canvas with a SVG or 2D canvas.

Yep, we will do it, Line, Bezier, Spline, things like that, definitely.

[Wingnut]

Hi guys!  I had to jump-in, too.

http://babylonjs-playground.com/#2AVSFH#7

@NasimiAsl... notice I was able to change the text... via lines 25-27  (disposed old panel, created new).  Not sure if that is the approved way.

Other than that, I tried a little x-scrolling in lines 20-24 render loop... failed.  I'm still learning, though.    I STILL haven't read the docs.  Pathetic, eh?  If I read the docs, all the fun of guessing... is gone.  hah

Of course, I am going to want 2D animation in this thing... beyond our wildest dreams.  Rainbow text, dancing text, sine wave text, text around a ring, spinning, every char a different font if wanted, vertical scrolls, fly-ins, fade-outs, star wars scroll, fly at the camera head-on, fly from behind camera... how's that for a pile of ridiculous?    Oh yeah, and pulse to the music, of course.  heh

But I guess those are all "effects" that can be added later.  They are probably not part of "core" 2dCanvas.  Lots of fun ahead, with this baby, eh?  *nod*

[NasimiAsl]

r u type this  ' A long, long time ago... I can still remember... how that music... use to make me smile. And I new if I had my chance... that I could make those people dance, and maybe... they'd be happy... for awhile.' for make test ?????? @Wingnut

and dispose that   and type 'new Text' 

 

[Wingnut]

I was going to try to x-scroll the text across the panel.  I needed some long text, so I typed some song lyrics that I have memorized.  (American Pie) 

And, I made a mistake... new/knew. 

Good testing text for scrolling, right?  PARTY!

[Dal]

@Nockawa This is pretty big news! It will be really cool to have a full 2d system.

Two problems I've found so far with other people's attempts to do text and buttons inside a GL canvas are:

- They suck on 4k/Retina screens. They usually don't consider what happens when you have a higher pixel density than the 1080p screen they were made on.
- They don't work for people with disabilities - no default buttons, tab context, screen reader hints etc.
- They can't be read or indexed by search engines, so any awesome 3d web site doesn't show up in Google.

Just some points to think about.
In theory the first can be solved just by working purely in vector functions, or making any bitmap images 4x the pixel size and resizing them down for HD/SVGA screens.
The second two can in theory be solved by using hitregions and outputting alt text inside the <canvas> tags on the page: https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Hit_regions_and_accessibility

[Nockawa]

2 hours ago, Dal said:

@Nockawa This is pretty big news! It will be really cool to have a full 2d system.

Two problems I've found so far with other people's attempts to do text and buttons inside a GL canvas are:

- They suck on 4k/Retina screens. They usually don't consider what happens when you have a higher pixel density than the 1080p screen they were made on.
- They don't work for people with disabilities - no default buttons, tab context, screen reader hints etc.
- They can't be read or indexed by search engines, so any awesome 3d web site doesn't show up in Google.

Just some points to think about.
In theory the first can be solved just by working purely in vector functions, or making any bitmap images 4x the pixel size and resizing them down for HD/SVGA screens.
The second two can in theory be solved by using hitregions and outputting alt text inside the <canvas> tags on the page: https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Hit_regions_and_accessibility

@Dal

1. I didn't tried on 4K/Retina devices, but I use HTML to render each letter you will use in the Canvas2D, So if you specify a font in "pt" units I think (because I'm far from being expert on the matter) than it will be independent from the screen DPI, then it should draw big letter on 4K/Retina devices. I compute the size required for the FontTexture based on the height of a line and the width of the 'W' character (couldn't find something more accurate). So it should just create a bigger texture for these kind of display. But I'd glad if someone could check for it. About text, right now the result is not as good as expected/should be, I have anti-aliasing/blending issues, I'll have to solve them quickly if I want the text to look always good whatever its background is.

2. Well, these features are more part of an incoming GUI Library based on the Canvas2D, the primary intent is to build UI for gaming or pro apps, I honestly how far I will go, writing such thing takes time for a single guy, but I like it. I'll try to bring up the topic of accessibility when the time to build the GUI library will come. If there're cheap things to do that can help, I will.

3. I think relying an HTML is better on this case. The intent is not to write another HTML, so interaction with the content should be limited to a real-time one with the User. Additions can come later, but for now I have my hands full!

You suggestion about the HitRegions and Alt Text is a very good idea! Maybe a future contribution from you!?

For now I'm finished the basics of Interaction mode, there's something wrong I commit yesterday night (if you go to the Playground, you'll see the example are not rendered the way they're supposed to...).
It made me reevaluate my dev approach, the feature is quite big, so I need more testing/validation stuffs, so I'm going to work on that. I can't commit regressions everyday!

 

[Dal]

5 minutes ago, Nockawa said:

@Dal

1. I didn't tried on 4K/Retina devices, but I use HTML to render each letter you will use in the Canvas2D, So if you specify a font in "pt" units I think (because I'm far from being expert on the matter) than it will be independent from the screen DPI, then it should draw big letter on 4K/Retina devices. I compute the size required for the FontTexture based on the height of a line and the width of the 'W' character (couldn't find something more accurate). So it should just create a bigger texture for these kind of display. But I'd glad if someone could check for it. About text, right now the result is not as good as expected/should be, I have anti-aliasing/blending issues, I'll have to solve them quickly if I want the text to look always good whatever its background is.

2. Well, these features are more part of an incoming GUI Library based on the Canvas2D, the primary intent is to build UI for gaming or pro apps, I honestly how far I will go, writing such thing takes time for a single guy, but I like it. I'll try to bring up the topic of accessibility when the time to build the GUI library will come. If there're cheap things to do that can help, I will.

3. I think relying an HTML is better on this case. The intent is not to write another HTML, so interaction with the content should be limited to a real-time one with the User. Additions can come later, but for now I have my hands full!

You suggestion about the HitRegions and Alt Text is a very good idea! Maybe a future contribution from you!?

For now I'm finished the basics of Interaction mode, there's something wrong I commit yesterday night (if you go to the Playground, you'll see the example are not rendered the way they're supposed to...).
It made me reevaluate my dev approach, the feature is quite big, so I need more testing/validation stuffs, so I'm going to work on that. I can't commit regressions everyday!

 

Yep could be. I think we solve 2 problems with alt text etc. because it makes it accessible for people with sight or mouse difficulties but also in the process, search engines can "see" that alt text stuff and index it. So its good to figure out a way that it can be read and navigated by code and not just by the eyes

 

[meteoritool]

On 17 mai 2016 at 3:08 PM, Nockawa said:

I will submit later on today a Pull Request where Interaction is supported

Very Cool ! Will it be something like :  canvas2.actionManager = new BABYLON.ActionManager(scene); ???
I haven't found a way to interact with it so far, is there gonna be additions in the classes library on the doc.babylonjs.com ? 

[Nockawa]

Just now, meteoritool said:

Very Cool ! Will it be something like :  canvas2.actionManager = new BABYLON.ActionManager(scene); ???
I haven't found a way to interact with it so far, is there gonna be additions in the classes library on the doc.babylonjs.com ? 

doc.babylonjs.com is about the current RTM so you currently don't have documentation about Canvas2D which is for the 2.4 and currently available in the beta release.
if you follow instruction here you should be able to build a local doc for the 2.4 beta. I've already documented the main classes, but still, there's always room for improvement.

as soon as I've commit something that fully works (right now I'm banging my head on the walls because of hierarchy/origin and things like that, I thought I had it working but it was an unfortunate coincidence), I will write a tutorial about it and it will be a good time to also talk about the Observable pattern we introduced for the 2.4.

[Nockawa]

Hello people,

I just wanted to let you know what we're about to integrate the latest version of Canvas2D. What's new?

• Lots of little bug fixes, I hope everything will be ok with the origin property, nesting primitives, the text render is way much better now than before.
• Interaction is supported! There's an pointerEventObservable property in Prim2DBase for you to be notified about many things concerning interaction with a pointer (mouse, touch, pen). I've also added the support of the ActionManager, it's the same as Mesh and Sprite. I support all triggers exception Intersection and KeyUp/Down.
• Animation is supported too! You have the animations property in the base class of a Primitive for you to add animation the exact same way you would do for the scene objects.

I'm preparing new playgrounds, more online doc/tutorial.

What's next: text and group alignment features to ease our lives, then new types of primitives I guess.

[jerome]

@Nockawa about the 2D lines and curves, we already have some curve maths functions in BJS : http://doc.babylonjs.com/tutorials/How_to_use_Curve3 

[Samuel Girardin]

@Nockawa, all canvas2d demo on the playground throw this error :  Can't use Canvas Background with the caching strategy TOPLEVELGROUPS, 

Got the same thing at home with the latest snapshot of bjs TS sources.