Canvas2D Main Post

[Nockawa]

2 minutes ago, jerome said:

ok,

my question, more precisely, was : will this way (to declare for instance var Text2D = BABYLON.Text2D) also work for the objects declared in ths JSON-like array passed as a parameter ?

I suppose yes according to your former answer.

you have to invoke the Primitive's constructor, that's all I know!

I don't think it would work with pure JSON object, but that's beyond my JS skills...all I know is you must call the constructor of the primitive type you want to create an instance of.
In other words, while talking about the matter with @Sebavan we realized we couldn't use it for serialization and it's most likely that we'll use the serialization system of babylon.js to do it.

[Nockawa]

A new feature will be available at the next PR of the Canvas2D, you assign a Node of the 3D Scene (a mesh for instance) as the trackedNode of a Group2D and the group will "follow" the Node.

Useful to display UI on the top a 3D object.

[jerome]

sa race velue !

ça roxe total !!!

[Sebavan]

Hello,

About serialization, that will probably be pretty close but some of the syntax internally does not currently parse children but require them as object like below.

new Text({ text: "Hello World" })

I agree the serialization will have to do it in some ways but let s Nockawa figure it out in 2.5 :-)

[Nockawa]

Few more playground people:

http://babylonjs-playground.com/#EPFQG#1

http://babylonjs-playground.com/#1N9RJY#1

don't forget to CTRL-F5 your web browser if they don't work at the first load.

[FlashyGoblin]

19 hours ago, Nockawa said:

Few more playground people:

http://babylonjs-playground.com/#EPFQG#1

http://babylonjs-playground.com/#1N9RJY#1

don't forget to CTRL-F5 your web browser if they don't work at the first load.

@Nockawa All of your recent playground links are giving an error:

babylon.js:24 Uncaught TypeError: Cannot read property 'flagId' of undefined

 

Seems to have just happened in the last few minutes. Is it a result of @Deltakosh building 2.4 - RC0?

[Nockawa]

9 minutes ago, FlashyGoblin said:

@Nockawa All of your recent playground links are giving an error:

babylon.js:24 Uncaught TypeError: Cannot read property 'flagId' of undefined

 

Seems to have just happened in the last few minutes. Is it a result of @Deltakosh building 2.4 - RC0?

CTRL-F5 the page in your web browser to hard refresh and reload everything. otherwise some cached files will be loaded and you end up with the previous versions of the lib.

[FlashyGoblin]

1 minute ago, Nockawa said:

CTRL-F5 the page in your web browser to hard refresh and reload everything. otherwise some cached files will be loaded and you end up with the previous versions of the lib.

Yep, I did that. Even tried another browser that I never use. Still getting the error.

[Boz]

Same for me

[Nockawa]

1 minute ago, FlashyGoblin said:

Yep, I did that. Even tried another browser that I never use. Still getting the error.

you're right, it's not working anymore...I check with DK

[Nockawa]

ok I found the probable cause, only a new update of the PG will tell if that's what I think it his...weird thing is it's working locally...

I keep you in touch as soon as the playground is updated.

[Nockawa]

ok people, things are fine now!

[FlashyGoblin]

30 minutes ago, Nockawa said:

ok people, things are fine now!

Yep! Thanks for such a quick response! 

[FlashyGoblin]

Having so much fun playing with this in version 2.4!!!!! Awesome job again @Nockawa!!! Can we set (or animate) the alpha of any 2D element in a Canvas2D? Say, if I want to fade in text, or a Sprite2D?

[Nockawa]

55 minutes ago, FlashyGoblin said:

Having so much fun playing with this in version 2.4!!!!! Awesome job again @Nockawa!!! Can we set (or animate) the alpha of any 2D element in a Canvas2D? Say, if I want to fade in text, or a Sprite2D?

Oh, this is a "must have" feature for the 2.5: an "alpha" property for renderable primitives!

I should have thought about this sooner, well. so many things to be done...In the meantime you can animate the alpha channel of the brush, I don't know though what would happen if you try to animate just a component of a brush (say the Red of a Solid Brush). The last resort that would work for sure is by changing brush....

Well, to sum up: you should test and tell me if it works as expected and if not how you expect it to work. thanks!

[Nockawa]

Now the 2.4 is officially out I took the time to finish the overview/tutorial documentation.

I also update the playground and use the BABYLON. prefix everywhere it was needed (which mean I removed the alias like "var Scene = BABYLON.Scene") in order for you the user to copy/paste more easily.

The documentation entry point is: http://doc.babylonjs.com/overviews/Canvas2D_Home (with all the playgrounds at the bottom of the page).

The architecture/design doc is: http://doc.babylonjs.com/overviews/Canvas2D_Overview_Architecture

Please, I've also created a PRO for the Canvas2D feature in Slant, for those who think it's a great addition to babylon.js, please follow this link and upvote, this work is on my spare time so fame is my only reward!   thanks!

http://www.slant.co/topics/3777/viewpoints/4/~open-source-javascript-3d-engines~babylon-js#15

[jerome]

voted !

[FlashyGoblin]

@Nockawa I believe I found a bug in Canvas2D when adding children using the inline children:[] method. The z order gets messed up. 

Here is a playground. I have two methods that do the same thing. They both create a canvas2D and add a sprite and text in the same order. 

http://babylonjs-playground.com/#20MSFF#18

var createScene = function() {
	var scene = new BABYLON.Scene(engine);
	var camera = new BABYLON.FreeCamera("Camera", new BABYLON.Vector3(0, 2, -1000), scene);
	camera.attachControl(canvas, false);

	createChildrenInline(scene);  // text appears behind the sprite, even though it is the second child
	//createChildrenAfter(scene);  // text appears correctly infront of the sprite

	return scene;
};

However, in the createChildrenInline function, the text appears behind the sprite. Toggle between the two functions to see it happen.

[Nockawa]

7 minutes ago, FlashyGoblin said:

@Nockawa I believe I found a bug in Canvas2D when adding children using the inline children:[] method. The z order gets messed up. 

Here is a playground. I have two methods that do the same thing. They both create a canvas2D and add a sprite and text in the same order. 

http://babylonjs-playground.com/#20MSFF#18

var createScene = function() {
	var scene = new BABYLON.Scene(engine);
	var camera = new BABYLON.FreeCamera("Camera", new BABYLON.Vector3(0, 2, -1000), scene);
	camera.attachControl(canvas, false);

	createChildrenInline(scene);  // text appears behind the sprite, even though it is the second child
	//createChildrenAfter(scene);  // text appears correctly infront of the sprite

	return scene;
};

However, in the createChildrenInline function, the text appears behind the sprite. Toggle between the two functions to see it happen.

Grrrr, switching to a constuctor based creation make several things harder...regression occurred...thanks for reporting, I take a look right away.

[Nockawa]

@FlashyGoblin Bug is fixed, PR submitted, the PG will be soon updated. thanks for reporting!

[GameMonetize]

updated!

[Nockawa]

Guys, a new feature is ready and will be merged soon and I'm SOOOO happy about this one!

Let me explain: one of the mode of the Canvas2D is the WorldSpace one, where your canvas is rendered (by default) in a rectangle which lies in the 3D Scene. This feature is great but so far one of the major issue was if you create a 100*100 Canvas, the result is getting very blurry/pixelized when the canvas size on screen is getting bigger. The reason is simple, one texel of the texture that stores and renders the 100*100 Canvas is taking like 2*2 pixels up to 20*20 in a full hd screen.

Without cheating here what's a WorldSpace canvas looks like today: http://babylonjs-playground.com/#1BKDEO#20 Ugly!

One of the first quick thing I did to enhance things was introducing a renderScaleFactor, which basically multiple your Canvas size by this factor to generate the cached bitmap: more texels, more quality. But with this feature you had to position/size everything according to the final size, which was really annoying, but the result was better, just look at the "official PG" I did to make it prettier than the previous one: http://babylonjs-playground.com/#1BKDEO#18
Sure it's looking good, everything is multiplied 8 times and I used a 30pt font size! But this solution wasn't good enough and too clunky, well it's a hack, no more, no less.

So what is the solution? AdaptiveWorldSpaceCanvas, which is now the default behavior of a WorldSpaceCanvas. This feature is so simple (coded in 3 hours), what I do is computing the on screen (so projected) size of the bounding box of the rectangle that renders the canvas and then I compute the ratio between this size and the canvas' one. I set the ratio as the Scale of the Canvas and I change the rendering size of the cached bitmap to fit the on screen one. (well it's a little more complex, but basically that's it). After many tests I decided to clip the max size at 1024 pixels because the result is always great on a HD screen. If your device support less, it will be that less at max.

If your canvas is small on screen, it will take few memory/texture space (and less rendering time as less texels to render), if it's bigger, then it will take more space and more rendering time to achieve the quality we need. All of this is done very smoothly thanks to the RectPackingMap texture which deals with the allocation/deallocation of the cached bitmap very efficiently in real-time.

One last thing, you may have noticed that the text has a good quality (compared to the first screen shot..), but basically the text is a bitmap, so if the texel leads to many pixels you will have the same nasty blury/pixelized effects and the AdaptiveWorldSpaceCanvas can't help with that.

To counter this I've developed (and it's already merged in the 2.5 beta) a SuperSample mode for the FontTexture and also the Text2D primitive. Basically I create a texture twice the size and render font with twice their size (if you specify a 12px or 10pt it will be 24px and 20pt). Doubling the size leads to a HUGE boost in rendering quality. If the font is display at its normal size (so half of what is stored in the texture), the quality is almost the same as if it were the original font.

 

These two features really enhance the quality of World Space Canvas and Text. I still work on trying to improve quality at other place if required, I won't spent much time on it, maybe one more day, two max. But so far, so good!

[FlashyGoblin]

1 hour ago, Nockawa said:

Guys, a new feature is ready and will be merged soon and I'm SOOOO happy about this one!

You never seize to amaze!!!! 

[jerome]

wonderfoustre !!! 

[FlashyGoblin]

2 hours ago, Nockawa said:

One last thing, you may have noticed that the text has a good quality (compared to the first screen shot..), but basically the text is a bitmap, so if the texel leads to many pixels you will have the same nasty blury/pixelized effects and the AdaptiveWorldSpaceCanvas can't help with that.

So what about zooming out? Text2D objects get crunchy when the camera zooms out. Is there a way to soften them? 

PG: http://babylonjs-playground.com/#1BKDEO#21