Can't control model animation loop when in AR mode (Model-Viewer)

Questions
, , ,
1

So i have exported a basic particle system (Bunch of spheres forming a sphere after some time). I combined these animation as an Animation group and exported it as a glb.

When I set the model in model-viewer, the animation seems to be running in loop although I have specified the animationGroup loop condition as follows

  animationGroup.loopAnimation = false;

I have restricted the animation to play only once using the following piece of code for web view.

modelViewer.play({repetitions: 1})

But when I try the AR mode the animation keeps on looping, even when I don’t specify auto play attribute to Model-viewer.

2

cc @ryantrem

3

@dustedPawn can you share a Playground link for your particle system setup, and ideally your exported glb as well?

4

Hey @ryantrem, Here is the Playground [Link]
(Babylon.js Playground)

You can download the model upon clicking the Export Model button.

And below is my implementation of model-viewer:

<model-viewer 
  id="model-viewer"
  src="/particle.glb"
  camera-controls 
  alt="Particle Animation"
  ar>
</model-viewer>

<script>
  const modelViewer = document.getElementById("model-viewer");

  modelViewer.addEventListener("load", function () {
    modelViewer.animationName = "animation-group";
   modelViewer.play({repetitions: 1})
  });

</script>
5

Thanks for these extra details. After a bit of experimentation, reviewing code, and reviewing the glTF™ 2.0 Specification, my understanding is that animation looping is not encoded into glTF at all, but rather is expected to be a runtime decision by whatever framework is rendering the glTF. For example, if you import the glTF for your scenario, and in Babylon.js you call play(false) on the single AnimationGroup, this plays the animation one time without any looping.

Given this, I expect the bug is in Google Model Viewer. That being said, please also note that Babylon has a great standalone Viewer that you could also consider using. Currently the primary Viewer API always plays animations in looping mode, but the Babylon Viewer is also extremely customizable and allows full access to the underlying Babylon API. Here is an example that loads a model in the Babylon Viewer and plays the first animation group one time with no looping: https://codepen.io/BabylonJS/pen/zxvqqea

Also note that the Babylon Viewer is constantly being improved, and we could also update the Viewer API to directly support playing animations with or without looping.

You can find more details on the Babylon Viewer here:

1 Like