Skip to content

DA2. Mesh

Statement

One of the foundational concepts in geometry and modeling is the mesh. Explain its usage with illustration and include a sample code of its implementation within a graphics API such as OpenGL/WebGL.

Answer

The mesh is an important concept in computer graphics. In English, it means a material consisting of a network of wire or thread. In computer graphics, it refers to a collection of finite geometry points assembled together in Polyhedrons meeting at their edges and vertices. The mesh is used to represent simple and complex 3D objects in computer graphics by assembling finite set of primitive shapes (usually triangles) together, where too few are used for simple objects and too many small triangles are used for complex objects (Eck, 2018).

Technically, a mesh is a collection of polygons and vertices stored in a special data structure named Indexed Face Set (IFS), which can create faces by arranging vertices in a specific order and equipped with enough functions to define the shape of the face. Assembling too many of a small faces into a single mesh allows for approximating almost any shape in 3D space including curves and uneven surfaces. OpenGL or WebGL APIs provide functions to cover the mesh with textures and colors to make it look more realistic.

Every mesh is made up of geometry and material; the geometry defines the vertices, polygons, and faces that will be fed to the IFS data structure, while the material defines the visual properties of each part of the mesh. The geometry is an instance of the THREE.BufferGeometry class and accepts a set of typed arrays as vertices, and then define which of these vertices form which faces using the setIndex method. The material is an instance of the THREE.MeshBasicMaterial class and accepts a set of properties such as color, side, and wireframe. Below is a simple example of creating a triangle mesh in Three.js:

const geometry = new THREE.BufferGeometry();
const vertices = new Float32Array([
    0.0, 5.0, 0.0,
    5.0, -5.0, 0.0,
    -5.0, -5.0, 0.0
]);
geometry.setAttribute('position', new THREE.BufferAttribute(vertices, 3));
const indices = new Uint32Array([0, 1, 2]);
geometry.setIndex(new THREE.BufferAttribute(indices, 1));


const material = new THREE.MeshBasicMaterial({ color: 0xff0000, side: THREE.DoubleSide });
const triangle = new THREE.Mesh(geometry, material);
scene.add(triangle);

Three.js (and other graphics APIs) provide enough functionality to create simple up intermediate complex meshes; specialized tools are used to create more complex meshes such as Blender; and the resulting meshes can be easily imported and integrated into the Three.js program. The main advantage of using meshes beside their flexibility is their efficiency in computing and rendering shapes, as the IFS data structure omits unnecessary computations, caches results, allows for parallel processing, and approximates results (Dunn, 2024).

To conclude, the mesh is a corner stone in any computer graphics program, as it allows for representing simple and complex 3D objects by assembling a finite set of primitive shapes together. The mesh is made up of geometry and material, where the geometry defines the vertices and faces, while the material defines the visual properties of the mesh. The concept of the mesh and the IFS data structure allowed for flexibility and efficiency in rendering 3D objects.

References