1 / 44

An Overview of: LivingVindonissa

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. The Team. Dain Cilke, Nathan Thompson, Pierce Edwards, Gabe Tambos, Jeremy Reed. Nathan Thompson. Focus of This Presentation.

gibson
Télécharger la présentation

An Overview of: LivingVindonissa

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  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

More Related