\documentclass[autumn,slideColor,colorBG]{prosper}
\usepackage{epsfig}

\title{Introduction to Computer Graphics with OpenGL}
\author{Ioannis Tsiombikas}
\email{nuclear@siggraph.org}

\newcommand{\hvector}[4]{\left(\begin{array}{c}#1\\#2\\#3\\#4\end{array}\right)}

\newcommand{\stdmatrix}{
\left(\begin{array}{cccc}
m_{11} & m_{12} & m_{13} & m_{14}\\
m_{21} & m_{22} & m_{23} & m_{24}\\
m_{31} & m_{32} & m_{33} & m_{34}\\
m_{41} & m_{42} & m_{43} & m_{44}
\end{array}\right)
}
	

\begin{document}
\maketitle

% -------- slide 1 ---------
\overlays{4}{
\begin{slide}{Computer graphics}
Algorithms to transform mathematical representations of 3D environments to
images.

\vspace{0.5cm}

Possible representations:
\begin{itemize}
\fromSlide{2}{\item Polyhedral approximation of surfaces.}
\fromSlide{3}{\item Mathematical equations describing surfaces (i.e. $x^2 + y^2
+ z^2 = r^2$).}
\fromSlide{4}{\item Volume defined by density values (binary or not) at discrete
points in a 3D scalar field (voxels).}
\end{itemize}
\end{slide}
}

% -------- slide 2 --------
\begin{slide}{Real--time graphics}
The major distinction in graphics: real--time vs off--line rendering.

\vspace{0.5cm}

Real--time graphics algorithms sacrifice image quality to achieve rapid,
sub--second, drawing rates. This enables us to interactively rearrange objects
or the view--point thus allowing us to ``navigate'' in a 3D environment or
manipulate it.

\vspace{0.5cm}

Used in games, interactive visualizations, 3D modelling/animation tools, etc.
\end{slide}

% -------- slide 3 --------
\begin{slide}{OpenGL}

OpenGL is an open standard for dealing with 3D graphics, with
source--compatible implementations on every major platform capable of graphical
output.

\begin{itemize}
\item Controlled by a special committee, the Architecture Review Board (ARB).
\item Targeted towards interactive programs and real--time graphics.
\item Stable programming interface.
\item Flexible due to an extension mechanism for additional ``cutting--edge''
functionality.
\item Simple state--machine design.
\end{itemize}

\end{slide}

% ------ slide 4 ------
\begin{slide}{The rendering pipeline}
\vspace{-0.3cm}
\begin{figure}[h!]
\epsfig{file=diag/pipeline.eps,height=7.5cm}
\end{figure}
\end{slide}

% ------ slide 5 ------
\begin{slide}{Transformations}

A 3x3 matrix defines a linear transformation in 3D space (rotation, scaling,
etc.). However it is more convinient to work on 4D space and at the end keep a
3D projection of that.

\vspace{0.3cm}

Our vectors become $\left(x, y, z, w\right)$ with $w = 1$ for the equivalent of
3D vectors, and we use 4x4 matrices to transform them.

\vspace{0.3cm}
\vspace{0.5cm}

By using this technique (called homogeneous coordinates) we can place points at
infinity ($w = 0$), but most importantly, include 3D translation in our
transformation matrices.

\end{slide}

% ------ slide 6 ------
\begin{slide}{Transformations}
Transform vectors by multiplying them with the appropriate matrix.
\[\hvector{x'}{y'}{z'}{w'} = \stdmatrix \cdot \hvector{x}{y}{z}{w}\]

To concatenate a series of transformations in one matrix, multiply all the
matrices together.\\
Note: \emph{order matters}! Matrix multiplication is not commutative.
\end{slide}

% ------ slide 7 ------
\begin{slide}{Transformations: rotation}

\vspace{-0.8cm}

\begin{eqnarray*}
Rot_x(\theta{}) & = &
\left(\begin{array}{cccc}
1 & 0 & 0 & 0\\
0 & \cos{\theta} & -\sin{\theta} & 0\\
0 & \sin{\theta} & \cos{\theta} & 0\\
0 & 0 & 0 & 1
\end{array}\right)	\\
Rot_y(\theta{}) & = &
\left(\begin{array}{cccc}
\cos{\theta} & 0 & \sin{\theta} & 0\\
0 & 1 & 0 & 0\\
-\sin{\theta} & 0 & \cos{\theta} & 0\\
0 & 0 & 0 & 1
\end{array}\right)	\\
Rot_z(\theta{}) & = &
\left(\begin{array}{cccc}
\cos{\theta} & -\sin{\theta} & 0 & 0\\
\sin{\theta} & \cos{\theta} & 0 & 0\\
0 & 0 & 1 & 0\\
0 & 0 & 0 & 1
\end{array}\right)
\end{eqnarray*}

\end{slide}


% ------ slide 8 ------
\begin{slide}{Transformations: translation/scaling}

\[
T(t_x, t_y, t_z) =
\left(\begin{array}{cccc}
1 & 0 & 0 & t_x \\
0 & 1 & 0 & t_y \\
0 & 0 & 1 & t_z \\
0 & 0 & 0 & 1
\end{array}\right)
\]

\[
S(s_x, s_y, s_z) =
\left(\begin{array}{cccc}
s_x & 0 & 0 & 0 \\
0 & s_y & 0 & 0 \\
0 & 0 & s_z & 0 \\
0 & 0 & 0 & 1
\end{array}\right)
\]

\end{slide}

% ------ slide 9 -------
\overlays{5}{
\begin{slide}{OpenGL transformations}
OpenGL maintains matrix stacks for all stages of the pipeline. However world and
view transformations are combined in one (modelview).

To manipulate the matrix state, first specify which stack we wish to affect with
\emph{glMatrixMode()}, and call:
\begin{itemize}
\fromSlide{2}{\item \emph{glLoadMatrixf()} / \emph{glMultMatrixf()} to load or
concatenate an arbitrary matrix to the top matrix.}
\fromSlide{3}{\item \emph{glLoadIdentity()} to load the identity matrix.}
\fromSlide{4}{\item \emph{glTranslatef()} / \emph{glRotatef()} /
\emph{glScalef()} to concatenate the desired transformation matrix to the top
matrix.}
\fromSlide{5}{\item \emph{glPushMatrix()} / \emph{glPopMatrix()} for the usual
stack operations.}
\end{itemize}

\end{slide}
}

% ------ slide 10 ------
\begin{slide}{OpenGL 3D object data}

Vertices, grouped in triangles, quadrilaterals, or polygons define the surfaces
of objects in 3D space. Apart from their positions that define the surface,
there is a number of additional per--vertex data commonly given to OpenGL:

\begin{itemize}
\item Vertex colors (if lighting is disabled, useful for precalculated
lighting).
\item Normal vectors (used for lighting calculations).
\item Texture mapping coordinates.
\end{itemize}

\end{slide}

% ------ slide 10 1/2 ------
\overlays{5}{
\begin{slide}{OpenGL 3D object data}
Vertex data can be given to OpenGL in many ways.

\vspace{0.5cm}

\begin{itemize}
\fromSlide{2}{\item Immediate mode, \emph{glBegin()} / \emph{glEnd()}.}
\fromSlide{3}{\item Vertex arrays (in GL client memory).}
\fromSlide{4}{\item Vertex buffer objects (vertex arrays in GL server memory).}
\fromSlide{5}{\item Display lists.}
\end{itemize}
\end{slide}
}

% ------ slide 11 ------
\overlays{4}{
\begin{slide}{Lighting}

\vspace{-0.2cm}

For each vertex, a color is calculated as a function of the intensity of the
illumination reflected off the surface towards the viewpoint, and the
\emph{material} of the surface. Then color from each polygon's vertices
are linearly interpolated across its surface to calculate the color of each
pixel. Lights are represented as points, typically in world coordinates.

\fromSlide{2}{
\[A\ M_a + \sum_{i=1}^{lnum}{D(l_i, n)\ M_d + S(l_i, v)\ M_s}\]
}
\fromSlide{3}{\[D(l, n) = l \cdot n\]}
\fromSlide{4}{\[S(l, n, v, p) = (l \cdot reflect(v, n))^p\]}

\end{slide}
}

% ------ slide 12 ------
\overlays{4}{
\begin{slide}{OpenGL Lighting: Materials}

OpenGL handles light calculations if we provide vertex normals, light and
material parameters, and enable set the appropriate state.

\vspace{0.3cm}

The following material parameters can be set using the \emph{glMaterialf()} and
\emph{glMaterialfv()} functions:

\begin{itemize}
\fromSlide{2}{\item Color (seperate for ambient, specular and diffuse).}
\fromSlide{3}{\item Shininess (the specular power).}
\fromSlide{4}{\item Self--illumination.}
\end{itemize}

\end{slide}
}

% ------ slide 13 ------
\overlays{5}{
\begin{slide}{OpenGL Lighting: Lights}
Light parameters are set using the \emph{glLightf()} and \emph{glLightfv()}.

\vspace{0.3cm}
Light parameters:

\begin{itemize}
\fromSlide{2}{\item Position or direction.}
\fromSlide{3}{\item Color (seperated into ambient, diffuse and specular
components).}
\fromSlide{4}{\item Optional spotlight illumination cone.}
\fromSlide{5}{\item Optional distance attenuation coefficients.}
\end{itemize}
\end{slide}
}

\end{document}
