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 3Dgraphics.
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
 Virtual GPU
 Page Contents
 Overview
 Goals  What should the virtual GPU actually do?
 Math for 3D Graphics
 Vector Manipulation
 Dot Product (Scalar Product)
 Algebraic Definition
 Geometric Definition
 Applications
 Angle between Vectors
 Backface culling
 Interactive Example
 Links
 Cross Product (Vector Product)
 Links
 Matrix Manipulation
 VectorMatrix Multiplication
 Quick introduction
 Definition
 Generic Rule
 Applications
 Vector Multiplied by Identity Matrix
 Scaling
 Interactive Example
 Rotation
 Rotation Along XAxis
 Rotation Along YAxis
 Rotation Along ZAxis
 Interactive Example
 Translation
 Interactive Example
 Links
 MatrixMatrix Multiplication
 Definition
 Algebraic Definition
 Definition via Code
 Generic Rule for a 4 × 4 Matrix
 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
=
a
_{i}b
_{i} = a
_{1}b
_{1} + a
_{2}b
_{2} + ...
a
_{n}b
_{n}
Geometric Definition
Applications
Angle between Vectors
cos θ
=
a · b
a b
=
a
_{x}b
_{x} + a
_{y}b
_{y}
a_{x}²
+ a_{y}²
·
b_{x}²
+ b_{y}²
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
Links
Cross Product (Vector Product)
Links
Matrix Manipulation
VectorMatrix 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 vectormatrix multiplication, v multiplied by
a 2 × 2 matrix M.
The result is another vector r. It's elements are calculated like so:
M =
m_{11}  m_{12} 
m_{21}  m_{22} 
,
r =
vM =

v_{1}m_{11}
+ v_{2}m_{21}

v_{1}m_{12}
+ v_{2}m_{22}
Definition
Generic Rule
a_{11}  a_{12}  a_{13}  a_{14} 
a_{21}  a_{22}  a_{23}  a_{24} 
a_{31}  a_{32}  a_{33}  a_{34} 
a_{41}  a_{42}  a_{43}  a_{44} 
=

x · a_{11}
+ y · a_{21}
+ z · a_{31}
+ w · a_{41}

x · a_{12}
+ y · a_{22}
+ z · a_{32}
+ w · a_{42}

x · a_{13}
+ y · a_{23}
+ z · a_{33}
+ w · a_{43}

x · a_{14}
+ y · a_{24}
+ z · a_{34}
+ w · a_{44}
Applications
Vector Multiplied by Identity Matrix
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
=
Scaling
s_{x}  0  0 
0  s_{y}  0 
0  0  s_{z} 
=
 x · s_{x}
 y · s_{y}
 z · s_{z}
Interactive Example
The example requires JavaScript
Rotation
Rotation Along XAxis
1  0  0 
0  cos θ  sin θ 
0  sin θ  cos θ 
=
 x
 y cos θ  z sin θ
 y sin θ + z cos θ
Rotation Along YAxis
cos θ  sin θ  0 
0  1  0 
sin θ  cos θ  0 
=
 x cos θ  z sin θ
 y
 y sin θ + z cos θ
Rotation Along ZAxis
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
1  0  0  0 
0  1  0  0 
0  0  1  0 
t_{x}  t_{y}  t_{z}  1 
=
 x + t_{x}
 y + t_{y}
 z + t_{z}
 1
Interactive Example
The example requires JavaScript
Links
MatrixMatrix Multiplication
Definition
Algebraic Definition
If A is an m × n matrix, and B is an n × p matrix,
A =
a_{11}  a_{12}  ⋯  a_{1n} 
a_{21}  a_{22}  ⋯  a_{2n} 
⋮  ⋮  ⋱  ⋮ 
a_{m1}  a_{m2}  ⋯  a_{mn} 
,
B =
b_{11}  b_{12}  ⋯  b_{1p} 
b_{21}  b_{22}  ⋯  b_{2p} 
⋮  ⋮  ⋱  ⋮ 
b_{n1}  b_{n2}  ⋯  b_{np} 
,
the matrix product C is defined as the m × p matrix
C =
c_{11}  c_{12}  ⋯  c_{1p} 
c_{21}  c_{22}  ⋯  c_{2p} 
⋮  ⋮  ⋱  ⋮ 
c_{m1}  c_{m2}  ⋯  c_{mp} 
such that
c
_{ij}
=
a
_{i1}b
_{1j} + a
_{i2}b
_{2j} + ⋯ + a
_{in}b
_{ni}
=
a
_{ik}b
_{kj}
for i = 1, ..., m and j = 1, ..., p.
That is, the entry c_{ij} of the product is obtained by multiplying termbyterm 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
C =
a_{11}b_{11} + ⋯ + a_{1n}b_{n1} 
a_{11}b_{12} + ⋯ + a_{1n}b_{n2} 
⋯ 
a_{11}b_{1p} + ⋯ + a_{1n}b_{np} 
a_{21}b_{11} + ⋯ + a_{2n}b_{n1} 
a_{21}b_{12} + ⋯ + a_{2n}b_{n2} 
⋯ 
a_{21}b_{1p} + ⋯ + a_{2n}b_{np} 
⋮ 
⋮ 
⋱ 
⋮ 
a_{m1}b_{11} + ⋯ + a_{mn}b_{n1} 
a_{m1}b_{12} + ⋯ + a_{mn}b_{n2} 
⋯ 
a_{m1}b_{1p} + ⋯ + a_{mn}b_{np} 
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
a_{11}  a_{12}  a_{13}  a_{14} 
a_{21}  a_{22}  a_{23}  a_{24} 
a_{31}  a_{32}  a_{33}  a_{34} 
a_{41}  a_{42}  a_{43}  a_{44} 
b_{11}  b_{12}  b_{13}  b_{14} 
b_{21}  b_{22}  b_{23}  b_{24} 
b_{31}  b_{32}  b_{33}  b_{34} 
b_{41}  b_{42}  b_{43}  b_{44} 
=
a_{11}b_{11} 
a_{12}b_{21} 
a_{13}b_{31} 
a_{14}b_{41} 
a_{21}b_{12} 
a_{22}b_{22} 
a_{23}b_{32} 
a_{24}b_{42} 
a_{31}b_{13} 
a_{32}b_{23} 
a_{33}b_{33} 
a_{34}b_{43} 
a_{41}b_{14} 
a_{42}b_{24} 
a_{43}b_{34} 
a_{44}b_{44} 
Links