This page works better with JavaScript enabled!

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

a · b
=
n
i = 1
Σ
aibi = a1b1 + a2b2 + ... anbn

Geometric Definition

a · b
=
|a| |b| cos θ

Applications

Angle between Vectors
cos θ
=
a · b
|a| |b|
=
axbx + ayby
ax² + ay²
·
bx² + by²
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

The example requires JavaScript

Cross Product (Vector Product)

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:

v =
  • v1
  • v2
,
M =
m11 m12
m21 m22
,
r = vM =

Definition

Generic Rule
a11 a12 a13 a14
a21 a22 a23 a24
a31 a32 a33 a34
a41 a42 a43 a44
=

Applications

Vector Multiplied by Identity Matrix
1 0 0 0
0 1 0 0
0 0 1 0
0 0 0 1
=
=
Scaling
sx 0 0
0 sy 0
0 0 sz
=
Interactive Example
The example requires JavaScript
Rotation
Rotation Along X-Axis
1 0 0
0 cos θ sin θ
0 -sin θ cos θ
=
Rotation Along Y-Axis
cos θ sin θ 0
0 1 0
-sin θ cos θ 0
=
Rotation Along Z-Axis
cos θ sin θ 0
-sin θ cos θ 0
0 0 1
=
Interactive Example
The example requires JavaScript
Translation
1 0 0 0
0 1 0 0
0 0 1 0
tx ty tz 1
=
Interactive Example
The example requires JavaScript

Matrix-Matrix Multiplication

Definition

Algebraic Definition

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

A =
a11 a12 a1n
a21 a22 a2n
am1 am2 amn
,
B =
b11 b12 b1p
b21 b22 b2p
bn1 bn2 bnp
,

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

C =
c11 c12 c1p
c21 c22 c2p
cm1 cm2 cmp

such that

cij
=
ai1b1j + ai2b2j + ⋯ + ainbni
=
n
k = 1
Σ
aikbkj

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

That is, the entry cij 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, cij is the dot product of the ith row of A and the jth column of B.

Therefore, AB can also be written as

C =
a11b11 + ⋯ + a1nbn1 a11b12 + ⋯ + a1nbn2 a11b1p + ⋯ + a1nbnp
a21b11 + ⋯ + a2nbn1 a21b12 + ⋯ + a2nbn2 a21b1p + ⋯ + a2nbnp
am1b11 + ⋯ + amnbn1 am1b12 + ⋯ + amnbn2 am1b1p + ⋯ + amnbnp
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
a11 a12 a13 a14
a21 a22 a23 a24
a31 a32 a33 a34
a41 a42 a43 a44
b11 b12 b13 b14
b21 b22 b23 b24
b31 b32 b33 b34
b41 b42 b43 b44
=
a11b11 a12b21 a13b31 a14b41
a21b12 a22b22 a23b32 a24b42
a31b13 a32b23 a33b33 a34b43
a41b14 a42b24 a43b34 a44b44