Canvas2D Main Post

[Nockawa]

9 minutes ago, Ner said:

@Nockawa

When I use BABYLON.Sprite2D , zOrder doesn't work,,but it works in BABYLON.Text2D & BABYLON.Rectangle2D.

How can I fix it ?

Hello, surprising, do you have a Playground as an example?

I will resume coding today on bjs, I may not work on your issue right now but I'm back!

[Nockawa]

@FlashyGoblin ok, do you still have an issue with transparency and WorldSpaceCanvas? I saw this: http://www.babylonjs-playground.com/#1LXS2T#1  and looks like this one works.

Can you make me a recap of the current situation?

Thanks

[Ner]

13 hours ago, Nockawa said:

Hello, surprising, do you have a Playground as an example?

I will resume coding today on bjs, I may not work on your issue right now but I'm back!

here: http://www.babylonjs-playground.com/#TBGCY#1

[FlashyGoblin]

On 7/26/2016 at 3:28 PM, Nockawa said:

@FlashyGoblin ok, do you still have an issue with transparency and WorldSpaceCanvas? I saw this: http://www.babylonjs-playground.com/#1LXS2T#1  and looks like this one works.

Can you make me a recap of the current situation?

Thanks

@Nockawa It is still happening. This image should explain things more. 

(I hope your move when pleasantly!!) 

@RaananW

 

[Nabroski]

i think he just use the worng texure sampling mode
also the texture is 512x365 witch already leads to distortion on my big screen, but who knows. i just here to read the comments

Canvas2D Pictures and Babylonjs looks different, yes

 

http://babylonjs-playground.com/#NMZMO#7

Also again a timing issue, i don't care, maybe someone else
http://babylonjs-playground.com/#NMZMO#1
http://babylonjs-playground.com/#NMZMO#2

 

 

 

[Nockawa]

8 hours ago, Nabroski said:

i think he just use the worng texure sampling mode
also the texture is 512x365 witch already leads to distortion on my big screen, but who knows. i just here to read the comments

Canvas2D Pictures and Babylonjs looks different, yes
http://babylonjs-playground.com/#NMZMO#0

Also again a timing issue, i don't care, maybe someone else
http://babylonjs-playground.com/#NMZMO#1
http://babylonjs-playground.com/#NMZMO#2

 

 

 

One of the differences between a texture applied in a StdMaterial on a Mesh and a Sprite2d in a WorldSpaceCanvas (WSC) is that lighting is disabled. This is why your first PG shows differences between the two.

Canvas2D can't be subject to lighting, well, it's at least the way I saw it back then I when I didn't WSC.

As for the two other PG that are still failing...well... I have to work with someone else of the Core Team to find that's wrong because it's out of my league...

[Nabroski]

Hello @Nockawa

just an observation, maybe its helpful, i run in no errors if i load a texture first on a mesh(like ground) from Babylons then the with same texture on  canvas2d
maybe kind of same thing, as with text.dispose() ?

http://babylonjs-playground.com/#NMZMO#4

http://babylonjs-playground.com/#NMZMO#5

You already did a great job, love Canvas2d!


 

[Nockawa]

3 minutes ago, Nabroski said:

Hello @Nockawa

just an observation, maybe its helpful, i run in no errors if i load a texture first on a mesh(like ground) from Babylons then the with same texture on  canvas2d
maybe kind of same thing, as with text.dispose() ?

http://babylonjs-playground.com/#NMZMO#4

You already did a great job, love Canvas2d!


 

Your PG is not compiling for me, is that the error you're talking about?

Yes, there's certainly an issue with resource sharing somewhere, this is something that I'm not really friendly with bjs yet...

[Nabroski]

Yes, Canvas2d has no DefaulMaterial that loading in the Background every time Babylonjs starting.

Babylon get stdtexture -> yes cancas2d get texure-> second call will be always ignored
 

 

[Nockawa]

4 minutes ago, Nabroski said:

Yes, Canvas2d has no DefaulMaterial that loading in the Background every time Babylonjs starting.

Babylon get stdtexture -> yes cancas2d get texure-> second call will be always ignored
 

 

Sorry but I'm kind of lost. Do I respect the default behavior or if there's something I'm doing wrong?

[Nabroski]

 

Canvas2d not loading Text befor 3Weeks, this is how i find out, that i hat to use, scene.executeWhenReady(){}

the defaultmaterial of babylonjs, slow things down
http://babylonjs-playground.com/#NMZMO#6

I dont know, just an observation. 

Have a nice day.

 

[Nabroski]

the last one, i promise, take a look here

https://github.com/BabylonJS/Babylon.js/blob/9019f5d151943212e9602c1a6ed5b13800ed6ab2/src/Tools/babylon.loadingScreen.js#L68

https://github.com/BabylonJS/Babylon.js/blob/9019f5d151943212e9602c1a6ed5b13800ed6ab2/src/Loading/babylon.sceneLoader.js#L228

this removes the first image in cache
http://www.babylonjs-playground.com/#AOS84#1

[Nockawa]

1 hour ago, Nabroski said:

the last one, i promise, take a look here

https://github.com/BabylonJS/Babylon.js/blob/9019f5d151943212e9602c1a6ed5b13800ed6ab2/src/Tools/babylon.loadingScreen.js#L68

https://github.com/BabylonJS/Babylon.js/blob/9019f5d151943212e9602c1a6ed5b13800ed6ab2/src/Loading/babylon.sceneLoader.js#L228

this removes the first image in cache
http://www.babylonjs-playground.com/#AOS84#1

I know he's busy but maybe @Deltakosh can help? because I'm lost.

[FlashyGoblin]

On 7/27/2016 at 4:10 PM, FlashyGoblin said:

@Nockawa It is still happening. This image should explain things more. 

(I hope your move when pleasantly!!) 

@RaananW

 

@Nockawa Were you able to find any possible leads on the transparency/alpha issue? Let me know if I can assist or provide any additional information. 

[Nockawa]

On 05/08/2016 at 4:33 AM, FlashyGoblin said:

@Nockawa Were you able to find any possible leads on the transparency/alpha issue? Let me know if I can assist or provide any additional information. 

Hello,

@FlashyGoblin Here's what I can tell after looking at your PG:

Sprite2d always enable AlphaBlending, I use the Alpha Channel of the Texture to discard pixel if the value if < 0.05. When I opened the file of your texture and displayed only the alpha channel, most of the picture was black all the parts that are actually transparent in your PG to be more precise.

So I'd say the current result is "as expected". Now, we all agree that "we don't care" if that's expected or not!

I still don't understand exactly what you would expect. You would like the final result to look more like the picture if we exclude its alpha channel? You would like a setting for Sprite2d to specify: "I don't want to use transparency", and/or "I don't want to use the Alpha Channel of the texture" ?

Tell me more, I'm open! Tell me what you initially expected the result to be and what you would like to do/have with Sprite2d in this case.

[KevinBLT]

Hey,

just a small question. What am I doing wrong, that text is not filled in my case?

var text2D_X = new BABYLON.WorldSpaceCanvas2D(scene, new BABYLON.Size(sizeTX, 12), {
  id: "Measure - " + sizeX,
  worldPosition: new BABYLON.Vector3(0, 0, BB.minimumWorld.z - 6),
  worldRotation: BABYLON.Quaternion.RotationYawPitchRoll(0,Math.PI/2,0),
  enableInteraction: true,
  children: [
    new BABYLON.Text2D(checkRound(sizeX).toString() + "cm", {
      fontName        : "6pt Arial",
      marginAlignment : "h: center, v: bottom",
      fontSuperSample : true,
    }),
  ]
});

 

Thanks 

[FlashyGoblin]

6 hours ago, KevinBLT said:

Hey,

just a small question. What am I doing wrong, that text is not filled in my case?

var text2D_X = new BABYLON.WorldSpaceCanvas2D(scene, new BABYLON.Size(sizeTX, 12), {
  id: "Measure - " + sizeX,
  worldPosition: new BABYLON.Vector3(0, 0, BB.minimumWorld.z - 6),
  worldRotation: BABYLON.Quaternion.RotationYawPitchRoll(0,Math.PI/2,0),
  enableInteraction: true,
  children: [
    new BABYLON.Text2D(checkRound(sizeX).toString() + "cm", {
      fontName        : "6pt Arial",
      marginAlignment : "h: center, v: bottom",
      fontSuperSample : true,
    }),
  ]
});

 

 

Thanks 

Set the defaultFontColor param.

new BABYLON.Text2D(checkRound(sizeX).toString() + "cm", {
      fontName        : "6pt Arial",
      marginAlignment : "h: center, v: bottom",
      defaultFontColor: new BABYLON.Color4(1,0,0,1),
      fontSuperSample : true,
})

In this case, we set it to red. 

[KevinBLT]

Thank you.

I didn't find this in the documentation 

[Nockawa]

On 11/08/2016 at 3:52 PM, KevinBLT said:

Thank you.

I didn't find this in the documentation 

Indeed, the inline doc were referencing the old name which was "defaultColor", I've just made the fix. Thanks for letting me know when you encounter doc issues.

[Nockawa]

New update from Legoland, Billund, Denmark

Hello people, as my profile picture suggests, I'm a big fan of Lego  (and Wall.e too!), so this is the reason why I don't work much these past few days, after the moving out/in and many little things to do, the family took a trip to Denmark for a week of fun near Legoland. But I tried to find the time to work on important issues, even if I know I can't address them all.

The latest is a long ongoing one noticed by @FlashyGoblin concerning transparency of Sprite2d. To make a long story short: I mixed up the implementation of AlphaTest and AlphaBlend (aka Transparency), the result were...well ugly...and you couldn't do things like the one FlashyGloblin ran against. So here are the new ground rules about this:

• I try to behave the same way the 3D Engine StandartMaterial does, so people familiar with it will catch things up pretty quickly. One noticeable difference is that useAlphaFromTexture is true by default.
• There are three render modes: Opaque, Alpha Test and Transparency (Alpha Blend).
  • If you don't use Alpha in a Brush or a Texture and the Opacity is 1, the primitive is rendered in Opaque mode
  • If you use Alpha in a Brush, if you set BaseTexture.hasAlpha to true in a Texture your primitive uses or if the Opacity is not 1, then it will be either Alpha Test if useAlphaFromTexture is false or Transparency if it's true.

Beware: until now you didn't have to set hasAlpha for a Sprite2d to deal automatically with transparency, this is no longer the case! With the latest version your Sprite2d will be rendered as Opaque if BaseTexture.hasAlpha is set to false (which is the default value no matter what your bitmap stores).

To sum up

Text2d is set as a Transparent primitive to ensure a proper blending. Shape2d based primitives will be either opaque or transparent based on Opacity and Alpha in their Brushes. Sprite2d can use the three modes, the default behavior being Opaque if the texture has hasAlpha to false or Transparent if it's set to true and you can use useAlphaFromTexture to switch to Alpha Test.

I come back next Tuesdays, I'll have more time to code then!

[GameMonetize]

Woot..thanks for letting us know.. have fun!

[FlashyGoblin]

Three cheers for @Nockawa !!!!!!

 

Thanks for all your work on this. Looks so good!!!

[Nockawa]

Ok guys, summer holidays is over and it's a good thing for us! I can finally go back to a "normal routine" of contribution.

I pushed a new commit today that address many things around using Scale on the Canvas object directly. I'm lazy so I copy/paste the PR description:

• You can now set a Scale (or ScaleX/Y) to a Canvas2D object, it will render as expected, for every caching strategies.
• At creation time of a ScreenSpaceCanvas you can set a designSize which will be used to compute the Canvas' scale automatically in order for you to specify absolute coordinate in the frame of the designSize (MasterK request)
• Any Cached Renderable Group can have a new GroupCache Behavior: GROUPCACHEBEHAVIOR_NORESIZEONSCALE. When set the cached bitmap for the Group won't be resized when the scale of the group will change, improving performances over rendering quality
• Ellipse, Rectangle are now drawn with a prescale computation to ensure the best result when using high/low scaling
• Prim2DBase has not the actualScale and actualScaleX/Y property that return the accumulated scale of the primitive.
• At their creation, primitives can specify if they should not inherit from the scale of their parent through the dontInheritParentScale setting.

I don't know if many of you will get the GROUPCACHEBEHAVIOR_NORESIZEONSCALE and find a usage, but I thought it was the time or never to do it, so I did. And it works pretty well. I think for mobile gaming it may help to improve the perf by setting/keeping a fixed resolution of what's being rendered into a Cached Renderable Group2D.

The designSize mode was made upon a request from @MasterK and it's really a good idea, I can see the use case from a game UI point of view and I hope it will work the way it should be, otherwise I'll do bug fixing!

If there's no more urgent thing I'll go back on my working list and the next thing (that was already started but paused) is supporting the Device Pixel Ratio, which is another big thing for mobile gaming I think. I will be a breaking change for people who are right now "compensating the lack of this feature", but well, I'm sorry, there's nothing I can do about it except I wished I knew more about HTML few months ago!

I know most of you are still trying to understand how things work with the Canvas2D and don't have time to try and use different Caching Strategies (and then rely on the DONTCACHE mode). Truth is the other modes were pretty bugged, they are less bugged now, but I'm not sure it's working the same.

To solve this matter I'm revamping my whole "Unit Test" project, which was a local thing and not as powerful as it should be. There are so many different combination to test a given Use Case against: the different Caching Strategies, the support of the Instanced Array and with different Device Pixel Ratio values. I have to find time to put a good Unit Test framework and publish the whole stuff once it's done, because I think it will help all of you to discover the many things you can do and how.

When this will be done then I think I'll start the true "why I did this": a GUI Library based on Canvas2D, with the UI Controls you all are waiting for. The foundation of Canvas2D is getting more and more stable so I think it will be soon the right time to start it and it will be the perfect chance to fix dozen of bugs, I'm sure of it!

In the meantime have fun, and please, one last thing: if you have issue: create a new topic in the forum and mention me. Don't use this thread or another unrelated one. It's the best way for me to keep tracking everything. Thanks!

 

[Pryme8]

I know its not canvas2D, but I came up with a modular menu script that adds an overlay automatically to your canvas and hides all pointer events like its not there then communicates with your main script to decide what menus to show.  Its pretty cool, I have it so all the menus are drag and drop able on the canvas and you have full access to dom and css styling for your menu context.  If anyone is interested I can post a demo here at some point.

But for a lot of people who just want an interactive html menu not a dynamic 2d GUI object this is a clean solution.

[Pryme8]

On 8/31/2016 at 0:58 PM, Nockawa said:

Ok guys, summer holidays is over and it's a good thing for us! I can finally go back to a "normal routine" of contribution.

I pushed a new commit today that address many things around using Scale on the Canvas object directly. I'm lazy so I copy/paste the PR description:

• You can now set a Scale (or ScaleX/Y) to a Canvas2D object, it will render as expected, for every caching strategies.
• At creation time of a ScreenSpaceCanvas you can set a designSize which will be used to compute the Canvas' scale automatically in order for you to specify absolute coordinate in the frame of the designSize (MasterK request)
• Any Cached Renderable Group can have a new GroupCache Behavior: GROUPCACHEBEHAVIOR_NORESIZEONSCALE. When set the cached bitmap for the Group won't be resized when the scale of the group will change, improving performances over rendering quality
• Ellipse, Rectangle are now drawn with a prescale computation to ensure the best result when using high/low scaling
• Prim2DBase has not the actualScale and actualScaleX/Y property that return the accumulated scale of the primitive.
• At their creation, primitives can specify if they should not inherit from the scale of their parent through the dontInheritParentScale setting.

I don't know if many of you will get the GROUPCACHEBEHAVIOR_NORESIZEONSCALE and find a usage, but I thought it was the time or never to do it, so I did. And it works pretty well. I think for mobile gaming it may help to improve the perf by setting/keeping a fixed resolution of what's being rendered into a Cached Renderable Group2D.

The designSize mode was made upon a request from @MasterK and it's really a good idea, I can see the use case from a game UI point of view and I hope it will work the way it should be, otherwise I'll do bug fixing!

If there's no more urgent thing I'll go back on my working list and the next thing (that was already started but paused) is supporting the Device Pixel Ratio, which is another big thing for mobile gaming I think. I will be a breaking change for people who are right now "compensating the lack of this feature", but well, I'm sorry, there's nothing I can do about it except I wished I knew more about HTML few months ago!

I know most of you are still trying to understand how things work with the Canvas2D and don't have time to try and use different Caching Strategies (and then rely on the DONTCACHE mode). Truth is the other modes were pretty bugged, they are less bugged now, but I'm not sure it's working the same.

To solve this matter I'm revamping my whole "Unit Test" project, which was a local thing and not as powerful as it should be. There are so many different combination to test a given Use Case against: the different Caching Strategies, the support of the Instanced Array and with different Device Pixel Ratio values. I have to find time to put a good Unit Test framework and publish the whole stuff once it's done, because I think it will help all of you to discover the many things you can do and how.

When this will be done then I think I'll start the true "why I did this": a GUI Library based on Canvas2D, with the UI Controls you all are waiting for. The foundation of Canvas2D is getting more and more stable so I think it will be soon the right time to start it and it will be the perfect chance to fix dozen of bugs, I'm sure of it!

In the meantime have fun, and please, one last thing: if you have issue: create a new topic in the forum and mention me. Don't use this thread or another unrelated one. It's the best way for me to keep tracking everything. Thanks!

 

IF you ever get a stick up your butt and wanna work on a fresh webGL 2d engine designed around the stuff your doing id be down.  Ive got the boilerplate done basically all the core GL interactions and methods like bjs does but tailored for 2d like pixi or phaser.  New engines are actually really hard to program Im finding out, and am actually interested in going to the next step and figuring out how to communicate with the GPU pipeline without webGL (like make my own webGL) but the research on that is very very slow.