Nockawa

Canvas2D Main Post

291 posts in this topic

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

adam and meteoritool like this

Share this post


Link to post
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.

Share this post


Link to post
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!

Share this post


Link to post
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 ?

 

Share this post


Link to post
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..

 

Share this post


Link to post
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!

 

Share this post


Link to post
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

Share this post


Link to post
Share on other sites

@Samuel Girardin there's definitely something's wrong but I don't have webGL thrown in the console, I've checked on IE, FF, Chrome.

That would help if you could post them.

What I have it the text being drawn only in the first green rect and not in the 5 other ones. (which raised a big wtf! in my mind).

Share this post


Link to post
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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
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.

Share this post


Link to post
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.

Share this post


Link to post
Share on other sites

@Samuel Girardin can you do a test for me please? remove all the "Text2D.Create" in order to have no text primitive rendered and tell me if you still have the WebGL error or not. That way I'll know if the error is coming from the text or the rect.

Thanks!

Share this post


Link to post
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.

meteoritool likes this

Share this post


Link to post
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! :)

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!


Register a new account

Sign in

Already have an account? Sign in here.


Sign In Now

  • Recently Browsing   0 members

    No registered users viewing this page.