About dotlottie's performance issue

[Need-an-AwP]

im having very serious performance problem when using dotlottie in react.
these two lottie anime are both played by a very simple react component

<div className='scale-100'>
              <DotLottieReact
                src="ghost-spin-no-background.lottie"
                loop
                autoplay
                speed={0.66}
            />
</div>

i have also checked it's parent component to make sure there is no frequent re-rendering
there is only one lottie anime playing on the page at one time, and you can see how many cpu time it takes
my pc's cpu is ryzen 5600x, it's not a high-end cpu, but absolutely not weak
if i play two dotlottie on the page at the same time, it will eat my whole cpu easily

the first lottie

the second lottie anime

i dont know if dotlottie is design to have a performance like this
as we all know, wasm is very efficient, but what makes dotlottie perform like this
is there any thing i forgot to set up?

[hermet]

@Need-an-AwP The second animation may be a bit performance-intensive with the current dotLottie player, as it contains five matte layers, which are computationally expensive to render with software engine.

@theashraf A hardware-accelerated dotlottie player would handle this efficiently.

[Need-an-AwP]

i see, the best way to handle a lottie animation which has a lots layers is to convert them into one gif, but it is not an lottie anymore
still, i hope dotlottie can support webgl or webgpu, it will be a long term and arduous task.
just making a wish 🎇XD

[theashraf]

@Need-an-AwP you can use this pre release dotLottie-web@0.41.0-pre.2
here are quick usage examples
webgpu -> https://codepen.io/lottiefiles/pen/qEBRWwq
webgl -> https://codepen.io/lottiefiles/pen/WbQeqvV?editors=0010

[Need-an-AwP]

@theashraf when i using the webgl version, i dont know if it has the function of falling back to cpu, the cpu usage is still high

i also checked the webgl and webgpu and found they are both working in my electron's env
with webgpu version, something errored in parsing json?

lol
i got another question about cpu usage
i used canvas.getContext('webgpu') to check if the pre version dotlottie is really using gpu to render, and the result is YES
but the cpu usage is still high as fk
when using webgpu correctly, cpu usage should be reduced right?

[hermet]

@Need-an-AwP Hi.

with webgpu version, something errored in parsing json?

When I checked it with webgpu, it works properly. It might have something to do with webgpu compat problems on your machine/browser, otherwise, with dotlottie old-versioning. Could you please double-check with this viewer?
https://www.thorvg.org/viewer

when using webgpu correctly, cpu usage should be reduced right?

It must be. Is the CPU usage the same or relatively low with WebGPU?

[Need-an-AwP]

@hermet thanks for providing a new way to verify
thorvg viewer is great on testing this animation, i can see it using my gpu when rendering, and with almost zero cpu usage
(fun fact: when using webgpu it will try to reach my monitor's refresh rate, which is 280hz, this costs a lot gpu, but obviously we wont need this high fps on an animation😂)
but everything looks fine in thorvg viewer, webgl, webgpu, cpu software decoding
i guess it is the dotlottie pre version's problem, after all, it just a prerelease
lets just wait for dotlottie's webgpu fully support