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


You can step through the slides with and

Hit the ESC for an overview of the slideset (be patient wait for assets to load)


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!







  • 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

Oculus Rift brings about VR2.0

Google Cardboard crazy smart/cheap

google cardboard

DODO Case VR (for any phone)


Late Breaking News: MS HoloLens

MS Hololens

The Magic of WebGL

Three.js editor

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

What is X3DOM

x3dom is not rocket science

Simply put: it's X3D in your web page

So what is X3D?

An ISO Standard ... ISO/IEC 19775

A REAL STANDARD...not some pseudo standard wannabe!!

X3DOM is a 3D Declarative Markup Lanaguage (for X3D)

it puts X3D in your browser

A Simple Example

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

JSBIN demos/examples

NOT a special graphics editor!!


Declarative Segmentation

declarative segmentation

Show me the segments

Let's Generate that Geometry


VR is back baby!

This is not how VR will suck you in.

from Tron (1982)

Major Efforts

  • Facebook - Oculus
  • Microsoft - HoloLens
  • Google - Magic Leap (in stealth)

The Oculus Effect

  • clearly the excitement generated by Oculus (via kickstarter but mostly the $2B purchase by Facebook) instigated this second coming of VR
  • Browser vendors also get excited via the integration of WebGL and VR headsets

The Secrets of Magic Leap are being Revealed

48 Crazy Ideas Coming From The $2 Billion Stealth Startup Magic Leap

VR Content

Content Types

  • 360 degree video
  • actual movies - Oculus Story Studio - Sundance Film Festival
  • games (of course)

Content and more Content

Molly Wood@NYTimes

Matterport virtual walkthroughs - realestate and more

Full Immersion (Birdly)

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





more input solutions

clearer "language" visual conventions/semantics

exciting times! (again)

Useful Links