Monday, December 30, 2019

Better 3D graphics on the Arduino: avoiding flickering and tearing #Arduino #Graphics

The crawlingrobotfortress blog posts about creating better 3D graphics on the Arduino Uno. With the speed and memory of Arduino 328 boards, flickering and image tearing may be common:

A while ago I purchased a cheap $4 Chinese LCD Arduino shield from Ebay. The board arrived with no documentation. … The vendor provided an archive containing a few amusingly translated datasheets, as well as a copy of Adafruit’s Arduino LCD drivers. Evidently the product is a clone of the Adafruit LCD shields, and uses the ILI9341 LCD driver. I had hoped to use the display to show short animated GIF loops. This is not, in practice, possible. Test animations loaded slowly, with noticeable flicker and vertical tearing. The Arduino does not have enough speed or bandwidth to render full-screen animation frames, but what about 3D vector graphics?

Both optimizing ILI9341 LCD drivers and rendering basic wireframe meshes have been done before. XarkLabs provides an optimized fork of Adafruit’s library. Youtube user electrodacus has also implemented an optimize driver for the ILI9341 communicating over SPI. Existing 3D wireframe demonstrations, even ones using optimized drivers, display a noticeable flicker when the animation updates. This flicker is caused by the delay between when the previous frame is erased and when the new frame is drawn.

There simply isn’t enough processing power on the Arduino to render anything significant within one frame length, and isn’t enough memory to perform off-screen rendering. The ILI9341 supports a 16-bit RGB color interface with 320×240 pixels, and buffering even a single frame would take 150 kilobytes of memory, compared to the AtMega328’s two kilobytes of RAM.

The solution is to render animation frames in such a way that the intermediate rendering stages are not noticeable to the human eye. This can be achieved by rendering subsequent frames on top of previous frames without erasing, and then erasing only those pixels that have changed.

See the techniques in the article here and in the video below.

No comments:

Post a Comment