Fortress City Saarlouis Development of an interactive 3D city model using Web technologies Kristian Sons, Georg Demme, Wolfgang Herget, Philipp Slusallek.

Slides:



Advertisements
Similar presentations
HTML5 Haptics Standardization
Advertisements

HTML 5. What is HTML5? HTML5 will be the new standard for HTML, XHTML, and the HTML DOM. The previous version of HTML came in The web has changed.
B.Sc. Multimedia ComputingMedia Technologies 3D Technologies for the Web.
Interface Design 2 Week 10. Interface Design 2 :: Week 10 :: Calendar.
Macromedia Dreamweaver 4 Advanced Level Course. Add Rollovers Rollovers or mouseovers are possibly the most popular effects used in designing Web pages.
Russell Taylor Lecturer in Computing & Business Studies.
Tutorial 7 Working with Multimedia. XP Objectives Explore various multimedia applications on the Web Learn about sound file formats and properties Embed.
Working with Cascading Style Sheets. 2 Objectives Introducing Cascading Style Sheets Using Inline Styles Using Embedded Styles Using an External Style.
Where Do I Start REFERENCE: LEARNING WEB DESIGN (4 TH EDITION) BY ROBBINS 2012 – CHAPTER 1 (PP. 3 – 14)
Development of mobile applications using PhoneGap and HTML 5
Chapter 14 Introduction to HTML
Web Design Basic Concepts.
Definition from Wikipedia.  The Prototype JavaScript Framework  implemented as a single file of JavaScript code  named prototype.js (
 jQuery Mobile An Introduction. What is jQuery Mobile  A framework built on top of jQuery, used for creating mobile web applications  Designed to make.
COM 205 Multimedia Applications
Pasquale Herzig, Michael Englert, Sebastian Wagner, Yvonne Jung & Ulrich Bockholt Presented at Web3D 2013 X3D-EarthBrowser.
Declarative 3D for the Web Architecture Web3D 2012 Workshop Johannes Behr, Kristian Sons.
HTML 5 New Standardization of HTML. I NTRODUCTION HTML5 is The New HTML Standard, New Elements New Attributes Full CSS3 Support Video and Audio 2D/3D.
HTML5 GAMING By Scott Benton. HTML5 New HTML Standard Previous Version of HTML, HTML 4.01, Released in 1999 Not an Official Standard Yet No Browsers Have.
Copyright © 2012 Certification Partners, LLC -- All Rights Reserved Lesson 5: Multimedia on the Web.
WebGL Patrick Cozzi University of Pennsylvania CIS Spring 2012.
What is Web Design?  Web design is the creation of a Web page using hypertext or hypermedia to be viewed on the World Wide Web.
Working with Cascading Style Sheets. Introducing Cascading Style Sheets Style sheets are files or forms that describe the layout and appearance of a document.
XP Tutorial 7New Perspectives on Creating Web Pages with HTML, XHTML, and XML 1 Working with Cascading Style Sheets Creating a Style for Online Scrapbooks.
Joel Bapaga on Web Design Strategies Technologies Commercial Value.
Copyright © cs-tutorial.com. Introduction to Web Development In 1990 and 1991,Tim Berners-Lee created the World Wide Web at the European Laboratory for.
Mobile App Support Jacob Poirier Geri Hengesbach Andrea Menke Erin Rossell.
CS 480/680 Computer Graphics Course Overview Dr. Frederick C Harris, Jr. Fall 2012.
SVG: The Past, Present and Future of Vector Graphics for the Web Patrick Dengler Senior Program Manager, Internet Explorer Team Member, W3C SVG Working.
© Cheltenham Computer Training 2001 Macromedia Dreamweaver 4 - Slide No 1 Macromedia Dreamweaver 4 Advanced Level Course.
WEB DESIGN USING DREAMWEAVER. The World Wide Web –A Web site is a group of related files organized around a common topic –A Web page is a single file.
Windows Presentation Foundation. Goal The goal of Windows Presentation Foundation (WPF) is to provide these advances for Windows. Included in version.
School of Computer Science & Information Technology G6DPMM - Lecture 17 Scaleable Vector Graphics.
Silverlight Technology. Table of Contents 1.What is Silverlight Technology? 2.Silverlight Overview. 2.1 How it works 2.2 Silverlight development tools.
1 Angel and Shreiner: Interactive Computer Graphics 6E © Addison-Wesley 2012 Introduction to Computer Graphics 靜宜大學 資訊工程系 蔡奇偉 副教授
1 Angel and Shreiner: Interactive Computer Graphics 6E © Addison-Wesley 2012 Introduction to Computer Graphics Ed Angel Professor Emeritus of Computer.
Lab 12: Other Languages User Interface Lab: GUI Lab Nov. 12 th, 2013.
به نام خدا تنظیم کننده : فرانه حدادی استاد : مهندس زمانیان تابستان 92.
1 Geospatial and Business Intelligence Jean-Sébastien Turcotte Executive VP San Francisco - April 2007 Streamlining web mapping applications.
Web Design (1) Terminology. Coding ‘languages’ (1) HTML - Hypertext Markup Language - describes the content of a web page CSS - Cascading Style Sheets.
 2004 Prentice Hall, Inc. All rights reserved. Chapter 13 - Dynamic HTML: Object Model and Collections Outline 13.1 Introduction 13.2 Object Referencing.
Session: 1. © Aptech Ltd. 2Introduction to the Web / Session 1  Explain the evolution of HTML  Explain the page structure used by HTML  List the drawbacks.
Cs332a_chapt10.ppt CS332A Advanced HTML Programming DHTML Dynamic Hypertext Markup Language A term describing a series of technologies Not a stand-a-lone.
COP 3813 Intro to Internet Computing Prof. Roy Levow Lecture 1.
Chapter 1 Getting Started With Dreamweaver. Exploring the Dreamweaver Workspace The Dreamweaver workspace is where you can find all the tools to create.
Contents : What is Silverlight? Silverlight Overview Silverlight Toolkit Overview Timeline & Packaging Silverlight V1.0 & V1.1 Properties of V1.0 Properties.
Web Technologies Lecture 2 HTML and CSS. HTML Hyper Text Markup Language – Describes web documents – Made up of nested HTML markup tags – Tags are the.
CNIT 132 – Week 4 Cascading Style Sheets. Introducing Cascading Style Sheets Style sheets are files or forms that describe the layout and appearance of.
Chapter 11 Adding Media and Interactivity. Chapter 11 Lessons Introduction 1.Add and modify Flash objects 2.Add rollover images 3.Add behaviors 4.Add.
Chapter 1 Introduction to HTML, XHTML, and CSS HTML5 & CSS 7 th Edition.
VIRTUAL REALITY (VR) INTRODUCTION AND BASIC APPLICATIONS الواقع الافتراضي : مقدمة وتطبيقات Dr. Naji Shukri Alzaza Assist. Prof. of Mobile technology Dean.
® ® copyright © 2013 Open Geospatial Consortium What HTML5 and REST mean to the Geo community Raj Singh, PhD Open Geospatial Consortium
By Adam Reimel. Outline Introduction Platform Architecture Future Conclusion.
SVG technology SVG technology is what we want? is what we want? Jaehoon Woo KNU Real-Time Systems Lab. KNU Real-Time Systems Lab.
XP Tutorial 7New Perspectives on HTML and XHTML, Comprehensive 1 Working with Cascading Style Sheets Creating a Style for Online Scrapbooks Tutorial 7.
The Web Wizard’s Guide To DHTML and CSS Chapter 2 A Review of CSS2 and JavaScript.
ANGULAR JS 2.0 Revolutionizes UI/UX Development. A CONTEMPORARY FRAMEWORK  Open Source Web Application Framework  Renowned, Established & Stable Frontend.
The HTML5 logo was introduced by W3C in 2010
Working with Cascading Style Sheets
X3DOM : Integrating 3D content seamlessly into webpage
Browsers and Web Platforms
Web Standards Web Design – Sec 2-3
Web3D Consortium X3DOM: Next-Generation Web3D Applications on Open Standards and Open Source Web3D Consortium
Web Standards Web Design – Sec 2-3
Web App vs Mobile App.
DHTML Javascript Internet Technology.
.NET and .NET Core 7. XAML Pan Wuming 2017.
Silverlight Technology
DHTML Javascript Internet Technology.
Presentation transcript:

Fortress City Saarlouis Development of an interactive 3D city model using Web technologies Kristian Sons, Georg Demme, Wolfgang Herget, Philipp Slusallek 1

2 ProjectXML3DImplementationResults Project

Saarlouis  History  Build as fortress 1680  Constructed by Vauban  Hexagonal floor plan  Prussians modified city in 19 th century 3 ProjectXML3DImplementationResults

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 4 ProjectXML3DImplementationResults How to make interactive model available?

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 5 ProjectXML3DImplementationResults

Terminal  Two target groups  Individual visitors  Groups of 1-5  Usually elderly  School classes  pupils  Two setups  Single-touch Terminal  40” Stereo Display 6 ProjectXML3DImplementationResults

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? 7 ProjectXML3DImplementationResults

8 ProjectXML3DImplementationResults XML3D

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? 9 ProjectXML3DImplementationResults We want declarative 3D graphics for the Web

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 10 ProjectXML3DImplementationResults HTML Document xml3d group light defs mesh lightshader shader group data

XML3D Elements 11  Canvas for XML3D content  Embed into (X)HTML  Definition of resources  Structuring and transformation hierarchy  Alternative transformation syntax,  Can be referenced via CSS ProjectXML3DImplementationResults XHTML Document <xml3d style=”width: 640px; height: 480px” xmlns=" <group style=”transform:scale3d(3,1,3)”

XML3D Resources 12  Ways to reference data resources:  In the same document  External resources  Element within external 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 ProjectXML3DImplementationResults

Xflow - Data Processing 13  Declare dataflows to describe data modifications  Apply operator on via compute attribute  Allows to create dynamic effects  Skinning and morphing for character animation  Animation of shader parameters  Image processing and Augmented Reality ProjectXML3DImplementationResults

XML3D Interaction 14 DOM Scripting  Well known to Web developers  Arbitrary scene graph modifications  Convenience libraries  e.g. jQuery DOM Events  Event attributes  3D specific data ProjectXML3DImplementationResults <group id=“black_queen” style=”transform: url(#transform1)”> <mesh type=”triangles” onmouseover=”setColorOver(this);” onmouseout=“resetColor(this);”>......

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 15 ProjectXML3DImplementationResults

Platforms  Desktop  Chrome, Firefox, Opera  Windows, Linux, Mac OS  Mobiles  Android: Firefox, Chrome Beta  iOS:  No Browser with WebGL support  Hack to be enabled for WebView  Test Framework  > 1500 tests 16 ProjectXML3DImplementationResults

XML3D Applications 17 ProjectXML3DImplementationResults

18 ProjectXML3DImplementationResults Implementation

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) 19 ProjectXML3DImplementationResults

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 20 ProjectXML3DImplementationResults

Modes 21 ProjectXML3DImplementationResults

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 22 ProjectXML3DImplementationResults

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 23 ProjectXML3DImplementationResults

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 24 ProjectXML3DImplementationResults

25 ProjectXML3DImplementationResults

 Streamlined development process  Involved Web designer and Web developer  Reuse existing technologies  Easy to integrate 3D with 2D content  Application runs successfully in museum  Stable  Well received by visitors 26 ProjectXML3DImplementationResults

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 27 ProjectXML3DImplementationResults

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 28 ProjectXML3DImplementationResults

Acknowledgments  This work was supported by  EU Project VERVE  EU Project FI-CONTENT  Intel Visual Computing Institute 29 ProjectXML3DImplementationResults

30 Thank you! Questions?