Jump to content

Canvas2D Main Post


Nockawa
 Share

Recommended Posts

@Samuel Girardin I've published a new version of the Canvas2D yesterday and forgot to tell about it on the forum. Based on the feedback of the bjs core team I've changed the signature to create the Canvas/Primitives.

All playgrounds where updated. You can find the list here: http://doc.babylonjs.com/overviews/Canvas2D_Home

Note that I'm massively working on documentation right now, it should be online in less than a day, I will make an announcement here.

Link to comment
Share on other sites

Just now, Samuel Girardin said:

@Nockawa , on my side I can't have a playground working on this page http://doc.babylonjs.com/tutorials/Using_the_Canvas2D 

They all used the old achitecture. I'm not sure  I understand if you already updated this playgrounds or not ? 

 

CTRL-F5 to hard refresh your Web Browser, you certainly have in cache the old version of babylon.js file.

Link to comment
Share on other sites

Hello guys, time for an update!

As @Samuel Girardin noticed yesterday, things have changed in the latest deployed version of the Canvas2D. There are breaking changes in the API: concerning the way to create Canvas and Primitives.
It was a good feedback from people of the core team and it wasn't too late to do...

You should be able to create things way more easily now.

Including many bug fixes and little features improvements we have two new primitives: Ellipse2D and Lines2D. I worked hard to dev a nice Lines2D primitive and I hope you will like it!

But there's more, you have now a new set of Overview Documentation, the main entry page is here: http://doc.babylonjs.com/overviews/Canvas2D_Home
From this page you will be have to navigate to all the overview related pages I've wrote for the Canvas2D feature. 17 pages so far!
The home page also reference all the playgrounds I've made so far to illustrate the feature.

So just keep in mind: http://doc.babylonjs.com/overviews/Canvas2D_Home is your entry point, there's also a reference documentation (which is now online for the 2.4) for each class and their public/protected methods, it's not completed yet but I would say I've done 80% of the job. (for now the class reference wasn't built with the latest bjs file, so you still have the old style of primitive creation).

By the way, I don't know if you people noticed, but each time I also update the first post of this thread to make it still up to date.

Enjoy!

Link to comment
Share on other sites

@Nockawa, 

So I'm trying learning canvas2d. I find some strange behavior bug?

If you look at this PG (one of your doc, the one with interaction)  http://babylonjs-playground.com/#1ONKPJ#1

If you comment line 24 ( //buttonRect.roundRadius = 10;). Console throw webgl errors. 

But if you comment line 24 & 27 (roundRadius for the 2 buttons). It works. Any Idea ?

 

Link to comment
Share on other sites

@Nockawa,  one other thing... You're going to hate me. 

I don't really understand how scale parenting is working. If you look at this playground : http://www.babylonjs-playground.com/#TF5NH#2

I have a canvas2 at size 100,100 parenting a  red rectangle 2d a w:100 h:100.  I thought getting my rectangle over the whole canvas ? To get it over the whole canvas I must use myrectangle.scale = 2. Is that a normal behavior ?

edit : got it ! an primitive origin is centered... :o My bad..

 

Link to comment
Share on other sites

1 hour ago, Samuel Girardin said:

@Nockawa, 

So I'm trying learning canvas2d. I find some strange behavior bug?

If you look at this PG (one of your doc, the one with interaction)  http://babylonjs-playground.com/#1ONKPJ#1

If you comment line 24 ( //buttonRect.roundRadius = 10;). Console throw webgl errors. 

But if you comment line 24 & 27 (roundRadius for the 2 buttons). It works. Any Idea ?

 

Looks like a bug to me! :)

I'll take a look asap and get back to you, but I have an idea of the cause... Thanks for reporting!

 

Link to comment
Share on other sites

1 hour ago, Samuel Girardin said:

@Nockawa,  one other thing... You're going to hate me. 

I don't really understand how scale parenting is working. If you look at this playground : http://www.babylonjs-playground.com/#TF5NH#2

I have a canvas2 at size 100,100 parenting a  red rectangle 2d a w:100 h:100.  I thought getting my rectangle over the whole canvas ? To get it over the whole canvas I must use myrectangle.scale = 2. Is that a normal behavior ?

edit : got it ! an primitive origin is centered... :o My bad..

 

I don't hate you, it's quite the opposite, you use, you ask questions, you find bugs! that's cool ! :)

Yep, only the Canvas2D has an origin of 0,0. All primitives/group have 0.5,0.5.
Take a look at this doc: http://doc.babylonjs.com/overviews/Canvas2D_Origin

Link to comment
Share on other sites

@Samuel Girardin

Well, on my machine (I should say my browser), it seems to work...

So, could you tell my which browser (version), which OS you use, if the Instanced Array extension is supported or not. Thanks!

(btw, I found another bug, thinking it was the one you have, but looks like your is different... lol, I'd rather laugh about it)

Untitled.png

Link to comment
Share on other sites

4 minutes ago, Samuel Girardin said:

@Nockawa  webgl error on chrome  51.0.2704.63  w10 I'm on my i5 4600 gpu (all extensions are set to yes). Edge and FF no webgl error but still the weird behavior. Will swicth to my graphic card 970 to see what's happen.  

The weird behavior is no text, right? If so tell me because that's ok, that's the second bug I'm talking about. Somewhat there's a depth buffer issue where all the roundedRect overdraw the text (which should have a greater Z and behing above), I'm also investigating this one.

By the way, I also checked on Chrome (your version), W10, but with a Radeon graphic card.

Link to comment
Share on other sites

Just now, Samuel Girardin said:

@Nockawa just testing on my laptop with a  8670 radeon. Only webgl error on chrome  the weird behavior is no text for the three browsers.

The no text is something else, if you put back the first rect rounded, everything will be displayed. it's a separate issue.

Concerning the error you have it's related (I think) to the Instanced Array binding, I'm investigating further, maybe I pass a count of instance to render that is greater than the buffer contains and it doesn't yell on many browser except your case.

Link to comment
Share on other sites

Bug found...that's what I was talking about, when I render all the text instances, the hidden letters are taking in the count of the instances to render, which is incorrect because I bind data only for the letters that are actually visible!

Thanks to you I've found two bugs...but none of them are solved so far...It's time to bed for me 2am is my reasonable limit! :)
Tomorrow I was on them asap.

Link to comment
Share on other sites

Just now, Samuel Girardin said:

http://babylonjs-playground.com/#UVDG0#6  still webgl error with no text create on chrome. Same for me here it s 3 am

I guess it's the same because of the hidden rect.

Make them all visible and tell me you don't have errors this time! :) (still with no text, or all text visible). Another Frenchy! :)

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