Babylon Blendshapes animation player FPS drops and glitch

Hi,
I am facing a weird bug. My friend made a model of coffee making simulation in blender. Basically main agenda was to pour liquids in coffee liquid to create a coffee simultion. But it looks like there are huge frame drops while animation. Like when the animation starts first comes in front as soon as it lifts up it causes huge fps drops like from 70-80 to around 30 can easily be seen. Also there is cup cream , when its poured in glass it show some weird flicker glitch. I dont know Whats causing this issue even my scene is not that heavy. Stats are also fine not that high. Poly count is around 60k. Draw calls is also around 100. Cant decrease quality of models. Camera will be mostly fixed for simulation. we can move in development if needed.

I am also attaching playground link : https://playground.babylonjs.com/#FGNBY4#1

i also hosted it on netlify just in case : https://statuesque-froyo-24659d.netlify.app/

Main platform for deployment are mobiles not desktop.

My theory

I think Blendshapes are causing this issue. As soon blendshapes from keyframes starts to animate lag starts. I dont if there is some sort of bug in babylon gltf loader or animation player. Seems like babylon animation player is unable to handle animation. I have also tested in three js but it seems there fine. But I really like to stick with babylon.

IMPORTANT :- Please run it on mobile devices for checking lag, desktops may not show lag issues.

Marked points in the below image show issue points can be seen when running in realtime

Big Lags are seen here

Cream flicker issue

Animation Misbehaving on low end phones

Please help me out!!
Thanks

The hicups you experience is because of shader recompilations.

That’s because we optimize the shaders to only use targets (blendshapes) that have non-zero influence (=active targets), but in your animation, the number of active targets changes, which triggers a shader recompilation.

You can disable this optimization by setting mesh.morphTargetManager.optimizeInfluencers = false. However, for this change to trigger a recompilation at the start of the program, you will have to do:

mesh.morphTargetManager.areUpdatesFrozen = true;
mesh.morphTargetManager.areUpdatesFrozen = false;

That seems silly, but the second line will trigger the required processing because of the first line.

Here’s a fixed PG:

Regarding the rendering artifacts (flickering, animation misbehaving), I don’t experience them on my iPhone SE. Maybe there’s a hardware limitation somewhere: do you get some errors in the console log of the browser?

1 Like

Wow Thats Amazing and neat trick to solve this issue. I was really getting stressed out. Thanks!

No I am not getting any error messages for the low end device. Still there are some warnings

.

Three js sample with same model and working perfectly.

Device Information with 6gb ram

There is one more device I remember in which web page was crashing. Tried to load without animation it was opening. But with animation, page was crashing i dont know why. I am waiting for logs he said he will send it by tomorrow.

Crashing devce information

Hey, I got logs for crashing issue.

I wonder if it could be the same problem than in Morph targets on Samsung S9 (Exynos 9810) is broken - #52

Can you try this PR on the low end devices:

It is disabling the texture support for morph targets. I also had to lower the maximum number of targets (line 4), but it does not seem to impact the rendering.

Yes its working but there is one issue with this.
Left Image is how it should look and right one is how it is currently right now. See marked area.

It’s probably because of the reduced number of targets… Try to raise the value of MaxActiveMorphTargetsInVertexAttributeMode => it seems setting the value to 5 does work.

Yes its fixed now but one more last problem is still coming.
Added frame number in code

https://playground.babylonjs.com/#FGNBY4#14

Can you check this PG why mesh is getting distorted, coffee mesh is coming out of glass. Else everything is fixed IG. Its now working on all phones perfectly but above issue is coming.

Also I tried to above 6 but getting error . I think 6 is the limit.

I can’t see it?

I don’t see this problem on my computer with MaxActiveMorphTargetsInVertexAttributeMode=5, and the color is black. Are you experiencing this problem only on the low end devices?

Unfortunately, you may have to set optimizeInfluencers back to true to make it work (you should try MaxActiveMorphTargetsInVertexAttributeMode=5 and optimizeInfluencers=true).

I m sorry, I think It didnt saved earlier.

Frame Number is 2770.

Here is update with frame number https://playground.babylonjs.com/#FGNBY4#18.

I have paused the animation and removed refraction for clear visual.

I also tested with optimizeInfluencers=true but it again started to cause hicups when running the animation.

Ok, thanks, I can see it now.

Yes, but unfortunately I don’t see any other solution at the time… We would need to handle the number of active targets as a uniform variable instead of using a define, to avoid recompiling when the number of active targets changes… cc @sebavan for his expertise!

1 Like

@sebavan Can you help regarding this? I am facing issues with animations playing with blendshapes. I just checked some animation details are missing here right now and some sort of glitch too in some last frame as mentioned in upper messages.

Thanks

I really appreciate that you helped me to fix lagging part. You are a life saviour man thanks again!

@Evgeni_Popov will give it a try with a uniform :slight_smile:

Can I hope this issue will get a fix or a workaround?

yup It should be possible but it is definitely not a small/easy endeavor :frowning:

I see, no worries!
Thanks for letting me know.