Building Blocks of Dec3D

Declarative 3D in HTML Documents

The main idea of this approach is provide an extension to HTML which allows web developer to build HTML-Documents containing interactive, dynamic and realtime 3D graphics easily and effective. This extension should be minimalistic and reuse as many existing W3C techniques as possible but also rich enough to leverage all use-cases selected in the community group. This will include applications from the 3D UI, Visual Analytics, Sales, Cultural Heritage, Visualization, Simulation and casual Gaming domain. The focus is not on high-end games or visualizations since this applications usually require very specialized data and asset structures which to not map well to a generalized declarative approach.

Technical Application Criteria

We assume that follow application criteria:

* complex scenes
* large sets of surface and/or volume data
* flexible and dynamic realistic and unrealistic shading and lighting models
* highly dynamic scenes

Scene structure

All declarative 3D objects and there relations build up the scene which can be visualized in realtime. Similar to HTML and SVG today the scene should be structured as scene-graph which is a well established Retained mode data structure for realtime graphics.

3D Scene and HTML connection and correlation

No plugin ...

There are exceptions to html which allow 3D transforms for any existing HTML element: CSS 3D Transforms. This enables 3D transformation and effects on 2D DOM elements but lag any higher level scene building blocks like meshes or lights to build up complex and dynamically shaded scenes.

Our current approach is similar to SVG and provides an integrated but separate sub-scene to the HTML document which includes all 3D related scene elements. XXX More on advantage. 3d traversal ...

Scene graph requirements

Hierarchy

The DOM document hierarchy should reflect the scene-graph hierarchy. Adding, removing a DOM element should reflect to the scene-graph properties in realtime. There is no additional user or applciation controlled synchronization or update process. The DOM nodes shall provide additional data interfaces to allow fast and efficient updates on scene data.

Grouping & Transformations

One or more elements must be able to handle an arbitrary number of sub-elements. This grouping elements should support transforming the given sub-trees by transforming the group element. The elements should be able to handle CSS 3D transformations

Asset use and reuse

The system should be able to utilize <img>, <video> and <canvas> samples as shading properties and therefore external data blogs in any UI supporting format. The specification should also be able to reference external fils

How/Reuse internal data:

Subtrees? Nice to have (DFKI+), but how to realize. Some approaches: Reuse: Restricted (Defs, Tree) Generic (e.g. DEF/USE) IFrame/Inline-like Specialized: Prototypes/XBL Namespace issue External references: yes!

Mesh data

HW vs. compactness

Granularity of compositioning?

Submeshes? Why: Shader-lists, Performance, Usability TODO: Find uses-cases, show that CSS can replace shader-lists concept.

Multi-index: Necessary? How much do I save? Evaluate! If needed: XFlow vs. explicit

Generic meshes, all attributes generic IGD+ TypedArrays interface for fields Fields: Multi/single? Attributes like stride, tuple size? Field encoding: <float id=”colors” value=”3 3 3”>3. 5.0</float> getElementById(“colors”).value typeof Float32Arary FloatElement : HTMLElement { Object value; } <field type=”SFFloat” value=”1.4”/> TODO: Which kind of field, encoding, tupleSize and why? TODO: jQuery etc compatibility?

Material & Shading

Allow shader fallback Fixed-function shaders Open for future ideas/concepts, e.g. AnySL Generic shader parameters, same as for meshes. Standard 3 OpenGL light type are not sufficient. Lighting concepts: <PointLight color=”5 5 5”/> <mesh type=”points” style=”emission-shader: url(#myPoint);emission-global: true”> </mesh>

Cameras & Views

Viewpoints, More than 1 allowed? Stacks? Camera object

Animation

Declarative animation. What exist in SVG?

Pose Animation

Animations Do we have to specify key frame animations? JS? Definition: What belongs to Animation?

Data Animation

Morphing, skinning, image manipulation etc.

Standard Runtime

How to control frame-rate and scene-updates?

Synchronisation

Asynchronous vs. synchronous (important, address in XG and when?)

Navigation

Does the system support a standard set of navigation types?

Canvas interaction

Define canvas attributes and style Use <canvas> as tag?