How to improve UI speed to remove flickering / tearing on my display. DMA and two buffers?

Description

I created an example project with a slider that has background, indicator and knob images. When the slider moves fast enough, there’s lots of flickering / tearing around the knob part.

Here’s the project repository: GitHub - zalexzperez/LVGL_slider: Slider implemented using LVGL 9.1 on an SPI display controlled by the TFT_eSPI library and EEZ framework library (EEZ Studio GUI editor).

Notice there are two releases:

  • v0.1 is the implementation with a single buffer and no DMA.
  • v0.2 uses two buffers and DMA.

What MCU/Processor/Board and compiler are you using?

  • ESP32-S3, Arduino framework with PlatformIO.
  • 172x320 ST7789 SPI display.

What LVGL version are you using?

v9.1

What do you want to achieve?

I want to achieve smooth, flicker-free, and tear-free motion for rapidly changing sliders, numbers, and moving images.
Please, check my code and point me on how to get the best possible performance out of this hardware.

What have you tried so far?

  • Set SPI frequency to the highest possible value (80MHz) for my hardware.
  • Implemented my own flushing function with two buffers and DMA. I adapted this function from someone else’s project, which utilizes a single buffer with DMA (and LVGL 8.3).
  • Played a bit with buffer sizes, the current value gives the best result; worse results are observed if buffer size is larger or smaller.

Screenshot and/or video

This is v1:
v01

And this is v2, clearly better but not good enough (more artifacts expected the faster it moves):
v02

Not sure why they are at slightly different speeds.

Thanks in advance for your help.