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).

Extending X3DOM to Mobile

Submitted by Leonard Daly on Tue, 07/19/2016 - 11:16
Event Name: 
Web3D2016, SIGGRAPH 2016
Event Date(s): 
23-28 July 2016

X3DOM is a JavaScript library that brings declarative 3D to HTML pages. The 3D content is fully integrated with the DOM and accessible via all standard DOM libraries (e.g., jQuery). This 2-part presentation covers the extensions to X3DOM necessary for X3DOM running in a browser to support mobile devices and provide VR content. The first part covers existing X3DOM capabilities and how W3C handles device orientation. The second part covers the new nodes necessary to support mobile devices and VR/AR support.

Use License: 
Creative Commons Sharealike (CC BY SA)
Active: 
Yes

Brower-Based Mobile 3D VR

 

 

 

 

 

 

 

 

Leonard Daly
President, Daly Realism

siggraph [AT] realism.com
http://realism.com/presentations/188

Licensing Notice

This presentation is licensed as Creative Commons Attribution, Share-Alike [CC BY-SA 4.0]

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.

About Me

Overview

  • Part 1
    • X3DOM Overview
    • Device Orientation
  • Part 2
    • Walkabout
    • LookSensor
    • SphericalVideo
    • StereoView
    • Adding Nodes to X3DOM
    • Discussion

 

 

 

“Any sufficiently advanced technology is indistinguishable from magic”

Arthur C. Clarke, 1975

 

 

 

“The future is already here - it’s just not very evenly distributed”

William GIbson, 2003

Usage

  • X3D Developers: 500-1000

 

Usage
  • X3D Developers: 500-1000
  • VR/Web3D Developers: 15,000-25,000

">

Usage
  • X3D Developers: 500-1000
  • VR/Web3D Developers: 15,000-25,000
  • JavaScript: 100,000-1,000,000
    • 67,000 developers on StackOverflow

">

Usage

Usage

Usage

Usage

X3DOM Overview

  • http://x3dom.org/
  • JavaScript Library that implements the X3D Standard
    • Relatively minor changes to work in HTML5
    • Not all nodes implemented
    • Additional nodes added
  • Compatible with jQuery and other frameworks
  • Requires one JavaScipt and one CSS external files
  • Supports streaming progressive geometry with textures
  • DOM & HTML Integration
  • Supports animation, interaction

 

 

 

Using X3DOM

<!DOCTYPE>
<html>
<head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <title>X3DOM Simple Example</title>
    <script type='text/javascript' src='http://www.x3dom.org/download/x3dom.js'> </script>
    <link rel='stylesheet' type='text/css' href='http://www.x3dom.org/download/x3dom.css'/>
    <script type="text/javascript" src="http://code.jquery.com/jquery-2.1.0.min.js" ></script>
</head>

<body>
<h1>X3DOM Simple Example</h1>
<X3D  id="x3dom_simple" showStat="false" showLog="false" x="0px" y="0px" width="500px" height="500px">
    <Scene>
        <Inline url='http://tools.realism.com/Projects/Museum/model/Test-Static/basic-shapes.x3d'></Inline>
    </Scene>
</X3D>
</body>
</html>

 

X3DOM Examples

Streaming Progressive Geometry

Happy Buddha with almost 1,000,000 triangles

  • "Happy Buddha"
  • Stanford Buddha
  • Compression and streaming by Fraunhofer
  • Almost 1,000,000 triangles at 50+ fps

 

X3DOM Examples

Animation & Interaction

Ocean drilling Rig with interactive Sun position

  • 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

Interior of Siena Cathedral

 

Credits

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

Standard Orientation

 

  • Three angles are defined - alpha, beta, gamma
  • Represent rotation from standard orientation
  • Units are degrees
  • Standard (Published, Latest)

 

 

 

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

Alpha rotation about Z Beta rotation about XGamma rotation about Y

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.

New Nodes

Presentation continues