Skip to content

DA1. Introduction to Computer Graphics

Statement

For this discussion, please describe the role of the graphics API (such as OpenGL or WebGL), graphics hardware (graphics cards, GPU, VPU), and the geometry pipeline. Use examples when possible. Remember to cite sources from this Unit’s reading using APA 7th edition format.

Answer

Introduction

Computer graphics (CG) is a field that manages the creation and consumption of of visual content using computer. It is a broad field that is widely used in many industries such as entertainment (movies and shows), gaming, education, medical, engineering, and many more. The main concept in computer graphics is that the world we live in is 3D, but screens (computers, phones, TVs) are all flat 2D surfaces; hence, the main mission of computer graphics is to convert 3D scenes into 2D images that can be displayed on screens without losing their realism and details.

Graphics API

Graphics APIs are a set of software libraries that provide the ability to interact and control the graphics hardware. OpenGL is an open-standard cross-platform and cross-language 3D graphics API, created by Silicon Graphics Inc. (SGI) in 1992 (Guha, 2019). WebGL is an implementation of OpenGL that works in the browser as uses JavaScript as its programming language.

These functions give programmers the ability to create virtual worlds (models, scenes), view and move in these worlds (coordinates, cameras), make them suitable for display (clipping, projection), and render them on the screen (window-port mapping, rasterization).

Here is a simple JavaScript example to create a square on the screen:

import * as THREE from "three";

// create  a square
const geometry = new THREE.BufferGeometry();
const vertices = new Float32Array([20, 20, 0.0, 80, 20, 0.0, 80, 80, 0.0, 20, 80, 0.0]);
geometry.setAttribute("position", new THREE.BufferAttribute(vertices, 3));

const indices = new Uint32Array([0, 1, 2, 0, 2, 3]);
geometry.setIndex(new THREE.BufferAttribute(indices, 1));

const material = new THREE.MeshBasicMaterial({ color: 0xff0000 });
const square1 = new THREE.Mesh(geometry, material);

const scene = new THREE.Scene();
scene.add(square1);

const camera = new THREE.PerspectiveCamera(75, 1, 0.1, 1000);
camera.position.z = 250;

const renderer = new THREE.WebGLRenderer({ canvas: document.getElementById("glcanvas") });
renderer.setSize(600, 600);

Graphics Hardware

Computer graphics are computation-intensive tasks as every pixel on the screen needs to be calculated and rendered more than 60 times per second to give the illusion of motion according the screen’s frames per second (FPS). Graphics hardware offloads these tasks from the main CPU; as they are optimized for graphics-related computations such as matrix multiplications, vector operations, and pixel rendering (Taipala, 2024).

Geometry Pipeline

The geometry pipeline is a series of steps that a 3D scene goes through to be displayed on the screen; the pipeline connects both the graphics hardware and the graphics API (software) to display the final image. The pipeline consists of the following steps (Eck, 2018):

  • Modelling transformation: It initiates the model in the 3D world, prepares the scene by defining the world’s (model’s) coordinates, and defines what’s up, down, left, right, front, and back.
  • Viewing transformation: It initiates the position of the observer (viewer) in the 3D world, initiates the camera that will capture the scene, and sets it in the eye coordinates.
  • Clipping: It examines the world, and checks which parts of the seen are visible to the camera and which are not; visible parts are kept, while invisible parts are discarded from the subsequent computations.
  • Projection: It maps the 3D scene into a 2D plane, which is the screen; it starts from visible objects and then draws them on the plane in way that preserves their relative sizes, positions, and depths.
  • Window-to-Viewport mapping: It scales the 2D image to fit the screen’s resolution; hence, the image appears the same on big and small screens.
  • Rendering: It starts from the buffer frame of the 2D image, and fills in each pixel in the screen according to the info stored in the buffer frame.

Conclusion

To conclude, computer graphics is a field that is widely used in many industries to create and consume visual content. Geometry pipeline is a series of steps that connects the graphics hardware and the graphics API to display the final image. All 3D scenes must go through the geometry pipeline to be displayed on the screen. Graphics hardware offloads the computation-intensive tasks from the main CPU. Graphics APIs such as OpenGL and WebGL provide the ability to interact and control the graphics hardware.

References