You are here
Error message
Deprecated function: Array and string offset access syntax with curly braces is deprecated in include_once() (line 20 of /home/drbiz/public/2013.realism.com/includes/file.phar.inc).Clone of Adding Nodes to X3DOM: Orientation, Performance, and Stereographic Display
X3DOM is a JavaScript library that brings declarative 3D to HTML pages.
Adding Nodes to X3DOM:
Orientation, Performance, and Stereographic Display
Leonard Daly
President, Daly Realism
Licensing Notice
This material is licensed as XXX
Some of the material comes from other sources. Licensing for that other material may be different than that associated with the entire document. Credit for the individual pieces of content (text, graphics, images, etc.) are identified on the page where that content appears. The full credit reference is given on the Credit pages.
Overview
- X3DOM Overview
- Device Orientation - interactive demo in X3D, add X3D transformation matries or combined angle calculation
- Walkabout - clean up example, images, demo
- Look & Pick - make sure it works, images, demo
- SphericalVideo - clean up and demo
- StereoView - clean up and demo, including turn on/off
- Adding Nodes to X3DOM
- Animation - describe work
- Macro - show node signature and substitution
- StereoView - discuss adding nodes to scene graph
- DeviceSensor - detailed discussion of interface (node signature and interface with browser)
- Example - finish work
- Discussion - list topics (node signatures, missing features, etc.)
X3DOM Overview
- http://x3dom.org/
- JavaScript Library that implements the X3D Standard (http://www.web3d.org/documents/specifications/19775-1/V3.3/Part01/Archit...)
- Relatively minor changes to work in HTML5
- Not all nodes implemented
- Additional nodes added
- Compatible with jQuery and oither frameworks
- Requires one JavaScipt and one CSS external files
- Supports streaming progressive geometry with textures
- DOM & HTML Integration
- Supports animation, interaction
X3DOM Examples
Streaming Progressive Geometry
- "Happy Buddha"
- Stanford Buddha
- Compression and streaming by Fraunhofer
- Almost 1,000,000 triangles at 50+ fps
X3DOM Examples
Animation & Interaction
- Ocean Drilling Rig
- 3D rendering by Fraunhofer
- Interactive Sun position and sky coloring
- Shadows
- HIgh detail
X3DOM Examples
Audio with animationed camera in a texture-rich environment
- "Siena Cathedral"
- Visuals developed by Fraunhofer
- Audio "Amicus Meus" composed by Tomás Luis de Victoria (Spain, c.1548 – 1611)
- Audio integrated with visuals by Leonard Daly
WebVR and A-Frame
- WebVR is a W3C standard in development (latest draft 1 June 2016)
- Addresses Web-based VR devices, including sensors and displays
- Provide high-precision, low-latency interfaces in JavaScript
- Integrated with DOM
- Rendering from device-independent canvas
- A-Frame is a Mozilla effort for declarative 3D
- Built in tree structure
- Simplified nodes
- CSS-style attribute delarations
Device Movement
- Most all devices detect and capture some motion events
- Position
- Orientation
- Velocity
- Accelleration
- Resolution and accuracy for changes are not uniform across all motion categories
- Most accurate is Orientation
- All rotation angles are in degrees
Device Orientation
- Three angles are defined - α, β, γ
- Represent rotation from standard orientation
- Units are degrees
- Standard
Copyright © 2015 W3C® (MIT, ERCIM, Keio, Beihang). This software or document includes material copied from or derived from "DeviceOrientation Event Specification" - http://w3c.github.io/deviceorientation/spec-source-orientation.html
Device Rotations
Copyright © 2015 W3C® (MIT, ERCIM, Keio, Beihang). This software or document includes material copied from or derived from "DeviceOrientation Event Specification" http://w3c.github.io/deviceorientation/spec-source-orientation.html
See blog post Check Mobile Orientation for an interactive demonstration using mobile devices.
Walkabout
Mechanism to "walking" about a VR space using a mobile device without walking.
Concept is a combined capability of NavigaionInfo, Viewpoint, and SpatialSensor

- Look & Go
- "Tank" mode
- Documentation
Walkabout - Look & Go
- Walk on the surface in direction of looking - 2D Movement
- Walking is always the same speed
- Look up or down
- Twisting sensor is no real effect
- Look at nadir to start/stop
<Need graphic & link to demo>
Walkabout - "Tank" Mode
- Go straight unless twisting sensor
- Twisting sensor steers motion (like a car)
- Left/Right look is always relative to motion orientation
- Tilting sensor changes speed
<Need graphic & link to demo>
LookSensor
Pick an object by staring at it long enough. Equivalent to TouchSensor
- Fine-tuning is settable via fields
- Uses DOM onclick event
- Documentation
<Need graphic & link to demo>
SphericalVideo
- Automatically constructs sphere and texture mapping
- Plays indicated video on inside of sphere
- Should only use EXAMINE Navigation mode
- Video is specially constructed to work in a spherical projection
- Basis for 360 Video (aka VR Video)
- Documentation
StereoView
Creates a stereographic view of the selected geometry

- Display is handled through shaders (WebGL)
- Each "eye" view is rendered onto a plane that is displayed
- Documentation
Adding Nodes to X3DOM
- Animation
- Macro
- StereoView
- SpatialSensor
Also reference work-in-progress documenting how to write X3DOM code
Discussion
- Node Names & Signatures
- Missing Node Features
- Missing HTML5/DOM/JavaScript/CSS Features
Resources
- X3DOM - http://x3dom.org/
- X3DOM V4
- GitHub:
- Documentation:
- X3D V4 Proposal: http://tools.realism.com/specification/x3d-v40
- X3DOM Writing Nodes Documentation
- Device Orientation
- WebVR specification: https://w3c.github.io/webvr/
- A-Frame documentation: https://aframe.io/docs/0.2.0/guide/
Credits
- Sienna Cathedral Visuals -
- Sienna Cathedral Audio (XXX) -
- Ocean Drilling Rig -
- Happy Budha -
- Spherical Geometry & Texture Coordinates - Aaron Daly
- Stereographic Code Model - Frauhofer
- Walking mode discussions - Aaron Daly & Mike Aratow