1 / 29

Fortress City Saarlouis

Fortress City Saarlouis. Development of an interactive 3D city model using Web technologies. Kristian Sons, Georg Demme , Wolfgang Herget , Philipp Slusallek. Project. XML3D. Implementation. Results. Project. Saarlouis. History Build as fortress 1680 Constructed by Vauban

zarek
Download Presentation

Fortress City Saarlouis

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. Fortress City Saarlouis Development of an interactive 3D city model using Web technologies Kristian Sons, Georg Demme, Wolfgang Herget, Philipp Slusallek

  2. Project XML3D Implementation Results Project

  3. Saarlouis • History • Build as fortress 1680 • Constructed by Vauban • Hexagonal floor plan • Prussians modified city in 19th century Project XML3D Implementation Results

  4. Saarlouis Municipal Museum • Diorama existed • Only French era • Hard to maintain • Hard to integrate additional information • Movie existed • 3D City Model • Offline rendering • Modeled by DFKI Project XML3D Implementation Results How to make interactive model available?

  5. Internet • Best medium to make the model available to broad audience • But: • Limited 3D capabilities • Large model • 3D Plug-ins have low penetration rate • Approach • Now: Develop Terminal Application • Later: Publish on the Internet Project XML3D Implementation Results

  6. Terminal • Two target groups • Individual visitors • Groups of 1-5 • Usually elderly • School classes • 20-30 pupils • Two setups • Single-touch Terminal • 40” Stereo Display Project XML3D Implementation Results

  7. Technology • Standard Web Technologies for 2D • Browser in Kiosk mode • HTML: Text and Images • CSS: Layout • JavaScript: • Application logic • Navigation • Include Web designers • What to use for 3D graphics? Project XML3D Implementation Results

  8. Project XML3D Implementation Results XML3D

  9. 3D applications on the Web • Web evolved to full-fledged application platform • 3D graphics today a commodity • Still hardly any 3D content on the Web • WebGL is there • Too low-level for web developers? Project XML3D Implementation Results We want declarative 3Dgraphics for the Web

  10. 3D as extension to HTML5 • Integrate 3D content into HTML5 documents • First class objects in the Document Object • Reuse existing Web technology wherever possible • Avoid barrier to entry • Make Web developers feel at home • Do not add new concepts, unless absolutely necessary HTML Document Project XML3D Implementation Results xml3d group defs group group shader mesh light lightshader data data data

  11. XML3D Elements <body> <h1>XHTML Document</h1> <xml3d style=”width: 640px; height: 480px” xmlns="http://www.xml3d.org/2009/xml3d"> <defs> <transform id=”xfm1” translation=”3 0 1”/> <transform id=”xfm2” scale=”2 2 2” /> </defs> <group style=”transform:url(#xfm1)” > <group class=”scaleMe” > <mesh ... /> </group> <group style=”transform:scale3d(3,1,3)” <mesh ... /> </group> </group> </xml3d> </body> <xml3d> • Canvas for XML3D content • Embed into (X)HTML <defs> • Definition of resources <group> • Structuring and transformation hierarchy <transform> • Alternative transformation syntax, • Can be referenced via CSS Project XML3D Implementation Results

  12. XML3D Resources • Ways to reference data resources: • In the same document • External resources • Element withinexternal resource • General concept • Applies to geometry, materials, animations, transformations, etc. • Various external formats supported • Allows fine-granular scene composition • E.g. in a REST architecture Project XML3D Implementation Results

  13. Xflow - Data Processing • Declare dataflows to describe data modifications • Apply operator on <data> via compute attribute • Allows to create dynamic effects • Skinning and morphing for character animation • Animation of shader parameters • Image processing and Augmented Reality Project XML3D Implementation Results

  14. XML3D Interaction <xml3d ... > <defs> <transform id=”xfm1” translation=”0 0 0” /> </defs> <group id=“black_queen” style=”transform: url(#transform1)”> <mesh type=”triangles” onmouseover=”setColorOver(this);” onmouseout=“resetColor(this);”> ... </mesh> </group> ... </xml3d> DOM Scripting • Well known to Webdevelopers • Arbitrary scenegraph modifications • Convenience libraries • e.g. jQuery DOM Events • Event attributes • 3D specific data Project XML3D Implementation Results

  15. Implementations • Native • Modified Firefox and Chrome • Rendering: OpenGL4 or RTFact Ray Tracer • Polyfill • JavaScript library • Rendering with WebGL • Based on OpenGL ES 2.0 • Multi-platform • Desktop: Windows, Linux, Max OS • Mobile: Android Project XML3D Implementation Results

  16. XML3D Applications Project XML3D Implementation Results

  17. Project XML3D Implementation Results Implementation

  18. Approach • Use native XML3D-Chrome with OpenGL • Large scene • HDTV resolution • Skeletal framework of application • In collaboration with museum • Regular reviews • Museum to define: • Text content • Images: Maps, Drawings, etc. • Points of Interest (POIs) Project XML3D Implementation Results

  19. Setup • Touch terminal • Single touch display • Large UI elements • Limited degree of freedom • External monitor • Active stereo rendering • 3D content only • VR system (Lightning) • Synchronized via WebSockets Project XML3D Implementation Results

  20. Modes Project XML3D Implementation Results

  21. Modes • Points of Interest (POI) • Inspect specific object • Background information • Panorama • Choose a point and look-around • Information markers above POIs • Virtual City Tour • Fly-through on static path • Possible to stop and switch to Panorama • Free-flight mode • For museum staff only Project XML3D Implementation Results

  22. 3D Content Pipeline • Prepare 3D model • Simplified existing movie version • Merged two eras into one • Annotate 3D model • Text content • Event attributes • onmouseover, onclick, etc. • Reference images • Export model • XML3D for Browser • VRML for VR system Project XML3D Implementation Results

  23. Development Process • 3D modeler • Model, annotate, and export 3D content • Create renderings for UI • Web designer • User Interface • Layout with HTML and CSS • Web developer • Integrate 2D with 3D • Some XML3D knowledge • Interaction and application logic Project XML3D Implementation Results

  24. Project XML3D Implementation Results Results

  25. Results • Streamlined development process • Involved Web designer and Web developer • Reuse existing technologies • Easy to integrate 3D with 2D content • Application runs successfullyin museum • Stable • Well received by visitors Project XML3D Implementation Results

  26. Future Work • Multi-language support • Switch eras • Dynamically during run-time • Publish on Internet • Adapt for JS/WebGL implementation • Data mining • Improve based on user data • Include 3D avatars Project XML3D Implementation Results

  27. Standardization • Founded W3C Community Group • “Declarative 3D for the Web Achitecture” • Collaboration with Fraunhofer, Web3D, EDF,… • Two Evaluation Platforms • XML3D and X3DOM • Targets: • Improve browser support for declarative 3D • Native support of a unified declarative format Project XML3D Implementation Results

  28. Acknowledgments • This work was supported by • EU Project VERVE • EU Project FI-CONTENT • Intel Visual Computing Institute Project XML3D Implementation Results

  29. Thank you! Questions? http://www.xml3d.org https://github.com/xml3d/xml3d.js http://www.w3.org/community/declarative3d/

More Related