Canvas2D Main Post

[aWeirdo]

This will make so many things SO much easier!
Simply amazing. 

Well done!

[Samuel Girardin]

2 hours ago, Nockawa said:

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!

true ! no error

[Nockawa]

Ok bottom lines for this two issues:

1. The WebGL error is definitely weird and I couldn't find anything, I'll keep looking with that in mind, but as it's a very isolated issue (and it doesn't impact the result), it's not a priority
2. The Text is not showing because I realized after a long investigation that it use special blending to render nicely and the Depth Buffer Write is disabled with this mode. When you set a first rect without Round Edges it changes the order the primitives are drawn and the rounded rect are drawn AFTER the text, which override them.

Conclusion for issue 2.:

I don't support right now a proper rendering of transparent primitive, I had it planned for 2.5 but I can quickly realized it can't be delayed that much, so I was going to work on SimpleLayout/Alignment of Primitives to ease positioning and the Polygon primitive, but I will focus first on making the rendering engine fully compliant with transparent primitives. It's not a little thing to do, so let's go to work!

[Nockawa]

A quick update: I've made great progress on supporting opaque/alphaTest/transparent rendering of primitives.

I would say it's 70% done, the way I handle it will prove to be pretty efficient I think for this kind of purpose: the z order doesn't change that much in 2D Engine, contrary to 3D engine when a small rotation of the camera can reorder a lots of thing. So I rely on time coherency, I track change and update a list of continuous TransparencySegment, which can be invoked in one call when Instanced Array is supported. Updates due to change is pretty well optimized as I don't have to reevaluate/rebuild the whole list of transparent object, which I believe is good regarding GC and CPU. But everything has a cost and supporting all the cases is hurting my brain a little, but I'll get it done hopefully tomorrow.

@Samuel Girardin I believe I've found and fix your bug, a stupid mistake was laying somewhere in the shader uniform wiring. Please note that when you activate GL Inspector the Instanced Array extension is no longer supported, which falls back the whole rendering engine to use the Instanced-less path. And I believe the bug was only in this path. I cross finger it's the one you have, I can't share a release so far.

I still have several features left to do, hoping they will meet the deadline @Deltakosh mentioned elsewhere in this forum. If the 2.4 is delayed I will definitely be the culprit! To my defense I've included most of the feature I initially planed to dev for the 2.5 in the 2.4...It's quite of extra work.

[ivan.popelyshev]

Awesome!

Ok, PIXI strikes back: http://gameofbombs.github.io/pixi-bin/

Now we have z-index, z-order (they are different), static transforms (dont re-calculate matrices if dont need to), SIMD (gl-matrix thank you!)

Experimental fork for pixi: https://github.com/gameofbombs/

Outdated demo with big number of spine meshes with deformations: http://monsterisland.chimeracompanygames.com/lux-demo/index.html (use mouse + QE)

Thread: 

 

[Nockawa]

well, I wouldn't say the intent was to compete against them!

AFAIK pixi.js is supporting HTMLCanvas and WebGLCanvas, which is not the case of Canvas2D which is purely WebGL... The flexibility of the GPU and not having to support HTMLCanvas ease my life a lot.

[ivan.popelyshev]

31 minutes ago, Nockawa said:

well, I wouldn't say the intent was to compete against them!

AFAIK pixi.js is supporting HTMLCanvas and WebGLCanvas, which is not the case of Canvas2D which is purely WebGL... The flexibility of the GPU and not having to support HTMLCanvas ease my life a lot.

Well I also had no intent of competing, I think its awesome that we both made a step into our respective fields of experience almost at the same time  Of course its not possible to make 3d on canvas without some kind of software renderer, and my transform3d works only for WebGL.

[jerome]

@Nockawa

just some questions about the canvas2d in the world space : 

- what is the default orientation : is it facing to -infinite along the Z world axis ? my camera is static and maybe not looking at the right direction

- I suppose there's no side orientation (for now) property, is there ?

- how would you suggest to make a transparent background : color4(0, 0, 0, 0) ?

[Wingnut]

Wow!  Moscow!  That SO cool!  (Wingy pees a little.)  I sure wish I could afford to visit there... for about 5 years, so I could see it all.  sigh.  I'd be glad to do the same with Dublin, too.    Road trip!

Anyway, quick report to Nockawa...  @meteoritool made a post with an early PG demo testing basic Canvas2d.  It now has an error.  Not sure if it is pertinent, but I'm reporting it to Canvas2D Central (this thread) just the same.  No solution or replies necessary...  Over and out. 

[Nockawa]

37 minutes ago, jerome said:

@Nockawa

just some questions about the canvas2d in the world space : 

- what is the default orientation : is it facing to -infinite along the Z world axis ? my camera is static and maybe not looking at the right direction

- I suppose there's no side orientation (for now) property, is there ?

- how would you suggest to make a transparent background : color4(0, 0, 0, 0) ?

The samples are all listed in the home page of the overview documentation (the formatting is messed up since the last change on the .md parsing btw)

The home doc: http://doc.babylonjs.com/overviews/Canvas2D_Home

The PG:

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

Transparency is certainly not supported right now, one more stuff for my todo! yey!

 

[Nockawa]

58 minutes ago, ivan.popelyshev said:

Well I also had no intent of competing, I think its awesome that we both made a step into our respective fields of experience almost at the same time  Of course its not possible to make 3d on canvas without some kind of software renderer, and my transform3d works only for WebGL.

wow, you're the guy behind pixi.js !? congratulations! well, I'm kind of new to the whole web world...

and to answer you, yep, I think that's great too! in my case it all started up when I realized I couldn't render text properly and here I am 6 or 7 weeks later... lol
there's clearly lots of work left to be done, but it's fun! it's the first time I work on a 2D Engine
 

[Nockawa]

44 minutes ago, Wingnut said:

Wow!  Moscow!  That SO cool!  (Wingy pees a little.)  I sure wish I could afford to visit there... for about 5 years, so I could see it all.  sigh.

Anyway, quick report to Nockawa...  @meteoritool made a post with an early PG demo testing basic Canvas2d.  It now has an error.  Not sure if it is pertinent, but I'm reporting it to Canvas2D Central (this thread) just the same.  No solution or replies necessary...  Over and out. 

Yes, I think I talked him about that, the API signature changed for the way you create your things.

I've fixed it: http://www.babylonjs-playground.com/#1N2CH7#1

@meteoritool check for it

[adam]

43 minutes ago, Nockawa said:

wow, you're the guy behind pixi.js !? congratulations!

This is the guy who created Pixi.js:

https://twitter.com/doormat23/

https://www.patreon.com/user?ty=h&u=2384552

[Nockawa]

37 minutes ago, adam said:

This is the guy who created Pixi.js:

https://twitter.com/doormat23/

https://www.patreon.com/user?ty=h&u=2384552

lol, I'm so lost in all these things...good for me to know, thanks!

[ivan.popelyshev]

4 hours ago, Nockawa said:

wow, you're the guy behind pixi.js !? congratulations!

No, I'm just using it for 1.5 years. My own renderer was too clumsy and I switched to pixi, but i still havent ported all features i made for gameofbombs.com  now I'm moving all of its features to pixi.js . I just adore 2.5D games like Rayman and Ori  

[meteoritool]

@Wingnut @Nockawa Thx for checking ;-) 

In my personal case, I could display Canvas2D things ! 
The real issue for me is that I wanted to use actions, and, I don't know if it's the same for you (I'm on OSX) but there is no actions at all on my side :/

The demos from the docs with actions don't work on my computer :/
http://doc.babylonjs.com/overviews/Canvas2D_Home
The canvas2D displays right, but no actions are happening at all, nothing when I click or mouse-over :/
Am I the only one ? The be honest I come here almost everyday looking for how it evolves  ! I have given up bGUI a little too soon :/ now I'm on hold >_<

I can only bow and humbly show gratitude =)

[Nockawa]

7 minutes ago, meteoritool said:

@Wingnut @Nockawa Thx for checking ;-) 

In my personal case, I could display Canvas2D things ! 
The real issue for me is that I wanted to use actions, and, I don't know if it's the same for you (I'm on OSX) but there is no actions at all on my side :/

The demos from the docs with actions don't work on my computer :/
http://doc.babylonjs.com/overviews/Canvas2D_Home
The canvas2D displays right, but no actions are happening at all, nothing when I click or mouse-over :/
Am I the only one ? The be honest I come here almost everyday looking for how it evolves  ! I have given up bGUI a little too soon :/ now I'm on hold >_<

I can only bow and humbly show gratitude =)

I need this feedback, because unfortunately I can't test on everything, but I extend my testing and some buddy of bjs will help too, we stay in touch.

Thanks!

[Nockawa]

1 hour ago, meteoritool said:

@Wingnut @Nockawa Thx for checking ;-) 

In my personal case, I could display Canvas2D things ! 
The real issue for me is that I wanted to use actions, and, I don't know if it's the same for you (I'm on OSX) but there is no actions at all on my side :/

The demos from the docs with actions don't work on my computer :/
http://doc.babylonjs.com/overviews/Canvas2D_Home
The canvas2D displays right, but no actions are happening at all, nothing when I click or mouse-over :/
Am I the only one ? The be honest I come here almost everyday looking for how it evolves  ! I have given up bGUI a little too soon :/ now I'm on hold >_<

I can only bow and humbly show gratitude =)

@meteoritool after an early investigation looks like it doesn't work on device with a big screen resolution (like retina screen or like that), there's a pixel ratio stuff I'm certainly missing which make the mouse coordinates totally wrong.

I've fill a bug on my todo list and will solve it by the end of the week (or asap if possible but right now I'm stuck on transparency, a bug I can't find...)

[JohnK]

Absolutely love the idea of Canvas2D and the brilliant and rapid work you have done with it @Nockawa just find the name confusing with <canvas> and I think one or two others have as well. Is there any chance at this stage of doing a rename as Screen2D or Flatscreen or Screenspace. If not possible then the work you have done certainly overrides any name problems. Keep up the good work. Sorry to be a bit of a pain.

[Nockawa]

3 minutes ago, JohnK said:

Absolutely love the idea of Canvas2D and the brilliant and rapid work you have done with it @Nockawa just find the name confusing with <canvas> and I think one or two others have as well. Is there any chance at this stage of doing a rename as Screen2D or Flatscreen or Screenspace. If not possible then the work you have done certainly overrides any name problems. Keep up the good work. Sorry to be a bit of a pain.

Hi @JohnK, thanks for the compliments, well, I wish it could be less buggy right now, I hope I could solve most of them by the end of the week..

Totally agree with you, the name is confusing many people thinking of it as an extension of HTMLCanvas. To be honest I don't have a better name because that's what is it: a drawing canvas. From this stage it's still possible to change the name, but the cost won't be cheap, because I've already wrote a lot of documentation. I would consider it only it 1) we came with a better name and 2) if @Deltakosh approves the change.

Right now I can't call it Screen2D, FlatScreen or Screenspace because it wouldn't work for world space canvas, like this one: http://babylonjs-playground.com/#1BKDEO#7

 

[adam]

I'm good with Canvas2D.  If you wanted to change it though, Graphics2D would be another possibility.

[jerome]

Or we can all adjust to the current name "Canvas2D", even if confusing at first read, as it is already richly documented and because, as the father of this baby, you have at least the choice to choose its name

[JohnK]

In the end if it stays as Canvas2D we will all get used to it and probably wonder why there was confusion in the first place. Though it could still be somewhat confusing for newcomers.

I was thinking of a screen like a cinema screen that you might create within your 3D world and had not give it any though as the actual screen I am looking at when using my computer.

So I would have something like

The main types

Screen2D

The main class, is a rectangle that displays 2D content in the same way as a movie screen. A Screen2D can be represented in CanvasSpace (above the 3D Scene, coplanar to the canvas) or WorldSpace, represented as a rectangle inside the 3D Scene.

Should you and Deltakosh decide to change then I would not have made the suggestion without volunteering to help make the changes in the documentation.

Anyway congratulations once more on a job well done and hope all goes well with the debugging.

 

EDIT and I agree with Jerome the honour of naming should be yours.

[jerome]

Actually, I just said that because, well, you know... with children, at the beginning, you still believe that you rule everything, you choose the name, what they should do, etc

and finally, they do want they want on their side

[adam]

19 minutes ago, JohnK said:

displays 2D content

Display2D is another good one