# 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
2. Overview
3. Math for 3D Graphics
1. Vector Manipulation
1. Dot Product (Scalar Product)
2. Cross Product (Vector Product)
2. Matrix Manipulation
1. Vector-Matrix Multiplication
1. Quick introduction
2. Definition
3. Applications
1. Vector Multiplied by Identity Matrix
2. Scaling
3. Rotation
4. Translation
2. Matrix-Matrix Multiplication
1. Definition

# 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

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

#### Applications

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
• θ
• |b|

## 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 =
• v1m11 + v2m21
• v1m12 + v2m22

#### Definition

##### Generic Rule
• x
• y
• z
• w
 a11 a12 a13 a14 a21 a22 a23 a24 a31 a32 a33 a34 a41 a42 a43 a44
=
• x · a11 + y · a21 + z · a31 + w · a41
• x · a12 + y · a22 + z · a32 + w · a42
• x · a13 + y · a23 + z · a33 + w · a43
• x · a14 + y · a24 + z · a34 + w · a44

#### Applications

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

### 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] * B[col]
+ A[row] * B[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