SlideShare a Scribd company logo
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

PPTX
Introduction to X3D
PDF
mago3D - A Brand-New Live 3D Geo-Platform
PDF
VR Workshop #1
PDF
mago3D: Let's integrate BIM and 3D GIS on top of FOSS4G
PDF
mago3D, a web based BIM/GIS integration platform on top of open source
PDF
Mago3D: A Brand-New Live 3D Geo-Platform
PDF
Understanding The Background Of Mudbox
PDF
Web 3D for Education
Introduction to X3D
mago3D - A Brand-New Live 3D Geo-Platform
VR Workshop #1
mago3D: Let's integrate BIM and 3D GIS on top of FOSS4G
mago3D, a web based BIM/GIS integration platform on top of open source
Mago3D: A Brand-New Live 3D Geo-Platform
Understanding The Background Of Mudbox
Web 3D for Education

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

PPTX
Sx sw speaker proposal slides
PPT
Open Standard For The 3D Web
PDF
3D webservices - where do we stand? (ENG)
PDF
ENEI16 - WebGL with Three.js
PPT
3D Geo-standaarden workshop
PDF
Interacting with In Mrs. Goldberg’s Kitchen
PDF
Web3D - Semantic standards, WebGL, HCI
PPTX
PPTX
3d web powered by NodeJS & AngularJS
PDF
Drupal 3D - Intro to Using Web 3D with Drupal
PPT
OWC 2012 (Open Web Camp)
PDF
3D World Heritage at your fingertips: what to expect? Online solutions to the...
PDF
Introduction to three.js & Leap Motion
PPTX
UNIT-II Immersive Design for 3D.pptx
PPTX
22CDH01-UNIT-II Immersive Design for 3D.pptx
PPTX
Rest3d BOF presentation at SigGraph 2013
PPTX
Standards for the Metaverse
PPTX
Exploring-javafx-3d
PDF
A 3 d graphic database system for content based retrival
PDF
Introduction to WebGL - 1st WebGL meetup Amsterdam
Sx sw speaker proposal slides
Open Standard For The 3D Web
3D webservices - where do we stand? (ENG)
ENEI16 - WebGL with Three.js
3D Geo-standaarden workshop
Interacting with In Mrs. Goldberg’s Kitchen
Web3D - Semantic standards, WebGL, HCI
3d web powered by NodeJS & AngularJS
Drupal 3D - Intro to Using Web 3D with Drupal
OWC 2012 (Open Web Camp)
3D World Heritage at your fingertips: what to expect? Online solutions to the...
Introduction to three.js & Leap Motion
UNIT-II Immersive Design for 3D.pptx
22CDH01-UNIT-II Immersive Design for 3D.pptx
Rest3d BOF presentation at SigGraph 2013
Standards for the Metaverse
Exploring-javafx-3d
A 3 d graphic database system for content based retrival
Introduction to WebGL - 1st WebGL meetup Amsterdam
Ad

Recently uploaded (20)

PDF
Peak of Data & AI Encore- AI for Metadata and Smarter Workflows
PDF
Review of recent advances in non-invasive hemoglobin estimation
PDF
Optimiser vos workloads AI/ML sur Amazon EC2 et AWS Graviton
PDF
Advanced methodologies resolving dimensionality complications for autism neur...
PDF
Dropbox Q2 2025 Financial Results & Investor Presentation
PDF
Architecting across the Boundaries of two Complex Domains - Healthcare & Tech...
PPTX
VMware vSphere Foundation How to Sell Presentation-Ver1.4-2-14-2024.pptx
PPTX
MYSQL Presentation for SQL database connectivity
PDF
Encapsulation_ Review paper, used for researhc scholars
PDF
Approach and Philosophy of On baking technology
PDF
cuic standard and advanced reporting.pdf
PPTX
ACSFv1EN-58255 AWS Academy Cloud Security Foundations.pptx
PDF
Profit Center Accounting in SAP S/4HANA, S4F28 Col11
PPT
Teaching material agriculture food technology
PDF
Spectral efficient network and resource selection model in 5G networks
PDF
Build a system with the filesystem maintained by OSTree @ COSCUP 2025
PDF
Unlocking AI with Model Context Protocol (MCP)
PPTX
Big Data Technologies - Introduction.pptx
PPTX
20250228 LYD VKU AI Blended-Learning.pptx
PDF
Blue Purple Modern Animated Computer Science Presentation.pdf.pdf
Peak of Data & AI Encore- AI for Metadata and Smarter Workflows
Review of recent advances in non-invasive hemoglobin estimation
Optimiser vos workloads AI/ML sur Amazon EC2 et AWS Graviton
Advanced methodologies resolving dimensionality complications for autism neur...
Dropbox Q2 2025 Financial Results & Investor Presentation
Architecting across the Boundaries of two Complex Domains - Healthcare & Tech...
VMware vSphere Foundation How to Sell Presentation-Ver1.4-2-14-2024.pptx
MYSQL Presentation for SQL database connectivity
Encapsulation_ Review paper, used for researhc scholars
Approach and Philosophy of On baking technology
cuic standard and advanced reporting.pdf
ACSFv1EN-58255 AWS Academy Cloud Security Foundations.pptx
Profit Center Accounting in SAP S/4HANA, S4F28 Col11
Teaching material agriculture food technology
Spectral efficient network and resource selection model in 5G networks
Build a system with the filesystem maintained by OSTree @ COSCUP 2025
Unlocking AI with Model Context Protocol (MCP)
Big Data Technologies - Introduction.pptx
20250228 LYD VKU AI Blended-Learning.pptx
Blue Purple Modern Animated Computer Science Presentation.pdf.pdf
Ad

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