Virtual GPU

When I was writing a small game using WebGL, I found it a little difficult to wrap my head around certain things related to 3D-graphics. Specifically, I was interested in getting a deeper understanding, how shader programs work on the mesh data. The matrix calculations weren't too intuitive either.

So I set out to recreate the inner workings of such a graphics accelerator in JavaScript, in order to see first hand, what is done when and where, and how it all fits together. The result was an emulator of a simple GPU, that simulates the most important steps being taken, when a 3D image is rendered, including simulated shaders.

Page Contents

1. Virtual GPU
   1. Page Contents
2. Overview
   1. Goals - What should the virtual GPU actually do?
3. Math for 3D Graphics
   1. Vector Manipulation
      1. Dot Product (Scalar Product)
         1. Algebraic Definition
         2. Geometric Definition
         3. Applications
            1. Angle between Vectors
            2. Backface culling
         4. Interactive Example
         5. Links
      2. Cross Product (Vector Product)
         1. Links
   2. Matrix Manipulation
      1. Vector-Matrix Multiplication
         1. Quick introduction
         2. Definition
            1. Generic Rule
         3. Applications
            1. Vector Multiplied by Identity Matrix
            2. Scaling
               1. Interactive Example
            3. Rotation
               1. Rotation Along X-Axis
               2. Rotation Along Y-Axis
               3. Rotation Along Z-Axis
               4. Interactive Example
            4. Translation
               1. Interactive Example
            5. Links
      2. Matrix-Matrix Multiplication
         1. Definition
            1. Algebraic Definition
            2. Definition via Code
            3. Generic Rule for a 4 × 4 Matrix
         2. Links

Overview

Goals - What should the virtual GPU actually do?

In order to replicate a GPU, we need to take a look at how programs are utilizing it. This section aims to provide an introduction into the basics of 3D graphics.

Projecting from "world space" into "screen space" using the projection matrix

Math for 3D Graphics

Vector Manipulation

Dot Product (Scalar Product)

Algebraic Definition

Geometric Definition

Applications

Angle between Vectors

Backface culling

The dot product tells us, how much one vector projects onto another.

It is a measure, how similar the direction of a is to the normal vector of b. (In 3D, it compares to the normal plane of b.) For unit vectors, it ranges from -1 to +1, where +1 would indicate both vectors pointing in the same direction.

This can be used to determine, if a face is pointing towards or away from the camera. For convex objects, only faces pointing to the camera need to be rendered, because faces seen from their back are obscured anyways.

Interactive Example

Links

Cross Product (Vector Product)

Links

Matrix Manipulation

Vector-Matrix Multiplication

Quick introduction

Working with matrices is really simple. We use them to denote, how elements are to be combined.
Let's take a look at a simple vector-matrix multiplication, v multiplied by a 2 × 2 matrix M.
The result is another vector r. It's elements are calculated like so:

Definition

Generic Rule

Applications

Vector Multiplied by Identity Matrix

Scaling

Interactive Example

Rotation

Rotation Along X-Axis

Rotation Along Y-Axis

Rotation Along Z-Axis

Translation

Links

Matrix-Matrix Multiplication

Definition

Algebraic Definition

If A is an m × n matrix, and B is an n × p matrix,

the matrix product C is defined as the m × p matrix

such that

for i = 1, ..., m and j = 1, ..., p.

That is, the entry c_ij of the product is obtained by multiplying term-by-term the entries of the ith row of A and the jth colum of B, and summing these n products. In other words, c_ij is the dot product of the ith row of A and the jth column of B.

Therefore, AB can also be written as

Definition via Code

for (row = 0; row < n; ++row) {
    for (col = 0; col < m; ++col) {
        C[row][col]
        = A[row][0] * B[0][col]
        + A[row][1] * B[1][col]
        + ...
        + A[row][m] * B[n][col]

Generic Rule for a 4 × 4 Matrix

Links