perf-test: ensure high animation quality across all players

thorvg / thorvg.web

ThorVG for Web System

https://www.thorvg.org

MIT License

5 stars 1 forks source link

perf-test: ensure high animation quality across all players #8

Closed theashraf closed 2 months ago

theashraf commented 4 months ago

I've noticed that only lottie-web renders animations with the best quality, while thorvg and dotLottie-web animations are a bit blurry.

lottie-web

dotLottie-web & thorvg

[Suggestion] We can remove the hardcoded dotLottie web renderConfig devicePixelRatio and ensure that the thorvg canvas is resized for the best quality based on the devicePixelRatio, as it's implemented in dotLottie-web.

hermet commented 4 months ago

Hmm... This is the captured image from my testing device. I can't determine whether Lottie-web is better than the others like your captured image. The only noticeable difference might be the edge quality due to the different anti-aliasing mechanisms.

[left: thorvg, center: dotlottie, right: lottie-web]

[thorvg]

[dotlottie]

[lottie-web]

hermet commented 4 months ago

The important part is whether all three players output images at the same resolution. If one side outputs at a higher resolution, it can significantly affect performance measurement, so it is important to ensure they are the same.

Tested on my Windows Chrome browser:

When scaled up the browser, lottie-web resolution is scaled up as well. Obviously, lottie-web considers a certain scale factor.
When applied the devicePixelRatio to the dotlottie player, I can assure its quality is better than lottie-web in default scale factor (100%).

Tested on MacBook,

Lottie-web quality is better than others. It appears to be scaled up to match the device's pixel ratio.

hermet commented 4 months ago

More Test factors.

DRP doesn't work with lottie-web(svg-renderer) while lottie-web(canvas-render) works with it on a test machine. We need to clarify this with multiple systems(devices) other than Mac.
Unfortunately, svg-renderer doesn't have an option to forcely turn the option off while the canvas-renderer has it. So perf-test can't align the players have the same condition.