GIGA Display Shield 3D Engine Tutorial

Introduction

Using a 3D engine to construct and render objects can be a hardware heavy process. Now with the GIGA R1 WiFi, GIGA Display Shield and the TinyGL library this can be an easy process! The powerful GIGA R1 WiFi board can run the 3D engine while rendering it on the display shield, utilizing the touch interface of the display to move and interact with the rendered objects.

In this tutorial, we will show you how to make use of these features!

Please note that the development status of the TinyGL library is in an experimental phase.

Hardware & Software Needed

• Arduino GIGA R1 WiFi
• Arduino GIGA Display Shield
• Arduino IDE

Downloading the Library and Board Package

The Arduino Mbed OS Giga Boards Board Package contains most of the libraries you need to work with the shield's camera connector. To install the Board Package for GIGA boards, navigate to Tools > Board > Boards Manager or click the Boards Manager icon in the left tab of the IDE. In the Boards Manager tab, search for giga and install the latest Arduino Mbed OS Giga Boards version, the Arduino_H7_Video library library is included in the Board Package.

To install the required libraries for this tutorail, search for TinyGL, LVGL and Arduino_GigaDisplayTouch. Install these libraries as they are needed for the TinyGL example to work.

TinyGL Library

The TinyGL library will enable us to run an engine that can render 3D objects on the GIGA Display Shield. TinyGL is based on OpenGL, meaning the objects that we want to be rendered are defined in a

.c

• The source code for this library is available here

Rotating Gears Example

This example will render a set of rotating gears on your GIGA Display Shield's display, which you can move around and inspect using your fingers. Open the example by going to Files > Examples > TinyGL > Gears in the Arduino IDE, this will open both the required files in the IDE. You should see a

Gears.ino

gears.c

gears.c

Gears.c

The

gears.c

In this example gears will be rendered. If you wish to experiment with drawing different gears and seeing how the variables can change the final rendering. You can use the following function, that can be found at the top of the

gears.c

Copy
1static void gear( GLfloat inner_radius, GLfloat outer_radius, GLfloat width, GLint teeth, GLfloat tooth_depth )

If you use the function, these will be parameters that are needed:

• inner_radius: Radius of hole in the center of the gear
• outer_radius: Radius at the center of the gears teeth
• width: Width of gear
• teeth: Number of teeth
• tooth_depth: Depth of tooth

Taking a look into this function you can see what is required for drawing and rendering an object with this library.

Inside the

Gears.ino

gears.c

Gears.ino

The screen and view elements are handled by the LVGL framework. For more information on how this works and can be used, please head over to our LVGL guide.

Now for the 3D-engine specific functions. If you take a look at the

setup()

Copy
1init_gears();

This is a function that you can find in the

gears.c

In the

static void anim(lv_timer_t * timer) {}

Copy
1draw_gears();

This function can also be found inside

gears.c

In the sketch we will also need to define what will happen when the touch interface is triggered. The function used for this is:

Copy
1handleTouch(uint8_t contacts, GDTpoint_t *points)

For more information about how to use the touch functions on the display shield, please head over to our touch tutorial.

Running the Sketch

Since the sketch requires the

gears.c

After uploading the sketch you should see the same result as shown in the gif below: