Lesson13: Creating Interactive Scenes

In this post we will discuss creating complex scenes.

Lesson12: Interactive Orbit or Arcball style Camera

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

Lesson11: Interactive First Person Shooter or FPS style Camera

 

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

Lesson10: Roll Camera and Action Interactively

Overview 

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

Details

A multi colored cube is rendered interactively after applying inputs for LookAt, Perspective or Ortho projections from an Input dialog. 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. 

System class diagram
The scene class overrides camera with an instance of DualProjectionCamera. It has an instance of MultiColoredCube called cube derived from BaseGeometry class.
cube overrides mesh with an instance of CubeMesh to generate geometry.

Implementation

Scene

The functionality is implemented in the Scene class derived from BaseScene class.

The three methods Init,DrawScene and Cleanup are overridden as below:

The Init method calls 

1. BaseScene::Init to create hosting window and OpenGL Context. 
2. It also attaches camera to a DualProjectionCamera class object. This camera  processes keyboard and mouse inputs as explained earlier.
3. It calls init function on the MultiColoredCube object to populate VBO buffers and bind them. It also compiles and links shader programs.

The DrawScene method draws the multi colored cube and rotates as per keyboard or mouse inputs and Input dialog settings.

The Cleanup method releases the resources related to VBO and shader programs.

Finally the WM_CLOSE  event is  handled in OnCloseWindow function and the window is destroyed and  application is shutdown when the window is closed or Escape key is pressed. 

Application

Scene class is hosted main.cpp. which creates the scene object and displays it. Message pump is added to process windows messages.

Input dialog

The input dialog as shown below can be used to change settings and understand lighting.

Output

The output looks as shown in the top. 

Lesson 09: Importing WaveFront OBJ Models

Overview 

As discussed in the  previous article, we saw how geometric objects can be imported from obj and mtl files. Also, the implementation of the WFObjMesh, WFOBJInfo and WFObj were covered. 

In this post we will try to render a model from "dolphin.obj" and "dolphin.mtl" files.

Details

The purpose of  Lesson08 is to demonstrate importing an obj and mtl files to extract geometry and material information.

System  class diagram

The scene class overrides camera with an instance of ThreeDCamera. It has a pointer to an instance of WFObj  called pshape derived from BaseGeometry class.

Implementation

Scene

The functionality is implemented in the Scene class derived from BaseScene class.

The three methods Init, DrawScene and Cleanup are overridden as below:

The Init method calls 

1. BaseScene::Init to create hosting window and OpenGL Context. 
2. It creates an input dialog to import obj, and mtl files and input texture files.
3. It calls init function with an instance of  WFOBJInfo object. Internally it creates a WFObjMesh object to load geometry and material information from the object files and to populate VBO/EBO buffers and bind them. Also create texture if necessary 
4. It also compiles and links shader programs.

The DrawScene method draws a string and image. 

The message handler for IDOK is called when Apply button is pressed after updates are made in the input dialog. It refreshes the display.

The message handler for IDCANCEL is called when in Cancel button is pressed the input dialog. It calls 

OnCloseWindow to destroy window.

Finally the WM_CLOSE  event is  handled in OnCloseWindow function and the window is destroyed and  application is shutdown when the window is closed or Escape key is pressed. 

Application

Scene class is hosted main.cpp. which creates the scene object and displays it. Message pump is added to process windows messages.

Input dialog

The input dialog as shown below can be used to change settings and understand drawing text and images.

Output

The output looks as shown in the top. 

Lesson08: Understanding Affine Transformation interactively.

Overview 

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 rotation has been already demonstrated in the earlier examples. In this post we will deep dive into Translation and Scaling.

Details

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.

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.

The cube also be rotated using X,Y, Z keys and using Mouse inputs.

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);

Lesson07: Drawing Text and Images interactively.

Overview 

As discussed in the  previous article, we saw how Text can be drawn in multiple fonts, sizes and colors and images can be placed side by side.

Also, the implementation of the TextMesh , TextureUtil  and TextImageSketcher were covered. 

In this post we will try to draw  text and image interactively.

Details

The purpose of  Lesson07 is to draw text and image and work with them interactively by changing fonts, colors, resize height and width.

System  class diagram

The scene class does use camera. It has an pointer to TextImageSketcher called ptextutl.

Implementation

Scene

The functionality is implemented in the Scene class derived from BaseScene class.

The three methods Init, DrawScene and Cleanup are overridden as below:

The Init method calls 

1. BaseScene::Init to create hosting window and OpenGL Context. 
2. It creates an input dialog to work with text and images interactively.
3. It calls init function with texture id GL_TEXTURE0 + 4, height and width of the bitmap. on the TextImageSketcher object to populate VBO/EBO buffers and bind them. Also create texture and bitmap. 
4. It also compiles and links shader programs.

The DrawScene method draws a string and image. 

The Cleanup method releases the resources related to VBO/EBO, Texture related resources and shader programs.

The message handler for IDOK is called when Apply button is pressed after updates are made in the input dialog. It refreshes the display.

The message handler for IDCANCEL is called when in Cancel button is pressed the input dialog. It calls 

OnCloseWindow to destroy window.

Finally the WM_CLOSE  event is  handled in OnCloseWindow function and the window is destroyed and  application is shutdown when the window is closed or Escape key is pressed. 

Application

Scene class is hosted main.cpp. which creates the scene object and displays it. Message pump is added to process windows messages.

Input dialog

The input dialog as shown below can be used to change settings and understand drawing text and images.

Output

The output looks as shown in the top. 

Lesson06: Lighting a Textured Cube interactively

Overview 

In the previous posts drawing a textured cube were explained. Also, the implementation of the LightingUtil and LightedTexCube were covered. 

In this post we will try to draw a textured cube with lighting interactively. The cube looks as shown above. The cube looks elongated because aspect ratio is not applied.

Details

The purpose of  Lesson06 is to create a lighted textured cube and work with it interactively with different types of light to understand nuances of lighting.

System  class diagram

The scene class overrides camera with an instance of ThreeDCamera. It has an instance of LightedTexCube called cube derived from TexturedCube class.

Implementation

Scene

The functionality is implemented in the Scene class derived from BaseScene class.

The three methods Init, DrawScene and Cleanup are overridden as below:

The Init method calls 

1. BaseScene::Init to create hosting window and OpenGL Context. 
2. It also attaches camera to a ThreeDCamera class object. This camera  processes keyboard and mouse inputs as explained earlier.
3. It creates an input dialog to work with lighting settings interactively.
4. It calls init function on the LightedTexCube object to populate VBO/EBO buffers and bind them. 
5. Load textures from the image file
6. It also compiles and links shader programs.

The DrawScene method draws the cube with texture wrapped and rotates as per keyboard or mouse inputs. The lighting settings are taken from the light instance of LightingUtil of the cube object.

The Cleanup method releases the resources related to VBO/EBO, Texture related resources and shader programs.

The message handler for IDOK is called when Apply button is pressed after updates are made in the input dialog. It refreshes the display.

The message handler for IDCANCEL is called when in Cancel button is pressed the input dialog. It calls 

OnCloseWindow to destroy window.

Finally the WM_CLOSE  event is  handled in OnCloseWindow function and the window is destroyed and  application is shutdown when the window is closed or Escape key is pressed. 

#include "Scene\BaseScene.h"
#include "Scene\Camera\ThreeDCamera.h"
#include "Geometry\LightingUtil.h"
#include "Geometry\Cube\LightedTexCube.h"
#include "InputDlg.h"

DWORD WINAPI ThreadFunction(LPVOID lpParam);

class Scene:public BaseScene
{
public:
	//message handler
	BEGIN_MSG_MAP(Scene0)
		MESSAGE_HANDLER(WM_CLOSE, OnCloseWindow)
		COMMAND_ID_HANDLER(IDOK, OnDoRefresh)
		COMMAND_ID_HANDLER(IDCANCEL, OnClose)
		CHAIN_MSG_MAP(BaseScene)
	END_MSG_MAP()


	//override
	int Init(RECT rect, WCHAR *windowname)
	{
		//create host window and context
		BaseScene::Init(rect, windowname);

		CreateThread(NULL, 0, ThreadFunction, this, 0, NULL);

		//attach mouse keyboard input handler
		camera = new ThreeDCamera(m_hWnd);
		::Sleep(500);
		updatecube();

		return 0;
	}

	void updatecube()
	{
		if (pcube != nullptr)
		{
			auto src = pcube->light.lightsrc.src;
			pdlg->update(&pcube->light);
			if (src != pcube->light.lightsrc.src)
			{
				pcube->Cleanup();
				delete pcube;
				pcube = nullptr;
			}
		}

		if (pcube == nullptr)
		{
			pcube = new LightedTexCube();
			pdlg->update(&pcube->light);
			pcube->Init(0, R"(..\resources\textures\rocks2.bmp)");
		}
	}

	//release resources
	void Cleanup()
	{
		pcube->Cleanup();
		delete camera;
	}


	LRESULT OnDoRefresh(WORD wParam, WORD wParam2, HWND lParam, BOOL& bHandled)
	{
		bHandled = TRUE;
		updatecube();
		Invalidate();
		return 0;
	}

	LRESULT OnClose(WORD wParam, WORD wParam2, HWND lParam, BOOL& bHandled)
	{
		return OnCloseWindow(0, 0, (LPARAM)nullptr, bHandled);
	}


	//draw the scene
	void DrawScene()
	{
		glClear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT);

		SceneCamera()->augumentModelMatrix(*pcube);
		wstring wcap = L"Lighting Settings - " + pcube->getangless();
		SetWindowTextW(wcap.c_str());
		pcube->Draw();
		SceneCamera()->MM.Reset();
	}

	//Close the window
	LRESULT OnCloseWindow(UINT uMsg, WPARAM wParam, LPARAM lParam, BOOL& bHandled)
	{
		bHandled = TRUE;
		DestroyWindow();
		PostQuitMessage(0);
		return 0;
	}

	inline ThreeDCamera*  SceneCamera()
	{
		static auto ret = dynamic_cast<ThreeDCamera*>(camera);
		return ret;
	}

	void CreateInputDlg()
	{
		pdlg = new InputDlg();
		pdlg->Create(m_hWnd);
		pdlg->ShowWindow(SW_SHOW);
		Invalidate();
	}

private:
	LightedTexCube *pcube = nullptr;
	int IDM_INPUTDLG = 1001;
	InputDlg* pdlg;

};

DWORD WINAPI ThreadFunction(LPVOID lpParam)
{
	Scene* pscene = (Scene*)lpParam;
	pscene->CreateInputDlg();

	MSG msg;
	while (GetMessage(&msg, 0, 0, 0))
	{
		TranslateMessage(&msg);
		DispatchMessageA(&msg);
	}

	return 0;
}

Application

Scene class is hosted main.cpp. which creates the scene object and displays it. Message pump is added to process windows messages.

#include "Scene.h"

Scene scene;

int WINAPI WinMain(HINSTANCE inst, HINSTANCE prev, LPSTR cmd_line, int show)
{
	scene.Init(RECT{ 100, 100, 780, 500 }, L"Lesson06: Lighting");
	scene.ShowWindow(show);

	MSG msg;
	while (GetMessage(&msg, 0, 0, 0)) 
	{
		TranslateMessage(&msg);
		DispatchMessageA(&msg);
	}

	return 0;
}

Input dialog

The input dialog as shown below can be used to change settings and understand lighting.

Output

The output looks as shown in the top. 

Lesson05: Apply Texture to a Cube Interactively

Overview 

In the previous posts the graphics pipeline and vertex processing were explained. Also, the implementation of the TextureUtil and TexturedCube were covered. 

In this post we will try to draw a cube with brick texture as shown above. The cube looks elongated because aspect ratio is not applied.

Details

The purpose of  Lesson04 is to create a Window initialized with OpenGL context and draw a cube wrapped with a brick texture.

System  class diagram

The scene class overrides camera with an instance of 3DCamera. It has an instance of TexturedCube called cube derived from BaseGeometry class.

cube overrides mesh with an instance of CubeMesh to generate geometry and TextureUtil object to load texture.

Implementation

Scene

The functionality is implemented in the Scene class derived from BaseScene class.

The three methods Init,DrawScene and Cleanup are overridden as below:

The Init method calls 

1. BaseScene::Init to create hosting window and OpenGL Context. 
2. It also attaches camera to a ThreeDCamera class object. This camera  processes keyboard and mouse inputs as explained earlier.
3. It calls init function on the IndexedCube object to populate VBO/EBO buffers and bind them. 
4. Load textures from the image file
5. It also compiles and links shader programs.

The DrawScene method draws the cube with texture wrapped and rotates as per keyboard or mouse inputs.

The Cleanup method releases the resources related to VBO/EBO, Texture related resoruces and shader programs.

Finally the WM_CLOSE  event is  handled in OnCloseWindow function and the window is destroyed and  application is shutdown when the window is closed or Escape key is pressed. 

#include "Scene\BaseScene.h"
#include "Scene\Camera\ThreeDCamera.h"
#include "Geometry\Cube\TexturedCube.h"

class Scene:public BaseScene
{
public:
	//message handler
	BEGIN_MSG_MAP(Scene0)
		MESSAGE_HANDLER(WM_CLOSE, OnCloseWindow)
		CHAIN_MSG_MAP(BaseScene)
	END_MSG_MAP()

	//override
	int Init(RECT rect, WCHAR *windowname)
	{
		//create host window and context
		BaseScene::Init(rect, windowname);

		//attach mouse keyboard input handler
		camera = new ThreeDCamera(m_hWnd);

		//Create cube an set texture filename
		cube.Init(0, R"(..\resources\textures\bricks2.jpg)");
		
		
		return 0;
	}

	//release resources
	void Cleanup()
	{
		cube.Cleanup();
		delete camera;
		
	}
	
	//draw the scene
	void DrawScene()
	{
		glClear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT);
		//get model view projection matrix. 
		//only model is modified
		//view and projection will be identity matrix
		SceneCamera()->augumentModelMatrix(cube);

		cube.Draw();

		SceneCamera()->MM.Reset();

	}

	//Close the window
	LRESULT OnCloseWindow(UINT uMsg, WPARAM wParam, LPARAM lParam, BOOL& bHandled)
	{
		bHandled = TRUE;
		DestroyWindow();
		PostQuitMessage(0);
		return 0;
	}

	inline ThreeDCamera*  SceneCamera()
	{
		static auto ret = dynamic_cast<ThreeDCamera*>(camera);
		return ret;
	}

private:
	TexturedCube cube;

};

Application

Scene class is hosted main.cpp. which creates the scene object and displays it. Message pump is added to process windows messages.

#include "Scene.h"

Scene scene;

int WINAPI WinMain(HINSTANCE inst, HINSTANCE prev, LPSTR cmd_line, int show)
{
	scene.Init(RECT{ 100, 100, 780, 500 }, L"Modern OpenGL-Tutorial - Lesson04");
	scene.ShowWindow(show);

	MSG msg;
	while (GetMessage(&msg, 0, 0, 0)) 
	{
		TranslateMessage(&msg);
		DispatchMessageA(&msg);
	}

	return 0;
}

Input dialog

The input dialog as shown below can be used to change settings and understand lighting.

Output

The output looks as shown in the top. The cube is rotated by 20 degrees pitch and 20 degrees yaw. The camera position at the origin looking down on -Z axis or the back face of the cube.

To rotate the cube X,Y and Z keys can be used. They rotate respectively pitch, yaw and roll the cube  by 10 degrees.

In the next post we shall create a colored cube with transformation.