Essentials of Interactive Computer Graphics: Concepts and Implementation K. Sung, P. Shirley, S. Baer Chapter 5 Chapter 5: MVC Architecture

Essentials of Interactive Computer Graphics: Concepts and Implementation K. Sung, P. Shirley, S. Baer Chapter 5 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

Essentials of Interactive Computer Graphics: Concepts and Implementation K. Sung, P. Shirley, S. Baer Chapter 5 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!

Essentials of Interactive Computer Graphics: Concepts and Implementation K. Sung, P. Shirley, S. Baer Chapter 5 The MVC Architecture

Essentials of Interactive Computer Graphics: Concepts and Implementation K. Sung, P. Shirley, S. Baer Chapter 5 Model-View-Controller Model Application state The persistent variables View Draws the application state Graphics API support Controller Accepts input from user to change the model GUI API support

Essentials of Interactive Computer Graphics: Concepts and Implementation K. Sung, P. Shirley, S. Baer Chapter 5 Model of Ball shooting program

Essentials of Interactive Computer Graphics: Concepts and Implementation K. Sung, P. Shirley, S. Baer Chapter 5 Model: Application State: All persistent variables Support: State Inquiries State Changes Timer event support (Simulation update) State Visualization

Essentials of Interactive Computer Graphics: Concepts and Implementation K. Sung, P. Shirley, S. Baer Chapter 5 View of Ball shooting program

Essentials of Interactive Computer Graphics: Concepts and Implementation K. Sung, P. Shirley, S. Baer Chapter 5 Controller of Ball shooting program

Essentials of Interactive Computer Graphics: Concepts and Implementation K. Sung, P. Shirley, S. Baer Chapter 5 Expanding Ball shooting program

Essentials of Interactive Computer Graphics: Concepts and Implementation K. Sung, P. Shirley, S. Baer Chapter 5 Implement 2 views …

Essentials of Interactive Computer Graphics: Concepts and Implementation K. Sung, P. Shirley, S. Baer Chapter 5 Notes on MVC … Simplicity: Model: usually most complex MVC: allow design of Model to be independent from user interaction and from drawing Portability: E.g., Change of controller ports Model to a different GUI platform Expendability: As we have seen: adding new view/controller pairs is straightforward

Essentials of Interactive Computer Graphics: Concepts and Implementation K. Sung, P. Shirley, S. Baer Chapter 5 MVC: component interactions User change application state: Via controllers Application changes its own state Via timer events All controllers and views must present consistent state 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 …

Essentials of Interactive Computer Graphics: Concepts and Implementation K. Sung, P. Shirley, S. Baer Chapter 5 MVC with real-time simulation … Real-time simulation Every 25 milliseconds: timer fires! Application state likely to change MUST redraw all views!! During Timer event … ALWAYS Poll/update all controllers Update Application state Update all views Simple update protocol

Essentials of Interactive Computer Graphics: Concepts and Implementation K. Sung, P. Shirley, S. Baer Chapter 5 2-View ball shooting component interaction

Essentials of Interactive Computer Graphics: Concepts and Implementation K. Sung, P. Shirley, S. Baer Chapter 5 View/Controller Abstraction

Essentials of Interactive Computer Graphics: Concepts and Implementation K. Sung, P. Shirley, S. Baer Chapter 5 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

Essentials of Interactive Computer Graphics: Concepts and Implementation K. Sung, P. Shirley, S. Baer Chapter 5 WindowHandler class A View/Controller pair abstraction Reference to View (GraphicsSystem class) The Rendering Context (RC) In D3D case: DIRECT3DDEVICE(9) In OGL case: HGLRC Reference to Controller The GUI drawing area UWBMFC_UIWindow class Activates View and draw to UI drawing area RC draw to UIWindow Receives mouse events from UIWindow Application can poll the mouse events

Essentials of Interactive Computer Graphics: Concepts and Implementation K. Sung, P. Shirley, S. Baer Chapter 5 Tutorial 5.1: UWBGL libraries The same square drawing program MFC_Lib1 MFC_UIWindow UWBGL_Lib1 WindowHandler GraphcsSystem

Essentials of Interactive Computer Graphics: Concepts and Implementation K. Sung, P. Shirley, S. Baer Chapter 5 UWB_MFC_LIB1 Our GUI wrapper Wrap over GUI API to “simplify” programming with GUI Library files (9 files): uwbgl_MFCDefines.h: MFC compilation parameter We will not change this uwbgl_MFC_Lib1.h: Include file for developers (us) Being included in the Stdafx.h of the project uwbgl_MFCUtility.h/.cpp ReplaceDialogControl implementation uwbgl_MFCSliderCtrlWithEcho1.h/.cpp Slider bard with echo uwbgl_MFCUIWindow1.h/.cpp 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)

Essentials of Interactive Computer Graphics: Concepts and Implementation K. Sung, P. Shirley, S. Baer Chapter 5 MFC_Lib1 Classes:

Essentials of Interactive Computer Graphics: Concepts and Implementation K. Sung, P. Shirley, S. Baer Chapter 5 UWBGL_D3D_Lib1 First attempt at wrapping over Graphics API Facilitate support for implementing MVC Library files: (14 files) in three folders Common Files Graphics API independent programming code D3D Files Direct3D specific support Header Files Header files for programmer (our programs) math3d++ Math support (from public domain) not developed at UWB, mainly, we will only use this library.

Essentials of Interactive Computer Graphics: Concepts and Implementation K. Sung, P. Shirley, S. Baer Chapter 5 UWBGL_D3D_Lib1: files

Essentials of Interactive Computer Graphics: Concepts and Implementation K. Sung, P. Shirley, S. Baer Chapter 5 UWBGL_Lib1: WindowHandler + GraphicsSystem

Essentials of Interactive Computer Graphics: Concepts and Implementation K. Sung, P. Shirley, S. Baer Chapter 5 UWBGL_Lib1: Geometry and Math

Essentials of Interactive Computer Graphics: Concepts and Implementation K. Sung, P. Shirley, S. Baer Chapter 5 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

Essentials of Interactive Computer Graphics: Concepts and Implementation K. Sung, P. Shirley, S. Baer Chapter 5 UWBGL_Lib1: WindowHandler IWindowHandler: In Common/WindowHandler folder View/Controller pair abstraction

Essentials of Interactive Computer Graphics: Concepts and Implementation K. Sung, P. Shirley, S. Baer Chapter 5 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

Essentials of Interactive Computer Graphics: Concepts and Implementation K. Sung, P. Shirley, S. Baer Chapter 5 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

Essentials of Interactive Computer Graphics: Concepts and Implementation K. Sung, P. Shirley, S. Baer Chapter 5 Lib1: D3D Files Folder 8 files D3DCircleGeom/D3DRectangGeom (h/cpp) In D3D/D3D_Geoms folder Circle and rectangle drawing D3DGraphicsSystem.h/.cpp In D3D/D3D_GraphicsSystem folder D3DWindowHandler.h/.cpp D3D/D3D_WindowHandler folder Supports: BeginDraw() EndDrawAndShow

Essentials of Interactive Computer Graphics: Concepts and Implementation K. Sung, P. Shirley, S. Baer Chapter 5 WindowHandler Hierarchy: IWindowHandler Pure abstract WindowHandler Reference to UIWindow D3D_WindowHandler D3D RC reference Application handler E.g. DrawOnlyHandler Must define UIWindow Refer to next slider …

Essentials of Interactive Computer Graphics: Concepts and Implementation K. Sung, P. Shirley, S. Baer Chapter 5 Recall … View/Controller pair …

Essentials of Interactive Computer Graphics: Concepts and Implementation K. Sung, P. Shirley, S. Baer Chapter 5 Tutorial 5.1: Project The CModel class: Contains application state and support Rectangle and circle + Manipulation functions Knows how to draw itself

Essentials of Interactive Computer Graphics: Concepts and Implementation K. Sung, P. Shirley, S. Baer Chapter 5 DrawOnlyHandler class Concrete WindowHandler class Only handles output drawing …

Essentials of Interactive Computer Graphics: Concepts and Implementation K. Sung, P. Shirley, S. Baer Chapter 5 DrawOnlyHandler::DrawGraphics()

Essentials of Interactive Computer Graphics: Concepts and Implementation K. Sung, P. Shirley, S. Baer Chapter 5 Tutorial 5.1: GUI Main Window CTutorialDlg : subclass from CDialog

Essentials of Interactive Computer Graphics: Concepts and Implementation K. Sung, P. Shirley, S. Baer Chapter 5 TutorialDlg::OnInitDlg() Recall, this is GUI, SystemInitialization! Must create Graphics API GHC Create/initialize GUI elements. Etc. …

Essentials of Interactive Computer Graphics: Concepts and Implementation K. Sung, P. Shirley, S. Baer Chapter 5 CTutorial::OnTimer()

Essentials of Interactive Computer Graphics: Concepts and Implementation K. Sung, P. Shirley, S. Baer Chapter 5 Tutorial 5.1: Summary Model: is the CModel class. Very simple. Controllers: Two controllers: CTutorialDlg (application container window) CCircleRadiusControls View/Controller Pair: One DrawOnlyHandler: works via UIWindow Collaborations: 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: 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.

Essentials of Interactive Computer Graphics: Concepts and Implementation K. Sung, P. Shirley, S. Baer Chapter 5 Tutorial 5.2: Mouse Events Left mouse click/drag to define circle The Model:

Essentials of Interactive Computer Graphics: Concepts and Implementation K. Sung, P. Shirley, S. Baer Chapter 5 Tut 5.2: The Controller Design: Implementation (declaration)

Essentials of Interactive Computer Graphics: Concepts and Implementation K. Sung, P. Shirley, S. Baer Chapter 5 Tut 5.2: Controller implementation

Essentials of Interactive Computer Graphics: Concepts and Implementation K. Sung, P. Shirley, S. Baer Chapter 5 Inconsistent State Mouse events – serviced immediately! Via call backs Until next redraw Internal circle radius is different from what is drawn on the screen Inconsistency lasts at most 25 mSec Typical user cannot see the inconsistency

Essentials of Interactive Computer Graphics: Concepts and Implementation K. Sung, P. Shirley, S. Baer Chapter 5 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 Lib2:Common Files/Utilities/uwbgl_Utility1.cpp

Essentials of Interactive Computer Graphics: Concepts and Implementation K. Sung, P. Shirley, S. Baer Chapter 5 Tut 5.3: Real-time simulation ball … drops continuously

Essentials of Interactive Computer Graphics: Concepts and Implementation K. Sung, P. Shirley, S. Baer Chapter 5 Tut 5.3: The Model

Essentials of Interactive Computer Graphics: Concepts and Implementation K. Sung, P. Shirley, S. Baer Chapter 5 Tut 5.3: The simulation …

Essentials of Interactive Computer Graphics: Concepts and Implementation K. Sung, P. Shirley, S. Baer Chapter 5 Tut 5.3: OnTimer service … During OnTimer (once every 25 mSec) Simply call UpdateSimulation() And Redraws everything (DrawGraphics()).

Essentials of Interactive Computer Graphics: Concepts and Implementation K. Sung, P. Shirley, S. Baer Chapter 5 Tut 5.4: Two views Multiple View/Controller pairs Requires: 2 Rendering Contexts (RC) or RC connecting to separate GHC buffers GraphicsSystem class improvements

Essentials of Interactive Computer Graphics: Concepts and Implementation K. Sung, P. Shirley, S. Baer Chapter 5 Drawing to multiple buffers OGL: Each RC connects to unique buffer Need multiple RC (HGLRC) D3D: RC (DIRECT3DDEVICE) capable of driving multiple buffers SwapChain

Essentials of Interactive Computer Graphics: Concepts and Implementation K. Sung, P. Shirley, S. Baer Chapter 5 UWBGL_Lib3: WindowHandler + Supports

Essentials of Interactive Computer Graphics: Concepts and Implementation K. Sung, P. Shirley, S. Baer Chapter 5 D3D: Using SwapChain GraphicsSystem class WindowHandler class ( using SwapChain )

Essentials of Interactive Computer Graphics: Concepts and Implementation K. Sung, P. Shirley, S. Baer Chapter 5 UWBGL_Lib3: Utilities In Common files/

Essentials of Interactive Computer Graphics: Concepts and Implementation K. Sung, P. Shirley, S. Baer Chapter 5 UWBGL_Lib3: Utilities

Essentials of Interactive Computer Graphics: Concepts and Implementation K. Sung, P. Shirley, S. Baer Chapter 5 Inter-Ball Collision