An Overview of: LivingVindonissa

1. A Web-based 3D Model of the Ancient Roman Camp Vindonissa An Overview of:LivingVindonissa Dain Cilke Pierce Edwards Jeremy Reed Gabe Tambos Nathan Thompson

2. The Team Dain Cilke, Nathan Thompson, Pierce Edwards, Gabe Tambos, Jeremy Reed Nathan Thompson

3. Focus of This Presentation • CU Senior Project Class • Other Projects • Swiss Team’s System • Boulder Team’s Contribution: LivingVindonissa • Purpose • Requirements • Conceptual Overview • Design • Software Demonstration • A Look Ahead Nathan Thompson LivingVindonissa

4. Focus of This Presentation • CU Senior Project Class • Other Projects • Swiss Team’s System • Boulder Team’s Contribution: LivingVindonissa • Purpose • Requirements • Conceptual Overview • Design • Software Demonstration Nathan Thompson LivingVindonissa

5. Senior Projects • Composed of 42 Senior Undergraduate Students • All Computer Science Majors • Split up into Teams of Five or Six • A Total of Eight Projects are Under Development • Over 40 Projects Were Proposed This Year • Students Selected Which Project to Pursue Nathan Thompson LivingVindonissa

6. Other Projects: Volumizer • Also Sponsored by Alex Repenning • Web-Based Application • Converts 2D Drawings into 3D Icons • Also Uses WebGL Nathan Thompson LivingVindonissa

7. Other Projects: ICUP • Application for Android Smart Phones • Provides Users With Information from Collegepedia • Shopping Deals, Upcoming Events, Etc. Nathan Thompson LivingVindonissa

8. Swiss Team’s System • Institute of Archeology of Canton Aargau Has Been Analyzing Vindonissa for Many Years • Analysis Used to Create 3D OpenGL Model of Site Nathan Thompson LivingVindonissa Nathan Thompson LivingVindonissa

9. Vindonissa Model • Implemented by Institute of 4D Techonologies • Can be Viewed at on-site on a Stereoscopic Screen • Archeologists can Navigate Model in Realtime • Able to Navigate Model in 3D “Free Fly” View • Can Also Follow Predefined Paths Through Model • Labels and Photographs can be Inserted into Model Nathan Thompson LivingVindonissa

10. The Problem • Limited Access • Users Must be on-site to See Model • Not Readily Available to All Users • Archeologists Want to Share this Resource • Solution: • LivingVindonissa Nathan Thompson LivingVindonissa

11. LivingVindonissa • Purpose • Requirements • Conceptual Overview • Design • User Interface • Architecture • Software Demonstration • A Look Ahead Nathan Thompson LivingVindonissa

12. Purpose • WebGL Implementation of Vindonissa Model • Expand Audience • Users From Across the World can Access Model • Information Available to Many Types of Users • Archeologists, Students, Enthusiasts, Etc. Jeremy Reed LivingVindonissa

13. Environmental Requirements • Software / Development Environment: • WebGL • HTML or HTML 5 • CSS 2 • Javascript 1.8 or Later • Windows XP SP2, Mac OS X 10.6, or Ubuntu Linux 8.04 or Later • Minefield, Webkit, or Chromium • Database: PHP + mySQL Jeremy Reed LivingVindonissa

14. Environmental Requirements (Cont.) • Hardware Environment: • Keyboard and Two-Button Pointing Device • Broadband Internet Connection • Minimum 1024 x 768 Pixel 24-Bit Color Display • Minimum 2.4 GHz Processor • Minimum 2 GB RAM • OpenGL 2.0 Supported GPU Jeremy Reed LivingVindonissa

15. Functional Requirements • Emulation of All Features of i4D’s Model • “Free Fly” View, Path Following, Etc. • 3D “Person” View • Ability to Designate Admin Users • These Users May Insert Data • Interactive JavaScript Popups / HTML Windows Jeremy Reed LivingVindonissa

16. Conceptual Overview Dain Cilke LivingVindonissa

17. Website UI Dain Cilke Dain Cilke LivingVindonissa

18. Menu UI • The main menu will allow the user to choose between three options: • Free View • Walkthrough • Jump To Dain Cilke LivingVindonissa

19. Free View • Fly Over – Allows the user to “fly” through the model • Walkthrough – Allows the user to walk through the model as a person would • Jump To – Allows the user to jump to a keyframe Dain Cilke LivingVindonissa

20. Follow Path • Load Path – Allows the user to load a path to explore Dain Cilke LivingVindonissa

21. Create Path • Record Path – Start recording a path • Pause Recording – Pause recording a path so the user can explore the model • Keyframe – Set a keyframe in the model • New Path – Start a new path • Save Path – Save the path to the database for users to explore Dain Cilke LivingVindonissa

22. UI: Navigation Menu Sample Code Dain Cilke LivingVindonissa

23. Point of Interest UI • When the user hovers over a POI, a menu will pop up with the name of the POI • Upon clicking the menu, the user will be able to access additional information about the POI LivingVindonissa Dain Cilke

24. Architecture: Main LivingVindonissa Pierce Edwards LivingVindonissa

25. Architecture: Renderer LivingVindonissa Pierce Edwards LivingVindonissa

26. Parse Model • First we request the model from the server • When the server returns the JSON we pull out the fields and bind to variables for WebGL to use Pierce Edwards LivingVindonissa

27. function loadAmphiteater() { var request = new XMLHttpRequest(); request.open("GET", "../model/json/Amphiteater.json"); request.onreadystatechange = function() { if (request.readyState == 4) { handleLoadedAmphiteater(JSON.parse(request.responseText)); } } request.send(); } Pierce Edwards LivingVindonissa

28. function handleLoadedAmphiteater(amphiteaterData) { amphiteaterVertexNormalBuffer = gl.createBuffer(); gl.bindBuffer(gl.ARRAY_BUFFER, amphiteaterVertexNormalBuffer); gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(amphiteaterData.normals), gl.STATIC_DRAW); amphiteaterVertexNormalBuffer.itemSize = 3; amphiteaterVertexNormalBuffer.numItems = amphiteaterData.normals.length / 3; amphiteaterVertexPositionBuffer = gl.createBuffer(); gl.bindBuffer(gl.ARRAY_BUFFER, amphiteaterVertexPositionBuffer); gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(amphiteaterData.verts), gl.STATIC_DRAW); amphiteaterVertexPositionBuffer.itemSize = 3; amphiteaterVertexPositionBuffer.numItems = amphiteaterData.verts.length / 3; amphiteaterVertexIndexBuffer = gl.createBuffer(); gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, amphiteaterVertexIndexBuffer); gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, new Uint16Array(amphiteaterData.inds), gl.STREAM_DRAW); amphiteaterVertexIndexBuffer.itemSize = 1; amphiteaterVertexIndexBuffer.numItems = amphiteaterData.inds.length; document.getElementById("loadingtext").textContent = ""; } LivingVindonissa Pierce Edwards

29. Calculating Texture Placement • Texture placement will occur dynamically • Placement will depend on the angles of the planes • Functionality still needs to be implemented Pierce Edwards LivingVindonissa

30. Render Scene • Calculate camera pitch quaternion • Calculate camera roll quaternion • Calculate camera placement quaternion • Place the camera in the screen with the proper rotation Pierce Edwards LivingVindonissa

31. function setPrespective() { var Matrix = new Array(16); q = new quaternion (); // Make the Quaternions that will represent our rotations m_qPitch.createFromAxisAngle(1.0, 0.0, 0.0, m_PitchDegrees); m_qHeading.createFromAxisAngle(0.0, 1.0, 0.0, m_HeadingDegrees); // Combine the pitch and heading rotations and store the results in q q = quatMultiply(m_qPitch, m_qHeading); Matrix = createMatrix(q); // Let OpenGL set our new prespective on the world! // Note: need to transform Matrix into a 4x4 matrix, byproduct of mixing opengl with webgl logic multMatrix(make4x4(Matrix)); // Create a matrix from the pitch Quaternion and get the j vector for our direction. Matrix = createMatrix(m_qPitch); m_DirectionVector.j = Matrix[9]; // Combine the heading and pitch rotations and make a matrix to get the i and j vectors for our direction. q = quatMultiply(m_qHeading, m_qPitch); Matrix = createMatrix(q); m_DirectionVector.i = Matrix[8]; m_DirectionVector.k = Matrix[10]; // Scale the direction by our speed. m_DirectionVector.multiply(m_ForwardVelocity); // Increment our position by the vector m_Position.x += m_DirectionVector.i; m_Position.y += m_DirectionVector.j; m_Position.z += m_DirectionVector.k; // Translate to our new position. mvTranslate([-m_Position.x, -m_Position.y, m_Position.z]); } LivingVindonissa Pierce Edwards

32. Architecture: GUI Pierce Edwards LivingVindonissa Pierce Edwards LivingVindonissa

33. Event Handler • Listen for a key press or mouse movement • When an event is detected, call the proper handler • Update the state machine as necessary Pierce Edwards LivingVindonissa

34. Draw Scene • Set viewport and perspective • Place the camera in the screen with the proper rotation • Add a light to the scene Pierce Edwards LivingVindonissa

35. Paths • Set of points to move through like a movie • Data generated via frequent polling of a user's position • Data stored in the db detailed on the Database Schema slide LivingVindonissa Gabe Tambos

36. Database Schema LivingVindonissa Gabe Tambos

37. Path Retrieval 1 • MySQL Query in PHP LivingVindonissa Gabe Tambos

38. Path Retrieval 2 • Ajax Call LivingVindonissa Gabe Tambos

39. Path Retrieval: Step 3 • Store Path Locally LivingVindonissa Gabe Tambos

40. User Data LivingVindonissa Gabe Tambos

41. Support • Information • About Vindonissa • About the Project • Help Documents • User Feedback and Submission LivingVindonissa Gabe Tambos

42. Software Demonstration LivingVindonissa LivingVindonissa Gabe Tambos

43. A Look Ahead: • More Development Yet to Come: • Apply Shader • Hook Up JavaScript Menus • Flesh Out Additional Content • Current Timeline: • Finish Major Development in December • Begin Alpha Testing in Mid-January LivingVindonissa Gabe Tambos

44. Summary • CU Senior Project Class • Other Projects • i4D’s System • LivingVindonissa • Purpose • Requirements • Conceptual Overview • Design • Software Demonstration • A Look Ahead LivingVindonissa Gabe Tambos