Canvas2D clipping

[mmassi]

I was asking on twitter about this (@nockawa was in the loop).

The issue is that when rendering a "list view" sometimes the "edge" elements must be clipped inside a sort of "viewport".

There was a suggestion that the group caching bitmap could in practice implement the clipping (because anything outside of the bitmap would not be drawn), but I don't know how to trigger this behavior.

Or maybe there are better ways to do this :-)

Ideas?

[Wingnut]

Hi @mmassi, welcome to the forum.  Excellent topic.  This is early Canvas2D "widget-making" at its finest.  I don't have any answers.  I just got excited and needed to blabber. 

Umm, this is related to the "overflow" stylerule in CSS, yes?  Me thinks so.  The "box model" (a smattering of applause is heard in the distant).

Back when I was working with XUL a bit, I found that providing a font-size adjuster for listview items... helped things.  Naturally, when the length/width of list got too large, clipping activated, and the scrollbars appeared.  I suppose columns will be a future hassle, too.

Anyway, I'll shut up, now, and let you and @Nockawa (and others) talk about the clipping needed for overflows.  Cool subject.  Welcome again.

[mmassi]

I have been reading the Group2D sources and experimenting in the playground (here: "http://babylonjs-playground.com/#CMZLC#8").

This is what I think I understood about how the group renders (please @Nockawa confirm if this is true):

• The size of the group can be automatically computed so that its children fit, or it can be set with the size property; in this case the code seems to always use the provided size.
• It has a "viewport" concept, and it sets the viewport on the "engine" it uses for rendering. The size of the viewport is the group size (which, as noted above, can be set manually).
• If the group is cached it renders into an area reserved from a MapTexture, again the size of the area is the size of the group.

At this point I was hoping to be able to trigger clipping simply setting the group size and enabling caching.

This did not work:

• Without caching the "viewport" is never set
• For some reason I could not enable caching: group.cachedRect is always null no matter what values I give to canvas.cachingStrategy and group.cacheBehavior
• If I set cachingStrategy: BABYLON.Canvas2D.CACHESTRATEGY_ALLGROUPS I get to rendering at all...

What am I doing wrong?

BTW, ultimately I'd need a world-positioned canvas, and from the docs it seems that the only caching strategy for a WorldSpaceCanvas2D is the "cache to canvas" one, which, if I understood correctly, does not cache individual groups.

Does this make clipping groups impossible in such a canvas?