VedaOpenGLLibrary Structure and Dependencies

Overview

This gives an overview of the VedaOpenGLLibrary and its dependencies.

Details

Directory Structure
The folder structure will be as below. 

The following describes in detail:

This tutorial is primarily targeted for windows OS.

Externals

This folder contains 3rd party libraries used by the tutorial for loading OpenGL extensions, perform vector math, matrices calculations. loading texture, object model  etc. as listed below.

OpenGL Extensions

The OpenGL header file included as a part of windows SDK supports OpenGL specification 1.1. The Modern OpenGL tutorial uses  OpenGL specification 3.3. The extensions will be loaded after the context is created. This will be discussed in detail in the next post.

As the OpenGL specification 3.3 has just too many APIs, the extensions will be supplied by a separate library, GLExtensions. 

The C++ prototypes of OpenGL specification 3.3 can be downloaded from Galogen web site. 

In addition, latest WGL extensions should also be included. This can be downloaded from this website. WGL Extensions are also included in GLExtensions. 

The OpenGLExtensions is located under externals folder and is configured as static library. The debug and release libraries are available as externals\GLExtensions\Lib\GLExtensions_static_x86_d.lib and externals\GLExtensions\Lib\GLExtensions_static_x86.lib.

Window Creation

Creating an OpenGL window requires using a platform-specific library, as OpenGL itself does not provide window or input management functionality. VedaOpenGLLibrary uses ATL (Activex Template Library) to create windows.

ATL is part of Visual Studio C++ installation.

Mouse and Keyboard Input

OpenGL itself is purely a graphics rendering API and does not have built-in functions for handling mouse and keyboard input. Instead, VedaOpenGLLibrary manages  input using WIN32 API. 

OpenGL Context Creation

Creating an OpenGL (GL) context is the process of setting up the necessary environment and state machine for an application to use the OpenGL API. Because OpenGL is a platform-independent specification, the actual context creation is handled by platform-specific APIs or, more commonly, by cross-platform libraries. 

For creating OpenGL context, WGL or Wiggle APIs are used.  They are included as a part of Windoiws SDK.

GLM

Rendering 3D context involves lot of vector math, matrix math, trigonometry etc. 

GLM conveniently provides a math library including all these and more. In addition it also provides APIs for creation of Ortho and Perspective projection matrix, transformations such as translation, rotation and scaling, lookat matrix and much more. 

GLM can be downloaded from here.

GLM  files are located at externals\glm folder.

Simple OpenGL Image Library

SOIL2 is used for loading textures. displaying bitmaps etc. SOIL2 can be downloaded from here. 

SOIL2 is located under externals folder and is configured as static library. 

The debug and release libraries are available as externals\SOIL2\projects\VC15\libs\SOIL_static_x86_d.lib and externals\SOIL2\projects\VC15\libs\SOIL_static_x86.lib.

Lessons

This folder contains source code and binaries of the applications related to the OpenGL topics and features discussed in the tutorial.

Resources

Contains bitmaps, texture bitmaps, wireframe models used in the tutorial.

Development Environment

VS2015 IDE is used for building externals and tutorials.  The steps will be slightly different in the latest versions.

Creating tutorial lesson projects

Following steps should be used to create tutorial lesson projects using VS IDE

Create an Win32 project in VS IDE wizard under Lessons folder. The name of the project should be Lessonnn. For example Lesson01.

Select Empty Project and no SDL check

Add include directory in VC directories

In the next post we will discuss creation of  Creating OpenGL Context, Rendering and Mouse/Keyboard input support.

Synopsis

The following discusses different topics in Modern OpenGL Tutorials.

Introduction➹

OpenGL is a graphics library  that can be used to render interactive 2D and 3D graphics applications.

OpenGL has wide range of applications. OpenGL library comes in two flavors. 

Deprecated fixed pipeline based API or legacy OpenGL  ( releases before 3.0)

Shader based API  or Modern OpenGL  (release 3.0 and onwards)

Modern OpenGL uses GPU instead CPU there by increasing user experience tremendously.  legacy OpenGL is still supported for backward compatibility as of latest release 4.6.

Lesson 11: Interactive Orbit or Arcball style Camera

In this post we will discuss implementation of Orbit or Arcball style Camera.

Lesson 10: Creating Interactive Scenes

In this post we will discuss creating complex scenes.

Lesson 09: Interactive First Person Shooter or FPS style Camera

 

In this post we will discuss implementation of FPS style Camera.

Lesson 08: Start Camera and Roll

 In this post understand cameras space and Perspective and Orthographic  projections interactively.

The cube can be rotated using x, y and z keys. The The camera space can be changed by checking LookAt checkbox and supplying  varying input for Position, Target and Up vectors. 

Similarly, Perspective Projection can be changed by checking Perspective checkbox and supplying  varying input for FOV, Near  Plane and Far Plane.  The FOV can be changed by typing page up and down keys or mouse wheel.
Orthographic Projection can be changed by checking Orthographic checkbox and supplying  varying input for X minmax, y minmax and Z minmax values. 

Understanding View space, Perspective and Orthographic Projections

So far our camera was in a fixed position and transformations happened in object space.  In this post we will  look at the larger picture.

As shown in the diagram below, a 3D object in a scene starts off from object space. Model transformation places it in the world space.  Based on the camera position the entire world is transformed into Camera space or view space. This is called view transform. This is done using viewing matrix. It is later moved to screen space using Projection matrix.

So far in our examples, camera is located at the origin and view and projection matrixes are not computed; instead identity matrix is used.  Next we will try to move around the camera and understand different type of projections.

Model Matrix

Model Matrix is responsible for moving 3D objects  from object space to world space. The affine transformation discussed in Lesson 06 are applied.

View Matrix

When the hypothetical camera position is changed, the whole world is transformed around it using view matrix. The view matrix is computed as below from glm as below.

mat4 lookAt(vec3 const& eye, vec3 const& center, vec3 const& up);

The internals is as described below (courtesy : learnopengl.com).

 

1. Camera position

The camera position or eye is a vector in world space that points to the camera's position. 

2. Camera direction vector

The  Camera direction vector is the direction at which the camera is pointing at. This is computed from the scene's origin or center in this case it's  (0,0,0). Subtracting the camera position vector from the scene's origin vector thus results in the direction vector. This must always point to +Z axis by RHS convention.

3. World up vector

The up vector (0,1,0) points to worlds Y axis. This may not be always the case.

4. Right axis vector

The right axis vector represents the positive x-axis of the camera space. This is obtained by doing a cross product on the up vector and the camera direction vector from step 2. 

5. Up axis vector

The Up axis vector points to camera's positive y-axis. It's computed by the cross product of the right and direction vector.

Output:

As mentioned earlier,  the World up vector need not be always (0,1,0).

For example,  if  the camera is moved on top of the cube say (0, 3, 0), we will be looking at the  top of the cube.  The eye is (0,3,0), center is (0,0.0) and up is (1, 0, 0) not (0,1,0).

Projections

The final matrix is projection matrix. There are two types of projections

Orthographic and Perspective. The traits are as below.

The following shows another view with the view frustum. A view frustum is a rectangular box that confines the image rendered to be shown on the screen. 

The volume or the frustum is defined by the left, right, top, bottom, near and far plane values. 

The perspective projection is computed in glm as below

perspective(float fovy, float aspect, float zNear, float zFar);

In Perspective projection, the frustum appears as a truncated pyramid. 

fovy is the  Field of View (FOV) or zoom factor 

aspect is the aspect ratio of the viewport. i.e., width/height.

ZNear is the distance from the camera to the near plane

ZFar is the distance from the camera to the far plane

Example:

perspective(45.0, 1.84, 1.0, 100.0)

The screenshot below shows the perspective projection of the colored cube rotated 20 degree pitch and 20 degree yaw.

The ortho projection is computed in glm as below

ortho(xmin, xmax, ymin, ymax, zmin, zmax);

xmin, xmax are left and right of the view frustum

ymin, ymax are top and bottom of the view frustum

ZMin is the distance from the camera to the near plane

ZMax is the distance from the camera to the far plane

In orthogonal view it appears as a cube. 

Example: ortho(-1.84, 1.84, -1.0, 1.0, 1.0, 100.0); The 1.84 is the aspect ratio.

The screenshot below shows the orthographic  projection of the colored cube rotated 20 degree pitch and 20 degree yaw.

Unproject

Sometimes it's useful to x,y,z coordinates in the object space based on the mouse cursor position. UnProject() accomplishes this.  

The X,Y coordinates from the mouse cursor position and Z value from the depth buffer is used to compute the window coordinates. Later this is passed to glm unProject() along with Model, View and Projection Matrix, to get the co ordinates in world space.

For example, 

In the above, the red dot in the cube represents mouse cursor position  x = 353 y = 168

from depth buffer Z = 0.79

Using  Model, View, and Perspective Projection matrices, the world space coordinate is calculated as

0.22, 0.12, 0.43.

Lesson 07:Drawing Text interactively.

 

As discussed in the  previous article, Text can be drawn in multiple fonts, sizes and colors. Also can be moved around. It's implemented in Lessons\Lesson07 project.

Drawing Text

Modern OpenGL does not support drawing text so it needs to be handled independently. There many popular libraries available such as freetype.

Instead, using GDI Plus APIs text can be drawn into a memory based bitmap. Later the bitmap is loaded as a texture.

Implementation

A new mesh class - TextMesh is defined for loading bitmap as texture. It's used by DrawTextUtil object for loading vertex data and texture data to the vertex and fragment shaders.

DrawTextUtil  uses GDIPlus to create ARGB in memory bitmap containing text to be drawn. The size of the bitmap should be multiples of 128. i.e.,  128, 256, 512 etc.

First bitmap is filled with black color and then Text is drawn using the font and color. Note the text color needs to be non black. Font can be changed by passing LOGFONT structure, Also text color can be changed by passing COLLOREF of the color.

Fragment shader is modified to discard non text fragments for blending with the background.

Client

Client needs to first Startup() GDIPlus in the beginning of the application and Shutdown()  at the end.

Instantiate DrawTextUtil   object by Init() method supply unique texture id and size.

UpdateFontandColor() should be called to supply font details and text color.

DrawText() can be called to draw text. 

The DrawTextUtil   object can be translated, rotated etc.  just like any 3D object.

Lesson06:Understanding Affine Transformation interactively.

 In this post we shall understand affine transformations interactively the three kinds of affine transformations: Scale, Translate and Rotation on X, Y and  Z axes as discussed in the previous post.

The GUI has two windows - Console Window with OpenGL context. This renders a Cube with a texture having each of the 6 faces labeled as below.

Launch Lessons\Lesson06.exe.  Use the input dialog to change values. The cube also be rotated using X,Y, Z keys and using Mouse inputs.

Input Dialog

Provides an user interface to experiment interactively - scaling, translation and rotation.  First input is provided in the input text boxes. It's submitted for rendering the cube when Apply button is clicked. The cumulative value is updated in the caption. Reset button resets values. Both + and -ve values can be submitted. Note:- The values are applied when the associated checkboxes are checked.

Camera 

As we are still passing Identity matrix for view and projection matrices, the camera is sitting at the origin (0,0,0) looking down on -Z axis. In this scenario, the back face is visible with x=0, y=0, z=-0.5.

Scale

First rotate cube by 30 degree pitch and 30 degree yaw. Enter different values for scaling in x, y and z axes.

Translate

First rotate cube by 30 degree pitch and 30 degree yaw. Enter different values for translation in x, y and z axes.

Rotate

As noted earlier, the rotation happens in counter clockwise direction along the axis. The diagram below maps faces to numbers.

Rotation around X axis

Rotate the cube by 90 degrees increments. The sequences of faces that should display are as below.

Rotation around Y axis

Rotate the cube by 90 degrees increments. The sequences of faces that should display are as below.

Rotation around Z axis

Rotate the cube by 90 degrees increments. The sequences of faces that should display are as below.

Order of Transformation

Following order is used:

1. Scale
2. Rotate by Z,X,Y
3. Translate

Note in code, the matrix would be computed in reverse order as below.

       
		M = mat4(1);
		M = translate(M, translateby);
		M = rotate(M, radians((float)(yaw)), vec3(0.0f, 1.0f, 0.0f));
		M = rotate(M, radians((float)(pitch)), vec3(1.0f, 0.0f, 0.0f));
		M = rotate(M, radians((float)(roll)), vec3(0.0f, 0.0f, 1.0f));
		M = scale(M, scaleby);
       
 

Essential 3D math - Matrices

OpenGL uses matrix operations for a lot of purposes. For example, translations, scaling, rotations. Also computing of projection matrices, view matrices etc.

OpenGL uses 4x4 matrix used in homogenous coordinate system. Where each coordinate is represented as [x,y,z,w].Where w=1 for the affine transformations such as  translations, scaling, rotations. W can be any floating point number in the range -1.0 to 1.0 for projection matrices. During rasterization x, y, z coordinates are computed as  x/w, y/w and z/w. This is known as perspective divide.

OpenGL uses columnar matrix multiplication as shown below.

Identity Matrix

A special matrix having all elements along diagonal as 1 as shown below. 

It is associative, I*M = M*I = M. It's used in the computation of rotation, translation and scaling as discussed below.

Translation Matrix

Translation matrix is used for moving around 3d objects.

Example:

Let's say there is a point [1,2,3] and want to translate by [4,5,6]. It can be accomplished as below. Resulting in  [5,7,9].

Scaling Matrix

Scaling matrix is used for Shrinking or Expanding 3d objects.

Example:

Let's say there is a point [1,2, 3] and want to  scale by [2,2,2]. It can be accomplished as below. Resulting in  [2,4,6].

Rotation

In 3D, rotation happens independently  on three cardinal axes X, Y, and Z.

Pitch or Rotation on X axis

The following matrix represents rotation matrix on X axis.

Example:

Let's say there is a point [1,2, 3] and want to  rotate by 90 degrees in X axis. It can be accomplished as below. Resulting in  [1,-3,2].

Yaw or Rotation on Y axis

The following matrix represents rotation matrix on Y axis.

Example:

Let's say there is a point [1,2, 3] and want to  rotate by 90 degrees in Y axis. It can be accomplished as below. Resulting in  [3,2,-1].

Roll or Rotation on Z  axis

The following matrix represents rotation matrix on Z axis.

Example:

Let's say there is a point [1,2, 3] and want to  rotate by 90 degrees in Z axis. It can be accomplished as below. Resulting in  [-2,1,3].

Essential 3D math - Vector

Following math concepts are essential for further understanding.

A 3D vector is represented as [Vx, Vy,  Vz] where  Vx, Vy and Vz represent numbers in 3D cartesian space. Vectors are attributed with a direction represented by its head  and a magnitude computed as square root of the squared sums of its components.

Unary negation and scalar multiplication 

The  negation and multiplication is done on all the components.

For example consider a vector

v=[1,2,3] so  2*v results in [2,4,6]. Similarly -v results in [-1,-2,-3].

Addition and Subtraction

Vectors can be added or subtracted. Here the individual components are added or subtracted. 

For example consider two vectors  A[1,2,3] and B[4,5,6]. 

A+B = [(1+4), (2+5), (3+6)] = [5, 7, 9].

A-B =  [(1-4), (2-5), (3-6)] = [-3, 3, -3].

Graphically represented as below, Note that the direction has changed  when arguments are reversed.

Unary Vectors

also known as normalized vectors are represented as V^{^}  have magnitude of 1. 

For Example V = [3,2,1]. It's normalized vector is calculated as

[2,3,1]/sqrt(4+9+1) = [3/3.74, 2/3.74, 1/3.74]=[0.8, 0.53, 0,27]

Dot Product

Dot Product of  two vectors is equal to the product of their magnitudes and the cosine of the angle between them. The notation used is a.b where a and b are vectors. It's mathematically represented as

a ·b = |a| x |b| x cos(θ).

It's graphically represented as 

To compute angle between two unit vectors, mathematically it can be represented as

The dot product may be a positive  or a negative or a zero.

Cross Product

Cross Product of  two vectors is equal to the product of their magnitudes and the sine of the angle between them. The notation used is axb where a and b are vectors.

Mathematically it's represented as

Cross product yields a vector that is perpendicular to the plane of two vectors a and b. Graphically it's represented as

The cross product of two vector is equal to area of their parallelogram.