Does Babylon support Vector animations?

A few few questions:

  1. Are vector sprites supported
  2. Are vector Animations supported
    If neither:
  3. Are sprite animations supported?

Hey @i73,

Babylon definitely has support for sprites and sprite animations.

Here’s a great resource in our Babylon101 course that talks about the sprite system:
https://doc.babylonjs.com/babylon101/sprites

Yes you can use .svg vector files in this system.

“Yes you can use .svg vector files in this system.” Do you know if that supports animations as well?

Thanks so much!

Yup it’s all on that page, svg’s work the same way that other image formats do.

2 Likes

I should take some time to read it then, thank you so much for not yelling at me for being lazy. :smile:

1 Like

Ooo! :slight_smile:

Would it make sense to put that somewhere in the documentation? I just searched the doc page for SVG and nothing came up.

1 Like

Hi Guys. I think some caution needs to be exercised, here.

Sprite animation, and SVG animation… are not in the same category, me thinks. Sprites use “blit”, I believe (high-speed image/page flipping/changing). It is unlikely that they can use SMIL or CSS SVG-animation… but I didn’t test.

Other than a static blit-able spriteMap/atlas “made-from” SVG, there seems to be 3 types of “native” animation for SVG… SMIL, CSS, and ECMA-script. SVG animation - Wikipedia

https://www.babylonjs-playground.com/#1CSC6K#5

That PG… uses SMIL to animate an SVG “node” (even though it applies the image VIA CSS). You can swap lines 37/38 to see the blue circle, animating with CSS technique. As you can see, it is displayed on the renderCanvas background. And I think THIS is an ecmascript-animated demo… which doesn’t work so well as a renderCanvas background.

So, my FIRST hope here… was to use an animated SVG… on a GUI ImageControl, or on the canvas used by our AdvancedDynamicTexture (adt)… BJS GUI-2D.

So, I tried a GUI image control… attempting to use ANY SVG, animated or static. Fail.

BUT, I know these animated SVG’s work on renderCanvas, so… I tried it on the HTML canvas used by the adt. https://www.babylonjs-playground.com/#XCPP9Y#1171 (see lines 34-59 experiment zone)

Fail again. If working (after activating line 53, 56, 57, OR 58)… I should be able to see the moving ring… in the transparent areas of the tree image. Nope. Possible Wingnut mistakes, there.

The REAL objective, get the SMIL-animation working in ImageControl or as background for ADT canvas… and THEN… change the TYPE of adt from fullscreen… to for-a-mesh… and then stick it onto a torus texture… and see if the SMIL/CSS animation STILL works. Yeah!

But we’re asking/expecting a lot from our BJS GUI-2D system… by trying this. I don’t think I have ever seen a textured background on an AdvancedDynamicTexture itself… but it MIGHT be possible. Wiser way… would be to use full-adt-sized imageControl as an adt background texture, but imageControls won’t do the native SVG animations, or any other (static) SVG. The adt’s HTML CANVAS… might.

Warning to experimenters: An EMPTY adt… no controls… might auto-size to x:0, y:0. So… you might THINK the adt_canvas (textured-) background isn’t working… when instead, it IS working… but the adt has no size (you get fooled). That is why I kept the hasAlpha tree image active… in that #1171 test playground. I needed the ADT to have at least one no-background control… so it has some size.

All in all, there MAY have been some misunderstanding… when saying that animated SVG-for-sprites… works just like any other image format. That MAY be true ONLY when thinking about SPRITE-type “blit” or “page flipping” animation. SVG has its own special/native non-blit animation stuff.

Here’s a PG where I “started” trying to dynamically generate an SVG node (SVG is XML, ya know?):

https://playground.babylonjs.com/#46NYQ8#1

I tried to insert some “space” positionally-above the renderCanvas (SVG = 1st child-node within the playground’s canvasZone node. renderCanvas = 2nd child). Embarrassing failure… I’m world-famous for those. :slight_smile: Possible problem with docType declaration, but, spec says… when mixing SVG node into HTML, use HTML DTD… so… hmm. Wingnut mistakes likely. I even failed to get the “space above the renderCanvas” opened/displayed/inserted… so the problem might be there - wrangling PG DOM-tree.

Warning about THAT #1 PG: There is no scene.onDispose there… to remove inserted SVG elements from the PG’s DOM tree. You may wish to add one, or use your browser’s document inspector… to highlight’n’delete any/all inserted SVG nodes… before each new RUN test.

In a way, SVG is not an image format at all, right? It is more an XML-based image-creating markup-language. :slight_smile: I’m still learning, but I thought I would show you guys my experiments. Party on!

1 Like

Hi guys. I recently saw DK do a different kind of SVG-inclusion in a BJS scene.

https://www.babylonjs-playground.com/#5ZCGRM#43

I don’t know if his method will more-easily allow using any/all of the 3 types of SVG animation (script, styling, and SMIL)… but maybe. I thought I better pass it on to our friend I73.

I’m hearing some talk that this PG works in Firefox-only.

@i73, if you are still on frequency . . .

. . . I am idly curious as to what you had in mind. I spent some time building SVG tools in BABYLON. Mostly used for letters but, as you see, it can be any 2D shape, extruded.
https://www.babylonjs-playground.com/#NLG6KE#2

The shapes can be “animated” – rotated, moved, etc. with normal tools. (@Wingnut has taken that to it’s logical extreme with letters marching across the sky.) They can be decorated with textures as you see fit, since they are normal meshes.

Animating a change of shape is a whole different kettle of fish. Never part of the original conception. Haven’t thought about it.

1 Like

I fully appreciate the offer but don’t extend yourself too much if it’s not going to help out the entire community, basically what I’m looking to do is animate a 2d simple character, small movements in the head and the arms, I basically just chalked it up to frame animation with Sprites but if you have any theoreticals on how I would be able to achieve that I’d also be able to assist

1 Like