SlideShare a Scribd company logo
1 of 44
Download to read offline
Introduction to
3D Webmapping in X3D

Free Open Source Software for Geospatial (FOSS4G) Talks and Demos 2013

Presenter
Luis Caezar Ian K. Panganiban
Student Assistant SOS UPDGIS-3D

1
Outline
3D in Web


3D Visualization

X3D + DOM = X3DOM



3D Web
Problems in 3D
Web

X3D




What is X3D
Web 3D
Consortium

X3DOM and HTML



X3DOM Engine



Code Structure







Features

X3DOM and 3D Mapping







Features of X3D
Working with X3D

Working with
X3DOM
Final Notes
2
Why 3D?

3
Why 3D?
- better visualization and appreciation of the
world

4
Why 3D?

?
Notes:
Problem
3D real world objects in 2D maps – introduce abstractions and generalization of data.
Depth Perception is non exsitent
Removes other features that makes the object unique.
3D real world objects in 3D models – less abstractions and generalization of data.
Depth Perception is present
Retains most features.

5
3D Around Us
Gaming

Final Fantasy 4 – SNES
(1991)

Final Fantasy X-2 – PS2
(2003)

Notes:

Due to the increase in processing power and speed we can now have a better representation of the world.
Hardware can now handle the stress of having 3D graphics
SNES – Super Nintendo Entertainment System .

6
3D Around Us
Movies

Avatar
(2009)

A Bug's Life

7
Web in 3D
Notes:

There is a move to display information in 3D.
Some 3D viewers require a client(standalone program) and
additional plugins
Google Earth provides a 2.5D view of the world.

Google Earth
Downtown Chicago

8
Web in 3D

Notes:
2.5D

Here Maps
London

Street View = images + panoramic view

9
Web in 3D

Notes:

OSM – 3D uses java applet

osm -3D

10
Problems in 3D Web


Bandwith limitations (rendering)



Model file size



Clients / Plugins

11
What is X3D?

12
What is X3D?
“X3D (Extensible 3D) is a royalty-free and openly
published standard file format specification and run-time
architecture to represent and communicate 3D objects,
events, behaviors and environments.”

Notes:

X3D – is an ISO certified xml file format used for 3D applications.
-successor of the VRML97(Virtual Reality Modeling Language)
Example of an X3D object/model

13
The Web3D Consortium

Notes:
Web3D consortium to provide a forum for the creation of open standards
and specifications in web 3d. Act as a body of certification in open web 3d.
They manage the specifications of the x3d file format.
The Web3D Consortium is utilizing its broad-based industry support to develop the the X3D specification,
for communicating 3D on the web, between applications and across distributed networks and web services.

14
What is X3D?

Notes:
Example of an X3D code – xml based file format

15
Features of X3D



ISO certified scene graph model



Modular and Extensible



Lightweight



Coordinate System : Right Hand

16
Working with X3D

17
X3D Editors / Viewers
Blender

Notes:
Blender – 3D modeling and mesh program; you can export your customized models into
x3d, 3ds, ply and others
Link : http://www.blender.org/

18
X3D Editors / Viewers

X3D Edit
Notes:
X3D Edit and Xj3D are java based applications for editing and viewing.
Other links for viewers and editors:
http://www.web3d.org/x3d/content/examples/X3dResources.html

Xj3D (Viewer)
19
Web + X3D = X3DOM

20
X3DOM
“ The Document Object Model is a platform and language-neutral
interface that will allow programs and scripts to dynamically access
and update the content, structure and style of documents. “
-w3c.org

Jquery Manipulation
21
X3DOM - Features


Built in Camera Navigation



Specialized Components (Geospatial, Runtime, Node)



Lightweight Javascript Library



Cross Platform

Notes:
X3DOM Site: http://www.x3dom.org/

22
X3DOM Powering Your Site

23
X3DOM Engine


Web Graphics Library (WebGL)


No additional plugins required



Browser == Deployment



No special api (game engines)



Supported by most web browsers

Notes:
IE 9 does not support WebGL use Chrome
Frame or Instant Reality Plugin or Flash 11.
IE 11 supports WebGL

24
X3DOM Code Structure

25
X3DOM – Javascript Library

From Fraunhofer IGD slides
26
X3DOM – X3D tag

From Fraunhofer IGD slides
27
X3DOM – Create your Own!

From Fraunhofer IGD slides

28
X3DOM – External X3D

Allows you to use external x3d files!

29
X3DOM and Mapping

30
X3DOM - Geospatial Component
Geospatially referenced scenes have special requirements
beyond ordinary 3D scenes


Double-precision accuracy on floating-point displays



Diverse yet coherent spatial reference systems

Web 3D
Consortium

31
X3DOM Tutorial
Generic Data Conversion

32
Working with X3DOM


Host X3D using the <inline> tag



Build your own (html and x3dom tags)



Other File Formats convert to X3D



Database(PostGIS) – ST_AsX3D(PostGIS Geometry)
–

3D CityDB importer(Collada/KML, CityGML)

33
X3DOM and Mapping
CityGML → X3DOM

34
X3DOM and Mapping
CityGML → X3DOM

CityGML(Sketchup)

3D CityDB Importer

X3DOM

PostGIS

ST_Collect and ST_AsX3D

35
Other Examples and Demo
Notes:
For more examples go to :
http://www.x3dom.org/?page_id=5

36
http://earthserver.bgs.ac.uk/clients/3d/glasgow_geology.html
37
http://i-fx.net/demo/airplane.xhtml
38
http://x3dom.org/x3dom/example/x3dom_multiIndex-large.xhtml
39
Final Notes on X3D/X3DOM


Good for Visualization




Lacks Documentation




Speed, Customization, Lightweight, Installation
Examples, Tutorials, Development Stage

Research other Components/Methods


Import, Conversion to X3D, Working with DB

40
References and Sources
Content References and Sources
Web3D – Flyer_201207(W3C)
X3D: The Real-Time 3D Solution for the World-Wide Web
(W3C)
X3DOM – Declarative (X)3D in HTML5 by Yvone Jung,
Fraunhofer IGD
X3D Geospatial Component and X3D Earth (W3C)
www.web3d.org
www.x3dom.org (Pictures, Examples and Tutorials)
41
References and Sources

Images References and Sources Disclaimer
All of the photographs and images depicted on this presentation are
copyrighted images. Most of the images are mine, but some of them do
not belong to me. I have no intention of copyright infringement and
these pictures were only used for more emphasis and to present
certain ideas and topics.

42
Thank You!

43
Introduction to
3D Webmapping in X3D

Free Open Source Software for Geospatial (FOSS4G) Talks and Demos 2013

Presenter
Luis Caezar Ian K. Panganiban
Student Assistant SOS UPDGIS-3D

44

More Related Content

Similar to Introduction to 3D Mapping with X3D

3D Geo-standaarden workshop
3D Geo-standaarden workshop3D Geo-standaarden workshop
3D Geo-standaarden workshop
Léon Berlo
 
Development of 3 d interfaces for mobile BIM applications by João Poças Martins
Development of 3 d interfaces for mobile BIM applications by João Poças MartinsDevelopment of 3 d interfaces for mobile BIM applications by João Poças Martins
Development of 3 d interfaces for mobile BIM applications by João Poças Martins
Joao Rio
 

Similar to Introduction to 3D Mapping with X3D (20)

mago3D FOSS4G NA 2018
mago3D FOSS4G NA 2018mago3D FOSS4G NA 2018
mago3D FOSS4G NA 2018
 
Introduction to mago3D: A web based GeoBIM platform on top of FOSS4G
Introduction to mago3D:  A web based GeoBIM platform on top of FOSS4GIntroduction to mago3D:  A web based GeoBIM platform on top of FOSS4G
Introduction to mago3D: A web based GeoBIM platform on top of FOSS4G
 
3D Geo-standaarden workshop
3D Geo-standaarden workshop3D Geo-standaarden workshop
3D Geo-standaarden workshop
 
Standards for the Metaverse
Standards for the MetaverseStandards for the Metaverse
Standards for the Metaverse
 
C3D Labs. Geometric Modeling Toolkit
C3D Labs. Geometric Modeling ToolkitC3D Labs. Geometric Modeling Toolkit
C3D Labs. Geometric Modeling Toolkit
 
C3D Labs. Geometric Modeling Toolkit
C3D Labs. Geometric Modeling ToolkitC3D Labs. Geometric Modeling Toolkit
C3D Labs. Geometric Modeling Toolkit
 
State of mago3D, An Open Source Based Digital Twin Platform
State of mago3D, An Open Source Based Digital Twin PlatformState of mago3D, An Open Source Based Digital Twin Platform
State of mago3D, An Open Source Based Digital Twin Platform
 
PG-4119, 3D Geometry Compression on GPU, by Jacques Lefaucheux
PG-4119, 3D Geometry Compression on GPU, by Jacques LefaucheuxPG-4119, 3D Geometry Compression on GPU, by Jacques Lefaucheux
PG-4119, 3D Geometry Compression on GPU, by Jacques Lefaucheux
 
Drupal 3D - Intro to Using Web 3D with Drupal
Drupal 3D - Intro to Using Web 3D with DrupalDrupal 3D - Intro to Using Web 3D with Drupal
Drupal 3D - Intro to Using Web 3D with Drupal
 
3d-builder.docx
3d-builder.docx3d-builder.docx
3d-builder.docx
 
3D INTERNET Technical Seminar
3D INTERNET Technical Seminar3D INTERNET Technical Seminar
3D INTERNET Technical Seminar
 
Current State of mago3D, an Open Source Based Digital Twin Platform
Current State of mago3D, an Open Source Based Digital Twin PlatformCurrent State of mago3D, an Open Source Based Digital Twin Platform
Current State of mago3D, an Open Source Based Digital Twin Platform
 
Interacting with In Mrs. Goldberg’s Kitchen
Interacting with In Mrs. Goldberg’s KitchenInteracting with In Mrs. Goldberg’s Kitchen
Interacting with In Mrs. Goldberg’s Kitchen
 
Let's integrate CAD/BIM/GIS on the same platform: A practical approach in rea...
Let's integrate CAD/BIM/GIS on the same platform: A practical approach in rea...Let's integrate CAD/BIM/GIS on the same platform: A practical approach in rea...
Let's integrate CAD/BIM/GIS on the same platform: A practical approach in rea...
 
Extending 3D Model Visualization with FME 2017
Extending 3D Model Visualization with FME 2017Extending 3D Model Visualization with FME 2017
Extending 3D Model Visualization with FME 2017
 
Introduction to mago3D: A Web Based Open Source GeoBIM Platform
Introduction to mago3D: A Web Based Open Source GeoBIM PlatformIntroduction to mago3D: A Web Based Open Source GeoBIM Platform
Introduction to mago3D: A Web Based Open Source GeoBIM Platform
 
Introduction to mago3D, an Open Source Based Digital Twin Platform
Introduction to mago3D, an Open Source Based Digital Twin PlatformIntroduction to mago3D, an Open Source Based Digital Twin Platform
Introduction to mago3D, an Open Source Based Digital Twin Platform
 
What is C3D?
What is C3D?What is C3D?
What is C3D?
 
Development of 3 d interfaces for mobile BIM applications by João Poças Martins
Development of 3 d interfaces for mobile BIM applications by João Poças MartinsDevelopment of 3 d interfaces for mobile BIM applications by João Poças Martins
Development of 3 d interfaces for mobile BIM applications by João Poças Martins
 
CityEngine-OpenDS
CityEngine-OpenDSCityEngine-OpenDS
CityEngine-OpenDS
 

Recently uploaded

Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers:  A Deep Dive into Serverless Spatial Data and FMECloud Frontiers:  A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Safe Software
 
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
?#DUbAI#??##{{(☎️+971_581248768%)**%*]'#abortion pills for sale in dubai@
 
Architecting Cloud Native Applications
Architecting Cloud Native ApplicationsArchitecting Cloud Native Applications
Architecting Cloud Native Applications
WSO2
 

Recently uploaded (20)

Platformless Horizons for Digital Adaptability
Platformless Horizons for Digital AdaptabilityPlatformless Horizons for Digital Adaptability
Platformless Horizons for Digital Adaptability
 
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers:  A Deep Dive into Serverless Spatial Data and FMECloud Frontiers:  A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
 
DBX First Quarter 2024 Investor Presentation
DBX First Quarter 2024 Investor PresentationDBX First Quarter 2024 Investor Presentation
DBX First Quarter 2024 Investor Presentation
 
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
 
presentation ICT roal in 21st century education
presentation ICT roal in 21st century educationpresentation ICT roal in 21st century education
presentation ICT roal in 21st century education
 
Navigating the Deluge_ Dubai Floods and the Resilience of Dubai International...
Navigating the Deluge_ Dubai Floods and the Resilience of Dubai International...Navigating the Deluge_ Dubai Floods and the Resilience of Dubai International...
Navigating the Deluge_ Dubai Floods and the Resilience of Dubai International...
 
Apidays New York 2024 - The Good, the Bad and the Governed by David O'Neill, ...
Apidays New York 2024 - The Good, the Bad and the Governed by David O'Neill, ...Apidays New York 2024 - The Good, the Bad and the Governed by David O'Neill, ...
Apidays New York 2024 - The Good, the Bad and the Governed by David O'Neill, ...
 
Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobe
Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, AdobeApidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobe
Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobe
 
[BuildWithAI] Introduction to Gemini.pdf
[BuildWithAI] Introduction to Gemini.pdf[BuildWithAI] Introduction to Gemini.pdf
[BuildWithAI] Introduction to Gemini.pdf
 
TrustArc Webinar - Unlock the Power of AI-Driven Data Discovery
TrustArc Webinar - Unlock the Power of AI-Driven Data DiscoveryTrustArc Webinar - Unlock the Power of AI-Driven Data Discovery
TrustArc Webinar - Unlock the Power of AI-Driven Data Discovery
 
WSO2's API Vision: Unifying Control, Empowering Developers
WSO2's API Vision: Unifying Control, Empowering DevelopersWSO2's API Vision: Unifying Control, Empowering Developers
WSO2's API Vision: Unifying Control, Empowering Developers
 
Introduction to Multilingual Retrieval Augmented Generation (RAG)
Introduction to Multilingual Retrieval Augmented Generation (RAG)Introduction to Multilingual Retrieval Augmented Generation (RAG)
Introduction to Multilingual Retrieval Augmented Generation (RAG)
 
Architecting Cloud Native Applications
Architecting Cloud Native ApplicationsArchitecting Cloud Native Applications
Architecting Cloud Native Applications
 
Boost Fertility New Invention Ups Success Rates.pdf
Boost Fertility New Invention Ups Success Rates.pdfBoost Fertility New Invention Ups Success Rates.pdf
Boost Fertility New Invention Ups Success Rates.pdf
 
CNIC Information System with Pakdata Cf In Pakistan
CNIC Information System with Pakdata Cf In PakistanCNIC Information System with Pakdata Cf In Pakistan
CNIC Information System with Pakdata Cf In Pakistan
 
Elevate Developer Efficiency & build GenAI Application with Amazon Q​
Elevate Developer Efficiency & build GenAI Application with Amazon Q​Elevate Developer Efficiency & build GenAI Application with Amazon Q​
Elevate Developer Efficiency & build GenAI Application with Amazon Q​
 
Strategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
Strategize a Smooth Tenant-to-tenant Migration and Copilot TakeoffStrategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
Strategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
 
Artificial Intelligence Chap.5 : Uncertainty
Artificial Intelligence Chap.5 : UncertaintyArtificial Intelligence Chap.5 : Uncertainty
Artificial Intelligence Chap.5 : Uncertainty
 
How to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected WorkerHow to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected Worker
 
Apidays New York 2024 - The value of a flexible API Management solution for O...
Apidays New York 2024 - The value of a flexible API Management solution for O...Apidays New York 2024 - The value of a flexible API Management solution for O...
Apidays New York 2024 - The value of a flexible API Management solution for O...
 

Introduction to 3D Mapping with X3D

  • 1. Introduction to 3D Webmapping in X3D Free Open Source Software for Geospatial (FOSS4G) Talks and Demos 2013 Presenter Luis Caezar Ian K. Panganiban Student Assistant SOS UPDGIS-3D 1
  • 2. Outline 3D in Web  3D Visualization X3D + DOM = X3DOM  3D Web Problems in 3D Web X3D   What is X3D Web 3D Consortium X3DOM and HTML  X3DOM Engine  Code Structure    Features X3DOM and 3D Mapping     Features of X3D Working with X3D Working with X3DOM Final Notes 2
  • 4. Why 3D? - better visualization and appreciation of the world 4
  • 5. Why 3D? ? Notes: Problem 3D real world objects in 2D maps – introduce abstractions and generalization of data. Depth Perception is non exsitent Removes other features that makes the object unique. 3D real world objects in 3D models – less abstractions and generalization of data. Depth Perception is present Retains most features. 5
  • 6. 3D Around Us Gaming Final Fantasy 4 – SNES (1991) Final Fantasy X-2 – PS2 (2003) Notes: Due to the increase in processing power and speed we can now have a better representation of the world. Hardware can now handle the stress of having 3D graphics SNES – Super Nintendo Entertainment System . 6
  • 8. Web in 3D Notes: There is a move to display information in 3D. Some 3D viewers require a client(standalone program) and additional plugins Google Earth provides a 2.5D view of the world. Google Earth Downtown Chicago 8
  • 9. Web in 3D Notes: 2.5D Here Maps London Street View = images + panoramic view 9
  • 10. Web in 3D Notes: OSM – 3D uses java applet osm -3D 10
  • 11. Problems in 3D Web  Bandwith limitations (rendering)  Model file size  Clients / Plugins 11
  • 13. What is X3D? “X3D (Extensible 3D) is a royalty-free and openly published standard file format specification and run-time architecture to represent and communicate 3D objects, events, behaviors and environments.” Notes: X3D – is an ISO certified xml file format used for 3D applications. -successor of the VRML97(Virtual Reality Modeling Language) Example of an X3D object/model 13
  • 14. The Web3D Consortium Notes: Web3D consortium to provide a forum for the creation of open standards and specifications in web 3d. Act as a body of certification in open web 3d. They manage the specifications of the x3d file format. The Web3D Consortium is utilizing its broad-based industry support to develop the the X3D specification, for communicating 3D on the web, between applications and across distributed networks and web services. 14
  • 15. What is X3D? Notes: Example of an X3D code – xml based file format 15
  • 16. Features of X3D  ISO certified scene graph model  Modular and Extensible  Lightweight  Coordinate System : Right Hand 16
  • 18. X3D Editors / Viewers Blender Notes: Blender – 3D modeling and mesh program; you can export your customized models into x3d, 3ds, ply and others Link : http://www.blender.org/ 18
  • 19. X3D Editors / Viewers X3D Edit Notes: X3D Edit and Xj3D are java based applications for editing and viewing. Other links for viewers and editors: http://www.web3d.org/x3d/content/examples/X3dResources.html Xj3D (Viewer) 19
  • 20. Web + X3D = X3DOM 20
  • 21. X3DOM “ The Document Object Model is a platform and language-neutral interface that will allow programs and scripts to dynamically access and update the content, structure and style of documents. “ -w3c.org Jquery Manipulation 21
  • 22. X3DOM - Features  Built in Camera Navigation  Specialized Components (Geospatial, Runtime, Node)  Lightweight Javascript Library  Cross Platform Notes: X3DOM Site: http://www.x3dom.org/ 22
  • 24. X3DOM Engine  Web Graphics Library (WebGL)  No additional plugins required  Browser == Deployment  No special api (game engines)  Supported by most web browsers Notes: IE 9 does not support WebGL use Chrome Frame or Instant Reality Plugin or Flash 11. IE 11 supports WebGL 24
  • 26. X3DOM – Javascript Library From Fraunhofer IGD slides 26
  • 27. X3DOM – X3D tag From Fraunhofer IGD slides 27
  • 28. X3DOM – Create your Own! From Fraunhofer IGD slides 28
  • 29. X3DOM – External X3D Allows you to use external x3d files! 29
  • 31. X3DOM - Geospatial Component Geospatially referenced scenes have special requirements beyond ordinary 3D scenes  Double-precision accuracy on floating-point displays  Diverse yet coherent spatial reference systems Web 3D Consortium 31
  • 33. Working with X3DOM  Host X3D using the <inline> tag  Build your own (html and x3dom tags)  Other File Formats convert to X3D  Database(PostGIS) – ST_AsX3D(PostGIS Geometry) – 3D CityDB importer(Collada/KML, CityGML) 33
  • 35. X3DOM and Mapping CityGML → X3DOM CityGML(Sketchup) 3D CityDB Importer X3DOM PostGIS ST_Collect and ST_AsX3D 35
  • 36. Other Examples and Demo Notes: For more examples go to : http://www.x3dom.org/?page_id=5 36
  • 40. Final Notes on X3D/X3DOM  Good for Visualization   Lacks Documentation   Speed, Customization, Lightweight, Installation Examples, Tutorials, Development Stage Research other Components/Methods  Import, Conversion to X3D, Working with DB 40
  • 41. References and Sources Content References and Sources Web3D – Flyer_201207(W3C) X3D: The Real-Time 3D Solution for the World-Wide Web (W3C) X3DOM – Declarative (X)3D in HTML5 by Yvone Jung, Fraunhofer IGD X3D Geospatial Component and X3D Earth (W3C) www.web3d.org www.x3dom.org (Pictures, Examples and Tutorials) 41
  • 42. References and Sources Images References and Sources Disclaimer All of the photographs and images depicted on this presentation are copyrighted images. Most of the images are mine, but some of them do not belong to me. I have no intention of copyright infringement and these pictures were only used for more emphasis and to present certain ideas and topics. 42
  • 44. Introduction to 3D Webmapping in X3D Free Open Source Software for Geospatial (FOSS4G) Talks and Demos 2013 Presenter Luis Caezar Ian K. Panganiban Student Assistant SOS UPDGIS-3D 44