Not Your Mother's Web3D: Integrating X3DOM, jQuery and HTML5

by Sandy Ressler

National Institute of Standards and Technology

Web3D 2012, August 4-5, 2012

Hit the ESC for an overview of the slideset (be patient wait for assets to load)

Disclaimer

Any mention of commercial products within this presentation or NIST web pages is for information only; it does not imply recommendation or endorsement by NIST.

The views expressed in this presentation are solely those of the author and do not represent any official views of NIST or the US Government.

Follow Along!

http://math.nist.gov/~sressler/

x3dom/revealjs14/jQueryTut.html

Agenda

What is markup, DOM, jQuery, and X3DOM

Selecting DOM elements, events, moving around the DOM tree

jQuery

X3DOM

Dynamically generating Geometry and Making it Interactive

Dynamically generating UI Controls

Extending jQuery - Plugins for Dummies

Future

What is markup?

Markup is information that is embedded in the text of a document that is not intended for printing or display. It may consist of instructions to a printing device, commands for a Web browser, or comments to a coauthor. The form the markup takes is a function of the particular markup language used.

HTML important but not only markup language

XML

XHTML

CSS

SGML

I tend to use .xhtml because the browser (parsing) is way more informative about errors

Look Ma there's some 3D in my web pages!

What is the DOM?

DOM - Document Object Model

The structure of everything needed to render a page..and more!

Manipulating the DOM means you are manipulating page elements

Selecting elements of the DOM means you are selecting those elements of the page you wish to manipulate.

DOM Structure

From http://www.iwein.co.uk/2006/05/30/dom-structure-visualized/

DOM Structure (simple document)

From W3C http://www.w3.org/TR/2006/WD-DOM-Level-3-Events-20060413/events.html

DOM Events

From W3C http://www.w3.org/TR/2006/WD-DOM-Level-3-Events-20060413/events.html

DOM (HTML) Events

Web programming is "real time" programming

Actions are "event driven"

just like games!!

An event happens, you perform an action and (sometimes) you have a callback to maintain control, in an asyncronous manner