Rapid VR Simulations Prototyping with WebVR


What is Immersive Web technology?


Web3D was initially the idea to fully display and navigate websites using 3D. By extension, the term now refers to all interactive 3D content which are embedded into web pages and that we can see through a web browser.


The current ISO standard for web3D is Extensible 3D (X3D), the successor of VRML (Virtual Reality Markup Language).

Web3D Frameworks

  • X3DOM
  • Three.js
  • BabylonJS
  • Augmented Reality

    - Brings places/things to you -

    Augmented Reality (AR) is an interactive experience of a real-world environment whose elements are "augmented" by computer-generated perceptual information, sometimes across multiple sensory modalities, including visual, auditory, haptic, somatosensory, and olfactory.

    Image / Feature Recognition

    Planar Detection


    Geolocation based AR transfers real coordinates system to camera coordinates system. In AR Location-based, the real coordinate is Geographic coordinate system. The GPS coordinate (Latitude, Longitude, Altitude) convert to Navigation coordinate (East, North, Up), then transfer Navigation coordinate to Camera coordinate and display it on camera view.

    Virtual Reality

    - Takes you to places/things -

    Virtual Reality (VR) is the computer-generated simulation of a three-dimensional image or environment that can be interacted with in a seemingly real or physical way by a person using special electronic equipment, such as a helmet with a screen inside or gloves fitted with sensors.

    WebVR 1.1 spec

    Currently empowered by a graphics technology called WebGL, web based virtual reality, or WebVR, is an API to access input and output capabilities of VR hardware. In the absence of a WebVR implementation, polyfill kicks in and supports mobile VR headsets (Cardboard, Homido, etc.)

    WebXR spec

    Officialy called the WebXR Device API, this specification describes support for accessing virtual reality (VR) and augmented reality (AR) devices, including sensors and head-mounted displays, on the Web.

    What's the X in XR mean?
    There's a lot of "_____ Reality" buzzwords flying around today. Virtual Reality, Augmented Reality, Mixed Reality... it can be hard to keep track, even though there's a lot of similarities between them. This API aims to provide foundational elements with which to do all of the above. And since we don't want to be limited to just one facet of VR or AR (or anything in between)"X" is not a part of an acronym but as an algebraic variable of sorts to indicate "Your Reality Here". We've also heard it called "Extended Reality" and "Cross Reality", which seem fine too, but really the X is whatever you want it to be!

    WebVR Frameworks

    Here are a couple frameworks for creating WebVR content.

  • A-Frame
  • React VR
  • More frameworks listed here
  • questions?


    A-Frame is an entity-component-system game engine on top of three.js. As it is a JavaScript framework, coding is to be expected for more complex applications. Unlike 3D file formats, A-Frame provides power and interactivity via full access to JavaScript, three.js, and Web APIs.

    What we are building

    reference the A-Frame framework

    start your scene

    define your assets

    add the scene's camera

    add text

    add image

    add geometry

    animate geometry

    add a 3D model


    way to go!


    - Twitter: @metaverseone
    - damon.h@samsung.com