WebVR or What's That 3D Environment Doing in my Web Browser

by Sandy Ressler

National Institute of Standards and Technology

Computational and Simulation Sciences and eResearch, Annual Conference, Feb. 13, 2015

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/aus2015keynote.html

or

http://www.sandyressler.com/

w3d/aus2015keynote.html

Agenda

• Web Browser as Universal Publishing Medium
• WebGL for Universal 3D Content
• Oculus Rift brings about VR2.0
• Declarative Graphics
• X3DOM
• VR is back!
• WebVR and 360 degree Video
• Future

Excuse me but there are some 3D objects in my web pages!!!

Web Browser as Universal Publishing Medium

• If you want the widest possible audience..put it on the Web
• If you want exposure via mobile devices..put it on the Web, and make sure the site is responsive

WebGL for Universal 3D Content

• WebGL is GL with web wrappers
• WebGL supported by most browsers and most mobile devices
• WebGL led by Khronos Group (standardization/conformance is good thing)
• ALL platforms..mobile,desktop,immersive

• 3 BILLION DEVICES!!

The Magic of WebGL

Declarative versus Imperative Graphics

• declarative tells WHAT to draw
• the Web page is a declarative structure
• HTML is a declarative language describing the structure of a web page
• actions taking place on the page via javascript are imperative
• actions via javaScript frameworks act on 'objects' such as $('sphere').changeColor(r,g,b);
• imperative tells HOW to draw

Declarative 3D in Web Pages

• DOM - Document Object Model; contains graphic elements
• Manipulating the DOM means you are manipulating graphical elements
• Selecting elements of the DOM means you are selecting those elements of the page you wish to manipulate.
• Of course having multi-Gb mesh type data directly in the DOM is an issue..being dealt with by a variety of compression techniques
• CAD example

A Simple Example

<X3D xmlns="http://www.x3dom.org/x3dom">
  <scene>
    <viewpoint position='0 0 10' ></viewpoint>
    <transform id="exTrans">
      <shape>
        <appearance>
            <material id="mat" diffuseColor='0.603 0.894 0.909' ></material>
        </appearance>
        <box id='box' ></box>
     </shape>
     </transform>
  </scene>
</X3D>
           
           

JSBIN demos/examples

NOT a special graphics editor!!

Declarative Segmentation

WebVR..what is it???

Scientific American article: Virtual Reality Comes to the Web-Maybe for Real This Time

Firefox is getting VR features that work with Oculus Rift

Browser vendors natively supporting the display and input (head position and orientation)

Oculus (and VR) Problems

• it's not all sunshine and happy drugs ;-)
• strap a brick to your face
• hands disappear, making interaction difficult
• partial solution: Leap Motion
• eyes focus on images that are physically on close screen..."simulator sickness"

X3DOM and WebVR

WebVR Use Case: 360 degree video

• hardware and software integration
• YouTube will be offering a 360 degree video channel
• http://www.engadget.com/2015/01/05/youtube-360-degree-video-support/

360 Video on Web page

interaction via mouse versus head position

Mozilla WebVR

Future

Markup

ubiquity

more input solutions

clearer "language" visual conventions/semantics

exciting times! (again)

Useful Links

• Read more on my site (math.nist.gov/~SRessler)
• The X3DOM Project (x3dom.org)
• Follow me on Twitter (@sressler)
• Introduction and Overview of the WebVR APIs with Tony Parisi
• Parisi - Intro to WebVR
• Microsoft HoloLens

Microsoft HoloLens by Sketchfab on Sketchfab

Acknowledgements

• HTML/CSS slideshow software (reveal.js):Hakim El Hattab
• code highlighting - highlight.js by softwaremaniacs.org highlight.js.
• slide/web page embedding - lightview.js, Nick Stakenburg, lightview.js
• Icons from TheNounProject: http://thenounproject.com
• JSBIN JavaScript development toolRemy Sharp

THE END