x3dom/instant reality

X3DOMGetting declarative (X)3D into HTML5

Go-3D 2010, 31.8.2010, Rostock

Johannes Behr

- Web3D Consortium HTML5/X3D Working group

- Fraunhofer IGD, Darmstadt, Germany

Virtual and Augmented Reality Group,

[email protected]

Overview

Introduction and Motivation

Current State of 3D on the net

X3DOM Integration Model

System Architecture

HTML Profile

DOM Updates

HTML Events

CSS Integration

Implementation

JS-Layer

HTML & XHTML encoding

Fallback-model

Application

Standardization and Conclusion

Introduction & Motivation

15 years of Web-3D technology but now single solution widely used

Initial hardware and network limitations are gone

mobile devices render millions of polygons per second

broadband connection in almost every home

Increasing interest in 3D web technology

Fat-client: GoogleEarth, Distributed Vis, Games, …

Web-Based Application is a global trend;

W3C/HTML5 group shows interest in 3D technology

OpenGL (ES) as API and programming interface / WebGL

X3D for declarative content

Current State of 3D on the netplugin based solutions

Flash (Adobe)

>= Version 10: Minimal 3D transformation for 2D elements

>= Version 11 (2011): Full 3D API ?

Silverlight (Microsoft)

>= Version 3: Minimal 3D transformation for 2D elements

Java, Java3D, JOGL and JavaFX (SUN)

O3D (Google): Javascript based scene-graph API

X3D (ISO, web3d consortium): plugins with SAI interface

MPEG-4 & MPEG-4 Part 11 (ISO, Moving Picture Experts Group)

General Issues:

=> Installation/Security

=> Data/Event-model is separated from HTML-page

=> plugin specific scripting interface (e.g. SAI for X3D)

Current State of 3D on the netmoving from plugins to native services and standards

WebGL: Imperative API, Exposes OpenGL-ES layer to Javascript

Efficiency: Too many (battery) resources to manage the scene in JS?

Concepts: HTML Developer has to deal with GLSL and 4x4 matrices.

Metadata: Index and search “content” on WebGL-Apps?

Microsoft: Silverlight 3D / Direct3D – JavaScript layer ?

HTML5 Specification (Draft Summer 2009):

12.2 Declarative 3D scenesEmbedding 3D imagery into XHTML documents is the domain of X3D, or technologies bases on X3D that are namespace aware.

DOM (Document Object Model) is a and language-independent convention for interacting with XML and HTML documents. => Tree-API and foundation for dynamic HTML5-Application

X3DOM integration modelDeclarative (X)3D scene-graph in HTML

<!DOCTYPE html >

<html >

<body>

<h1>Hello X3DOM World</h1>

<x3d xmlns=„…‟ profile=„…‟ >

<scene>

<shape>

<box></box>

</shape>

</scene>

</x3d>

</body>

</html>

Overview



X3DOM Model

System Architecture

HTML Profile

DOM Updates

HTML Events

CSS Integgration

Implementation

JS-Layer


Fallback-model

Application


X3DOMGeneric system architecture

HTML/DOM ProfileReduce X3D to 3D visualization component for HTML5

General Goal:

Utilizes HTML/JS/CSS for scripting and interaction

Reduced complexity and implementation effort

Reduces X3DOM to visualization component for 3D like SVG for 2D

2 Profiles: HTML and HTML-Tiny/WebSG

“HTML”-Profile (Extends “Interchange” Profile ): ~ 80 nodes

Full runtime with anim., navigation and asynchronous data fetching

No X3D-Script, Proto, High-Level Sensor-nodes

Declarative and explicit shader material

“HTML-Tiny”-Profile: ~ 15 nodes

No Runtime at all: Just redraw on changes

Generic <geometry> node without vertex semantics

Only explicit shader material

DOM Manipulation Node appending and removal

HTML/X3D code:

…

<group id=„root‟></group>

. …

HTML-Script to add nodes:

trans = document.createElement('Transform');

trans.setAttribute(„translation‟, „1 2 3‟ );

document.getElementById(„root‟).appendChild(trans);

HTML-Script to remove nodes:

document.getElementById(„root‟).removeChild(trans);

DOM ManipulationField updates with setAttribute() or SAI-Field interfaces

HTML/X3D code:

…

<material id=„mat‟></material>

…

<coordinate id=„coord‟ point=„5.6 3 87, 8.8 8.4 3.2, …‟

></coordinate>

. …

Generic HTML-Script with setAttribute(): also useful for libs like jQuery

document.getElementByid(„mat‟).setAttribute(„diffuseColor‟,‟red‟);

HTML-Script using SAI-Field interface: X3D JS-binding for more efficiency

var saiField = document.getElementById(„coord).getField(„point‟);

saiField[4711].x = 0.815;

HTML EventsUser Interaction through DOM Events

Supports interaction with standard HTML-Events. Supports ancient and

addEventListener() interfaces.

<x3d xmlns=”…">

<Scene>

<Shape>

<Appearance>

<Material id=„mat‟ diffuseColor=„red‟ />

</Appearance>

<Box

onclick=“document.getElementById(„mat‟).diffuseColor=„green‟” />

</Shape>

</Scene>

</x3d>

DOM ManipulationCSS Integration

CSS: presentation semantics, look and formatting of the document

X3D: No strict separation between structure and style; no layout process

X3D counterpart: Transformation and Appearance ( including

Shader )

Appearance:

Fix assigning of existing properties: color to

diffuseColor

=> very limited, only works with fix material

Dynamic use of existing properties:

diffuseColor=„@color‟

=> very flexible, really what we want ?

Introduce new properties

=> not allowed on UA layer ( some UA

support it )

Reuse single property for Appearance selection;

=> Shader database; no shader param

access

DOM ManipulationCSS 3D Transforms

CSS 3D Transforms Module Level 3; W3C Draft (Standard)

Utilized to transform and update <transform> nodes

<style type="text/css">

#trans {

-webkit-animation: spin 8s infinite linear;

}

@-webkit-keyframes spin {

from { -webkit-transform: rotateY(0); }

to { -webkit-transform: rotateY(-360deg); }

}

</style>

…

<transform id="trans" >

<transform style="-webkit-transform: rotateY(45deg);">

…

Implementation



X3DOM Model

System Architecture

HTML Profile

DOM Updates

HTML Events

CSS Integration

Implementation

JS-Layer


Fallback-model

Application


Intermediate JS-based FrontendRuns in unmodified User-Agent

<!DOCTYPE html >

<html >

<head>

<link rel="stylesheet" type="text/css" href="x3dom.css” >

<script type="text/javascript" src="x3dom.js"></script>

</head>

<body>

<h1>HTML5 Hello World</h1>

<x3d xmlns=”…” profile=„…‟ backend=„…‟ >

<scene>

…

</scene>

</x3d>

</body>

</html>

Fallback model Matching existing backends and content-profile

Unified XHTML/HTML Encodingwith xmlns, case-insensitive tags, no-self closing tags

<!DOCTYPE html >

<html >

<body>

<h1>HTML5 Hello World</h1>

<x3d xmlns=”…” profile=„…‟ >

<scene>

<viewpoint position=„…‟></viewpoint>

…

<route … ></route>

</scene>

</x3d>

</body>

</html>




X3DOM Model

System Architecture

HTML Profile

DOM Updates

HTML Events

CSS Integration

Implementation


Fallback-model

Native

plugin backend

webGL backend

Application


Application show-cases

Demo !

)

Application show-caseThematic data on climate change in cities

Application show-caseFacebook Friendgraph in 3D

Standardization

06/09 Architecture was presented to the web3d working group

08/09 Accepted as one model to be presented to W3C working group

10/09 Architecture was presented to the W3C/HTML working group (TPAC)

=> Official HTML5 “bug” to integrate X3D

04/10 Software Release 1.0

08/10 X3DOM presentation at WebGL Khronos BOF

=> Khronos/Web3D align W3C strategies

Developed further through the X3D/HTML5 wiki

(http://www.web3d.org/x3d/wiki/index.php/X3D_and_HTML5)

Conclusion

X3DOM is an experimental open source framework and runtime to support

the ongoing discussion in the Web3D and W3C communities to integrate

HTML5 and declarative 3D content.

Targeted Application Area:

Declarative content design

Builds on an HTML5 layer

Application concepts map

well to generic scenegraph

Powerful Fallback model

supports, Native, Plugin,

WebGL and Flash (soon)

today!

Thanks!

Questions?

X3DOM

System:

www.x3dom.org

X3D/HTML5 interest group

http://www.web3d.org/x3d/wiki/index.php/X3D_and_HTML5

http://www.x3dom.org

http://www.web3d.org/x3d/wiki/index.php/X3D_and_HTML5

x3dom/instant reality

Documents