Transcript Essentials of Interactive Computer Graphics: Concepts and Implementation K. Sung, P.

Essentials of Interactive Computer Graphics: Concepts and Implementation
K. Sung, P. Shirley, S. Baer
Chapter 5:
MVC Architecture
Chapter 5
Essentials of Interactive Computer Graphics: Concepts and Implementation
K. Sung, P. Shirley, S. Baer
We will …




Learn MVC software architecture
Describe MVC-based solution for ball
shooting
Examine Expendability of MVC solutions
Develop software library support for
MVC framework: UWBGL
Chapter 5
Essentials of Interactive Computer Graphics: Concepts and Implementation
K. Sung, P. Shirley, S. Baer
In a nutshell …

So far …




Programming model: event driven
GUI API: elements and event registrations
Graphics API: GHC initialization and
drawing with RC
This chapter:

MVC Architecture: consolidate all of the
above!
Chapter 5
Essentials of Interactive Computer Graphics: Concepts and Implementation
The MVC Architecture
Chapter 5
K. Sung, P. Shirley, S. Baer
Essentials of Interactive Computer Graphics: Concepts and Implementation
K. Sung, P. Shirley, S. Baer
Model-View-Controller

Model



View



Application state
The persistent variables
Draws the application state
Graphics API support
Controller


Accepts input from user to change the model
GUI API support
Chapter 5
Essentials of Interactive Computer Graphics: Concepts and Implementation
K. Sung, P. Shirley, S. Baer
Model of Ball shooting program
Chapter 5
Essentials of Interactive Computer Graphics: Concepts and Implementation
K. Sung, P. Shirley, S. Baer
Model:

Application State:


All persistent variables
Support:




State Inquiries
State Changes
Timer event support (Simulation update)
State Visualization
Chapter 5
Essentials of Interactive Computer Graphics: Concepts and Implementation
K. Sung, P. Shirley, S. Baer
View of Ball shooting program
Chapter 5
Essentials of Interactive Computer Graphics: Concepts and Implementation
K. Sung, P. Shirley, S. Baer
Controller of Ball shooting program
Chapter 5
Essentials of Interactive Computer Graphics: Concepts and Implementation
K. Sung, P. Shirley, S. Baer
Expanding Ball shooting program
Chapter 5
Essentials of Interactive Computer Graphics: Concepts and Implementation
Implement 2 views …
Chapter 5
K. Sung, P. Shirley, S. Baer
Essentials of Interactive Computer Graphics: Concepts and Implementation
K. Sung, P. Shirley, S. Baer
Notes on MVC …

Simplicity:



Portability:


Model: usually most complex
MVC: allow design of Model to be independent
from user interaction and from drawing
E.g., Change of controller ports Model to a
different GUI platform
Expendability:

As we have seen: adding new view/controller pairs
is straightforward
Chapter 5
Essentials of Interactive Computer Graphics: Concepts and Implementation
K. Sung, P. Shirley, S. Baer
MVC: component interactions

User change application state:


Application changes its own state


Via timer events
All controllers and views must present consistent
state



Via controllers
GUI element must be correct: e.g., slider bar reflecting the
falling hero ball position
Drawing must be update to date
Classic MVC architecture

Elaborate protocol to ensure all states are consistent …
Chapter 5
Essentials of Interactive Computer Graphics: Concepts and Implementation
K. Sung, P. Shirley, S. Baer
MVC with real-time simulation …

Real-time simulation


Every 25 milliseconds: timer fires!
Application state likely to change


During Timer event … ALWAYS




MUST redraw all views!!
Poll/update all controllers
Update Application state
Update all views
Simple update protocol
Chapter 5
Essentials of Interactive Computer Graphics: Concepts and Implementation
K. Sung, P. Shirley, S. Baer
2-View ball shooting component interaction
Chapter 5
Essentials of Interactive Computer Graphics: Concepts and Implementation
View/Controller Abstraction
Chapter 5
K. Sung, P. Shirley, S. Baer
Essentials of Interactive Computer Graphics: Concepts and Implementation
K. Sung, P. Shirley, S. Baer
GUI Support:

Normal GUI support



Main application window
GUI elements: buttons, slider bars, etc.
Graphics Drawing:

UIWindow class:



To display GHC frame buffer
“drawing area” that can receive mouse events
Capable of placing itself into application
window
Chapter 5
Essentials of Interactive Computer Graphics: Concepts and Implementation
K. Sung, P. Shirley, S. Baer
WindowHandler class

A View/Controller pair abstraction

Reference to View (GraphicsSystem class)

The Rendering Context (RC)



Reference to Controller

The GUI drawing area


UWBMFC_UIWindow class
Activates View and draw to UI drawing area


In D3D case: DIRECT3DDEVICE(9)
In OGL case: HGLRC
RC draw to UIWindow
Receives mouse events from UIWindow

Application can poll the mouse events
Chapter 5
Essentials of Interactive Computer Graphics: Concepts and Implementation
K. Sung, P. Shirley, S. Baer
Tutorial 5.1: UWBGL libraries

The same square drawing program

MFC_Lib1


MFC_UIWindow
UWBGL_Lib1


WindowHandler
GraphcsSystem
Chapter 5
Essentials of Interactive Computer Graphics: Concepts and Implementation
K. Sung, P. Shirley, S. Baer
UWB_MFC_LIB1

Our GUI wrapper


Wrap over GUI API to “simplify” programming with GUI
Library files (9 files):

uwbgl_MFCDefines.h:



uwbgl_MFC_Lib1.h:






Slider bard with echo
uwbgl_MFCUIWindow1.h/.cpp


ReplaceDialogControl implementation
uwbgl_MFCSliderCtrlWithEcho1.h/.cpp


Include file for developers (us)
Being included in the Stdafx.h of the project
uwbgl_MFCUtility.h/.cpp


MFC compilation parameter
We will not change this
UI drawing area designed to be referenced by WindowHandler
Accepts Graphics drawing results
Able to forward mouse events (to our application)
Will _use_ this library (calling functions)
Will not change this library (will not modify any of the functions)
Chapter 5
Essentials of Interactive Computer Graphics: Concepts and Implementation
MFC_Lib1 Classes:
Chapter 5
K. Sung, P. Shirley, S. Baer
Essentials of Interactive Computer Graphics: Concepts and Implementation
K. Sung, P. Shirley, S. Baer
UWBGL_D3D_Lib1

First attempt at



wrapping over Graphics API
Facilitate support for implementing MVC
Library files: (14 files) in three folders

Common Files


D3D Files


Direct3D specific support
Header Files


Graphics API independent programming code
Header files for programmer (our programs)
math3d++


Math support (from public domain)
not developed at UWB, mainly, we will only use this library.
Chapter 5
Essentials of Interactive Computer Graphics: Concepts and Implementation
UWBGL_D3D_Lib1: files
Chapter 5
K. Sung, P. Shirley, S. Baer
Essentials of Interactive Computer Graphics: Concepts and Implementation
K. Sung, P. Shirley, S. Baer
UWBGL_Lib1: WindowHandler + GraphicsSystem
Chapter 5
Essentials of Interactive Computer Graphics: Concepts and Implementation
K. Sung, P. Shirley, S. Baer
UWBGL_Lib1: Geometry and Math
Chapter 5
Essentials of Interactive Computer Graphics: Concepts and Implementation
K. Sung, P. Shirley, S. Baer
UWBGL_Lib1: Common files

(uwbgl_)Common.h:


Defines Constants (PI)
Macros



E.g., degree-to-radian conversion
Compilation parameters
We will not change this file
Chapter 5
Essentials of Interactive Computer Graphics: Concepts and Implementation
K. Sung, P. Shirley, S. Baer
UWBGL_Lib1: WindowHandler

IWindowHandler:


In Common/WindowHandler folder
View/Controller pair abstraction
Chapter 5
Essentials of Interactive Computer Graphics: Concepts and Implementation
K. Sung, P. Shirley, S. Baer
Lib1: WindowHandler1.h/cpp

In Common/WindowHandler folder


API independent implementation of
IWindowHandler abstraction
Designed to be subclass by Graphics
API specific classes


E.g.,: D3DWindowHandler or
E.g.,: OGLWindowHandler
Chapter 5
Essentials of Interactive Computer Graphics: Concepts and Implementation
K. Sung, P. Shirley, S. Baer
Lib1: Header Files Folder


2 .h files
D3DDefines.h


All compilation parameters
(uwbgl_)D3D_Lib1.h: this is the “.h” file
meant to be included by programmers

Being included in the Stdafx.h of the
project
Chapter 5
Essentials of Interactive Computer Graphics: Concepts and Implementation
K. Sung, P. Shirley, S. Baer
Lib1: D3D Files Folder


8 files
D3DCircleGeom/D3DRectangGeom (h/cpp)



D3DGraphicsSystem.h/.cpp


In D3D/D3D_Geoms folder
Circle and rectangle drawing
In D3D/D3D_GraphicsSystem folder
D3DWindowHandler.h/.cpp

D3D/D3D_WindowHandler folder

Supports:


BeginDraw()
EndDrawAndShow
Chapter 5
Essentials of Interactive Computer Graphics: Concepts and Implementation
K. Sung, P. Shirley, S. Baer
WindowHandler Hierarchy:

IWindowHandler


WindowHandler


Reference to UIWindow
D3D_WindowHandler


Pure abstract
D3D RC reference
Application handler



E.g. DrawOnlyHandler
Must define UIWindow
Refer to next slider …
Chapter 5
Essentials of Interactive Computer Graphics: Concepts and Implementation
K. Sung, P. Shirley, S. Baer
Recall … View/Controller pair …
Chapter 5
Essentials of Interactive Computer Graphics: Concepts and Implementation
K. Sung, P. Shirley, S. Baer
Tutorial 5.1: Project

The CModel class:

Contains application state and support


Rectangle and circle + Manipulation functions
Knows how to draw itself
Chapter 5
Essentials of Interactive Computer Graphics: Concepts and Implementation
K. Sung, P. Shirley, S. Baer
DrawOnlyHandler class


Concrete WindowHandler class
Only handles output drawing …
Chapter 5
Essentials of Interactive Computer Graphics: Concepts and Implementation
K. Sung, P. Shirley, S. Baer
DrawOnlyHandler::DrawGraphics()
Chapter 5
Essentials of Interactive Computer Graphics: Concepts and Implementation
K. Sung, P. Shirley, S. Baer
Tutorial 5.1: GUI Main Window

CTutorialDlg : subclass from CDialog
Chapter 5
Essentials of Interactive Computer Graphics: Concepts and Implementation
TutorialDlg::OnInitDlg()

Recall, this is GUI, SystemInitialization!


Must create Graphics API GHC
Create/initialize GUI elements. Etc. …
Chapter 5
K. Sung, P. Shirley, S. Baer
Essentials of Interactive Computer Graphics: Concepts and Implementation
CTutorial::OnTimer()
Chapter 5
K. Sung, P. Shirley, S. Baer
Essentials of Interactive Computer Graphics: Concepts and Implementation
K. Sung, P. Shirley, S. Baer
Tutorial 5.1: Summary


Model: is the CModel class. Very simple.
Controllers: Two controllers:



View/Controller Pair: One





CTutorialDlg contains all other components
Components are not aware of each other
CTutorialDlg polls/updates component states and triggers all redraws
Because components are not aware of each other, we can insert/delete components
from CTutorialDlg.
Inconsistent state:



DrawOnlyHandler: works via UIWindow
Collaborations:


CTutorialDlg (application container window)
CCircleRadiusControls
May occur in between OnTimer events!
However, the inconsistency will only last 25 mSec!
Redraw/Paint



Performed at the end of 25 mSec!
Notice: we do not service the onPaint event!
Our redraw occurs at fixed intervals of once every 25 mSec.
Chapter 5
Essentials of Interactive Computer Graphics: Concepts and Implementation
K. Sung, P. Shirley, S. Baer
Tutorial 5.2: Mouse Events

Left mouse click/drag to define circle

The Model:
Chapter 5
Essentials of Interactive Computer Graphics: Concepts and Implementation
Tut 5.2: The Controller

Design:

Implementation (declaration)
Chapter 5
K. Sung, P. Shirley, S. Baer
Essentials of Interactive Computer Graphics: Concepts and Implementation
K. Sung, P. Shirley, S. Baer
Tut 5.2: Controller implementation
Chapter 5
Essentials of Interactive Computer Graphics: Concepts and Implementation
K. Sung, P. Shirley, S. Baer
Inconsistent State

Mouse events – serviced immediately!


Until next redraw


Via call backs
Internal circle radius is different from what
is drawn on the screen
Inconsistency lasts at most 25 mSec

Typical user cannot see the inconsistency
Chapter 5
Essentials of Interactive Computer Graphics: Concepts and Implementation
K. Sung, P. Shirley, S. Baer
UWBGL_Lib2

WindowHandler::HardwareToDevice()


Origin from upper left to lower left
UWB_EchoToStatusArea(echoString)

Output echoString to IDC_STATUS element … we must


define a static textbox and
name it IDC_STATUS at GUI building time

If element not defined, echoString is not shown
At initialization, sets UWB_hEchoWindow

UWB_hEchoWindow defined in


Chapter 5
Lib2:Common Files/Utilities/uwbgl_Utility1.cpp
Essentials of Interactive Computer Graphics: Concepts and Implementation
K. Sung, P. Shirley, S. Baer
Tut 5.3: Real-time simulation

ball … drops continuously
Chapter 5
Essentials of Interactive Computer Graphics: Concepts and Implementation
Tut 5.3: The Model
Chapter 5
K. Sung, P. Shirley, S. Baer
Essentials of Interactive Computer Graphics: Concepts and Implementation
K. Sung, P. Shirley, S. Baer
Tut 5.3: The simulation …
Chapter 5
Essentials of Interactive Computer Graphics: Concepts and Implementation
K. Sung, P. Shirley, S. Baer
Tut 5.3: OnTimer service …

During OnTimer (once every 25 mSec)

Simply call


UpdateSimulation()
And

Redraws everything (DrawGraphics()).
Chapter 5
Essentials of Interactive Computer Graphics: Concepts and Implementation
Tut 5.4: Two views


Multiple View/Controller pairs
Requires:



2 Rendering Contexts (RC) or
RC connecting to separate GHC buffers
GraphicsSystem class improvements
Chapter 5
K. Sung, P. Shirley, S. Baer
Essentials of Interactive Computer Graphics: Concepts and Implementation
K. Sung, P. Shirley, S. Baer
Drawing to multiple buffers

OGL:



Each RC connects to unique buffer
Need multiple RC (HGLRC)
D3D:


RC (DIRECT3DDEVICE) capable of driving
multiple buffers
SwapChain
Chapter 5
Essentials of Interactive Computer Graphics: Concepts and Implementation
K. Sung, P. Shirley, S. Baer
UWBGL_Lib3: WindowHandler + Supports
Chapter 5
Essentials of Interactive Computer Graphics: Concepts and Implementation
K. Sung, P. Shirley, S. Baer
D3D: Using SwapChain


GraphicsSystem class
WindowHandler class (using SwapChain)
Chapter 5
Essentials of Interactive Computer Graphics: Concepts and Implementation
UWBGL_Lib3: Utilities

In Common files/
Chapter 5
K. Sung, P. Shirley, S. Baer
Essentials of Interactive Computer Graphics: Concepts and Implementation
UWBGL_Lib3: Utilities
Chapter 5
K. Sung, P. Shirley, S. Baer
Essentials of Interactive Computer Graphics: Concepts and Implementation
Inter-Ball Collision
Chapter 5
K. Sung, P. Shirley, S. Baer