Oval and rectangular viewports

Computer graphics is basically a simulation of our eyes, of creating a scene where our eyes will be, even (or especially) if the scene is imaginary. I’m going to touch a little bit on viewports. Think of viewports as surfaces where the scene is displayed. Your television screen or an application window on your computer are viewports with this definition.

Oval viewports

There aren’t really any oval viewports. This part is based on my observation and there are no references (that I could find).

So your eye works like a pinhole camera. What you see comes through your eye, gets inverted vertically and falls on your retina. The retina consists primarily of rods and cones (described this way because of their shapes). Rods are more sensitive to light, and are responsible for our night vision. Cones are responsible for our colour perception.

The image that forms on your retina is circular, because your pupil is circular. Obviously this would go on for a long time if I had to explain the full biology of our optical organs, so I’m rushing through a bit.

You have two eyes, so the two resulting images overlap each other. Your eyes can only focus on one thing at a time. To “compensate” for this, your brain shifts focus very quickly, and your eyes make minute adjustments. This gives the impression that you’re looking at many things (or at least a larger area) at the same time.

Because of the overlapping circular images and the minute readjustments of the eyes, I concluded that this was why I see a sort of oval shaped field of focus… see image below.

Retinal image

Oval viewport

I want to mention that this is a conclusion of mine based on my own observations. Feel free to let me know any citations or incorrect portions of my explanation. I’m mentioning this because this is related to…

Rectangular viewports

Most viewports are used on a computer screen, and a rectangular shape is most natural. The aspect ratio is typically 4:3, which is the width to height ratio.

One thing I want to point out is, our vision stretches to near infinite distances (or at least very very very far). Anything within our field of view (or FOV) is visible, provided it’s not blocked by something. Of course, just because it’s visible doesn’t mean we pay attention to it.

Oh dear, I seem to be rambling on and on… there’s just so much I need to tell you! *sigh*

Anyway, computer resources are limited because of calculation speed. To reduce the number of calculations, we limit the visible portion.

Rectangular viewport

We cut the visible portion using two planes, a near plane and a far plane. This coupled with a pyramidal view, creates a cut pyramid (with 6 flat planes). This cut pyramid or frustum defines our viewing volume. Anything within this is considered “visible”.

The far plane is set at a distance where it’s deigned so far that even if there’s an object present, it’s almost not visible. We can cut out more objects (and hence more calculations) by moving the far plane closer to the virtual camera.

The near plane is actually our viewport. So anything between the virtual camera and the near plane is technically invisible. In practice, the near plane is actually very near the camera, like 0.01 units away.

And that’s all I can think of that’s necessary for your understanding. I probably mislabelled some terms, either for simplification or I’m just wrong. Feel free to correct me so I can explain this part better.

Trapped aeroplane video

This is my first video production, a demo of a trapped paper aeroplane (hosted by Vimeo). Yay! It’s a demo of an SDL (Simple DirectMedia Layer)/OpenGL project I made as a result of a university programming assignment.

The original assignment was in wireframe and in black and white (no colours). I added textures and a revolving sky background for colour. Besides, the explosion effect looks cooler with a fiery texture. Oh, I didn’t mention the explosion effect? *smile*

Unfortunately, I lost the source code. Aarrrgghhh…

Anyway, here’s where you can download the demo. Download Trapped Aeroplane [ZIP file, 380 KB]. Maybe I’ll rewrite it… XNA and C#? We’ll see. Have fun!

Featured demo – Panic Room

Today’s featured demo is Panic Room by Fairlight. It’s about 4 minutes in length and 151 KB in download size.

If you don’t see the video in your feed reader, please click through to the post.

First, some warnings. The demo executable requires a fairly capable computer with great graphics card. Watching it in video form is recommended. I had to use a low resolution setting in windowed mode so I could watch it run on my computer. After starting the demo, it takes a while to do precalculation work, so just wait a bit.

The one thing that caught my eye was how realistic the water was when it flowed through the wall cracks near the beginning of the demo. You could see the columns of water expanding and contracting, mimicking how a real-life water column would ebb and flow in volume.

And the water ripples! That’s just awesome. Remember, all this is calculated and rendered in real-time.

The explosions and the smoke trails of the aeroplanes are done with particles. Search for “particle systems” for more information.

So, enjoy the demo!

Matrices for programmers

Following the fine tradition of the colour theory post, you are getting another crash course. This time, a lesson in matrices. You’re going to be fine. And yes, I’ll hold your hand while you do this. *smile*

For those who are mathematically inclined, we’ll be working in the realm of real numbers (which I talked about briefly when discussing floating points). Let’s start with…

Scalars

Scalars are simply numbers. For example, 2 is a scalar. So is 3.14159 and 1.618. And so is -273.15. Bonus points if you can figure out what those numbers are special for.

Scalars are stored as normal variables in code. Your ints, floats, doubles come in handy.

Scalars are typically denoted by a lowercase alphabet, such as a or b or c.

Vectors

Vectors are series of scalars. For example, [1 3 5 7 9] is a vector.

You typically store vectors as an array. For example,

int[] v = new int[] { 1, 3, 5, 7, 9 };

Vectors are typically denoted by a lowercase alphabet in bold, such as v.

Matrices

Matrices are series of series of scalars, or series of vectors. In code, they are typically stored as an array of arrays.

int[,] A = new int[3, 3];

3 by 3 matrix

Matrices are also known as multidimensional arrays. The dimension of a matrix is m-by-n, where m is the number of rows and n is the number of columns.

When either m or n is 1, we get a vector. So a vector is a special case of a matrix. And because of this, we have to define…

Row and column vectors

It’s easier to just show you how they look like.

Row and column vectors

A row vector is a matrix where the number of rows is 1. A column vector is a matrix where the number of columns is 1. While we’re at it, a scalar can be thought of as a matrix where the number of rows and columns are both 1.

For our purposes of working towards 3D programming, we’ll be focusing on the column vector. It doesn’t matter which one we use when coding, but in terms of notation, we’ll be using column vectors. You will see why later on.

Matrix entries

Individual entries are referred to with the notation A[i,j] (or ai,j) where A is the matrix, i is the i-th row and j is the j-th column. Typically, we have
1 <= i <= m and 1 <= j <= n, where m is the number of rows and n is the number of columns.

Take note, because you'll be using them in code. So know how your programming language does indices of arrays. If your language starts with the 0-th element, make sure to shift positions by one less. Then you have
0 <= i <= m-1 and 0 <= j <= n-1.

The 0 index has tripped many a programmer, so be careful.

Square matrices

This is a special case where both the number of rows and number of columns are equal. For example, a 3 by 3 matrix, or a 4 by 4 matrix.

In a stroke of coincidence, we will also be focusing on 3 by 3 and 4 by 4 matrices. Hint: It’s because we’re working in 3D.

Identity matrix

In math, there is a number such that when you multiply anything by it, you get back the same thing. It’s the number 1. For example, 8 * 1 = 1 * 8 = 8.

We have the same concept for matrices. There is a matrix such that when you multiply any matrix by it, you get the same original matrix back. It’s called the identity matrix, typically denoted by an uppercase “I”.

Identity matrix

We’ll look at matrix operations soon.

Zero matrix

You know that multiplication unity described above when defining the identity matrix? Guess what, there’s a number such that when you add anything to it, you get back the same thing. It’s the number 0. For example, 8 + 0 = 0 + 8 = 8.

Similarly, we have the zero matrix. It’s simply a matrix with zeroes in all its entries. It’s denoted by a big gigantic 0. Probably not quite useful to you, but nevertheless, you now know something more.

Symmetrical matrices

Symmetrical matrices are symmetrical about the diagonal. Where’s the diagonal? Look at this:

Matrix diagonal

For a 3 by 3 matrix with values:
a b c
d e f
g h i

Entries a, e and i form the diagonal. Notation wise, A[i,i] are the diagonal entries.

If a matrix has zeroes in entries below the diagonal, it’s known as an upper triangular matrix. In our case, d = g = h = 0.

Similarly, if a matrix has zeroes in entries above the diagonal, it’s known as a lower triangular matrix. In our case, b = c = f = 0.

What symmetry means in this case is b=d, c=g and f=h. The general formula is
A[i,j] = A[j,i]

To speed up computations when checking symmetry, some algorithms use
A[i,j] = A[j,i], where i < j

The extra condition leaves out the diagonal and entries below the diagonal. No point double checking values, right?

Transpose of a matrix

Now that we know what a symmetrical matrix and its diagonal, we can define the transpose of a matrix. What you do is simply flip the matrix about its diagonal.

For a matrix A whose values are:
a b c
d e f
g h i

Its transpose is:
a d g
b e h
c f i

The transpose of a matrix A is denoted by AT. So if A = AT, A is a symmetrical matrix.

Yes, we’re dealing with square matrices. Rectangular matrices aren’t useful for our purposes in 3D programming, and you’re welcome to research on its practical uses (try “operations research“).

The inverse of a matrix

The inverse of a square matrix A is denoted by A-1, where
AA-1 = A-1A = I

Yes, I know I still haven’t covered matrix multiplication. Just go with it a little longer…

For a matrix product AB, it’s inverse is
(AB)-1 = B-1A-1

Then this looks beautiful:
(AB)-1AB
= B-1A-1AB
= B-1IB
= B-1B
= I

Don’t you think that looks beautiful? *smile*

Matrix equality

Matrices A and B are said to be equal if every corresponding entry of both matrices are equal. In notation, A[i,j] = B[i,j] for all i and j.

Matrix addition (and subtraction)

A matrix C is said to be the sum of matrices A and B if
C[i,j] = A[i,j] + B[i,j] for all i and j.

Subtraction is similar. Let me show you a scalar example.
8 – 5 = 8 + (-5)
Same thing for matrices. The negative sign is “pushed in” to individual entries.

Matrix multiplication by scalar

Let’s multiply matrices by scalars first. It’s easy.

Scalar matrix multiplication

Just multiply the scalar with all the entries in the matrix.

Matrix multiplication by vector

This one’s a little more complicated. For our purposes, we are concerned with multiplying a matrix A by a column vector v. Yes, the order and the type of vector matters. Let’s look at a diagram.

Matrix vector multiplication

The result is a column vector. Suppose we multiply matrix A by column vector x and we get a column vector y, the general formula is
y[i] = A[i,0] * x[0] + A[i,1] * x[1] + … + A[i,n] * x[n]

It actually looks much more concise if I can use the summation notation… BUT, I’m trying to simplify things for you. Hopefully, you can visualise how it works with the diagram. I’ll write another post with code to explain this.

You can’t multiply a matrix by a row vector though. Hopefully through the diagram, you’ll see why it doesn’t work. What happens is, you multiply each row of the matrix by the values down the column vector. Since a row vector only has one value “down the column”, it doesn’t make sense to multiply matrices by row vectors.

You can multiply a row vector by a matrix to get a row vector. But it’s not useful for our purposes. If you understand a little about 3D transformations, then A is a transformation matrix, and x is a vertex. For example, A could be a translation matrix and moves x to point y. If you don’t understand any of this, relax, we’ll get there together soon.

Matrix and matrix multiplication

This is complicated to show and explain, but once you get the idea, it’s actually easy to code.

Matrix by matrix multiplication

I’ll leave it to you to figure out the general formula… It’s similar to the one with matrix by vector multiplication, only with more vectors. *smile* This is what I do in university, write out a’s and subscripts, and summation notations in my lecture notes and tutorial questions…

I’ll write another post explaining this (together with the matrix by vector multiplication) with code to illustrate the use.

In terms of 3D transformations, you could have a bunch of transformations done, say you rotate something, then translate (move) it. So you have something like TRx, where R is the rotation matrix, T is the translation matrix and x is the vertex.

Note the order. The earlier (in order) a transformation is done, the closer it is to the vertex in question. Basically you reverse the order of transformations when implementing.

Since we’re at it, matrix multiplications are not commutative. What it means is that
AB != BA
The order is important.

As an exercise, visualise the difference between moving something then rotate, and rotate then move.

End of crash course

Whew… *wipe sweat* How’re you doing? Still with me?

Good. This sets the foundation you need for understanding 3D programming. Yay! Review what you’ve read, do some research if needed, and I’ll see you next time.

The road to 3D programming

I plan to write some posts that lead eventually to 3D programming, the kind done in games and demos. There’s no concrete series of posts, meaning you won’t find a clue from the title that it’s actually part of that plan. The reason is that there are all kinds of topics you could learn to be proficient in 3D programming. Having a set-in-stone series seems stifling…

Nevertheless, these are the topics I’m covering, in no particular order:

  • Basic colour theory, which I already did
  • Matrix operations
  • Viewports, eye/camera coordinates
  • Raytracing, rendering
  • Lights, diffusion, ambience, specularity, radiosity
  • Basic 3D modelling, vertex representations
  • Textures, mipmaps

I’ll probably add some more topics, and also remove some topics. Like I said, not set in stone. You’ve probably noticed some missing topics. What about music and audio? That’s why there are teams. I don’t know much about creating audio. I just use them (the code for using audio will probably be covered).

Instead of leading you through a series of posts, which ends with a finished product or game, I’ve decided to cover as much of the bases as possible. There are other sites covering finished products through a series much better than me. I want to cover topics leading to the finished product. This gives you flexibility in deciding what concepts you want to learn and use.

So if you have specific topics you’d like to be covered, add in a comment or contact me.