Tutorial: Using the WireFrame3D Class

The WireFrame3D class in TinyGPU enables you to render simple 3D wireframe shapes (like cubes, axes, grids, and spheres) onto any TinyGPU-compatible surface. This tutorial covers how to create, render, and save meshes.

1. Include the Required Headers

#include <TinyGPU.h>

---

2. Create a Surface

You need a drawing surface that implements ISurface<RGB_T>. For example:

Surface<RGB565> surface(320, 240); // 320x240 RGB565 surface

---

3. Instantiate the WireFrame3D Renderer

WireFrame3D<RGB565> renderer(surface);

---

4. Set Up the Camera (Optional)

You can adjust the camera position, target, and up vector:

WireFrame3D<RGB565>::Camera cam;
cam.position = {0.0f, 0.0f, 5.0f};
cam.target = {0.0f, 0.0f, 0.0f};
renderer.setCamera(cam);

---

5. Choose a Projection (Optional)

Set perspective or orthographic projection:

renderer.setPerspective(60.0f); // FOV in degrees
// or
renderer.setOrthographic(-2, 2, -2, 2);

---

6. Creating Meshes

Using Built-in Mesh Generators

You can quickly create standard shapes:

// Create a unit cube mesh
auto cubeMesh = WireFrame3D<>::cube(1.0f);

// Create axis lines
auto axisMesh = WireFrame3D<>::axis(2.0f);

// Create a grid on the XZ plane
auto gridMesh = WireFrame3D<>::grid(10, 0.5f);

// Create a sphere mesh
auto sphereMesh = WireFrame3D<>::sphere(1.0f, 8, 12);

Creating a Custom Mesh

A mesh consists of a list of vertices and a list of edges (pairs of vertex indices):

WireFrame3D<>::Mesh myMesh;

// Add vertices (x, y, z)
myMesh.vertices.push_back({0.0f, 0.0f, 0.0f});
myMesh.vertices.push_back({1.0f, 0.0f, 0.0f});
myMesh.vertices.push_back({0.0f, 1.0f, 0.0f});

// Add edges (start index, end index)
myMesh.edges.push_back({0, 1});
myMesh.edges.push_back({1, 2});
myMesh.edges.push_back({2, 0});

---

7. Rendering the Mesh

renderer.begin(); // Prepares depth buffer
renderer.renderWireframe(surface, myMesh);

8. Transforming Meshes: Rotate, Scale, Translate

You can transform your mesh by creating a model matrix using the static helpers and passing it to renderWireframe. For example:

#include <cmath>

float angle = 1.0f; // Radians
auto model = WireFrame3D<RGB565>::translation(1.0f, 0.0f, 0.0f) *
			 WireFrame3D<RGB565>::rotationY(angle) *
			 WireFrame3D<RGB565>::scaling(2.0f, 1.0f, 1.0f);

renderer.renderWireframe(surface, myMesh, model);

You can combine translation, rotation, and scaling in any order to achieve the desired transformation.

Tip: You can use the predefined type aliases WireFrame3 D_RGB565, WireFrame3D_RGB666 and WireFrame3D_RGB888.