VR Basics

novice to ninja

VR / WebVr

Concepts

Stereo camera

Head tracking 

spatial sound

UI/UX

the Real family (vr, ar, mr, cr, tr)

A-frame

Some Concepts

Head tracking

Measuring
Position and orientation, velocity and acceleration

Field of view

What the user view

The field of view (FOV) is the area that each of the user's eyes can reasonably be expected to see.

Stereoscopic vision

Recreating The Human Vision

is the normal vision humans, the perception of two slightly differing images (one from each eye) as a single image. This results in depth perception, helping us to see the world in glorious 3D.

Spatial audio

What The User Listen

- directional sound

- ambient sound

- reflection / postition

- physics on sounds

UI/UX

(Just basic rules)

Eye strain

• Avoid focusing on different depths
• Use darker backgrounds, a bright screen will make the eyes more tired.
• Avoid rapid brightness changes.
• Avoid presenting the user with large amounts of text to read. 
• Be careful with the distance between objects and the camera, 0.75m as a minimum distance of focus.
• Use a pointer if the user needs to interact with an object in the scene

Motion sickness

• Always maintain head tracking
• Use constant velocity; avoid acceleration or decceleration camera movements (use linear acceleration, and avoid easing if you can.)
• Keep the framerate up (less than 30fps is uncomfortable.)
• Avoid sharp and/or unexpected camera rotations.
• Add fixed points of reference for fixed objects (otherwise the user will believe they are on the move.)
• Avoid brightness changes

Latency

Latency is the time between the physical head movement and the visual display reaching the user's eyes from the screen of an HMD being updated. This is one of the most critical factors in providing a realistic experience. Humans can detect very small delays — we need to keep the latency below 20 milliseconds if they are to be imperceptible (for example a 60Hz monitor has a 16 ms response.)

Framerate ( FPS )

Based on the Wikipedia definition, framerate is the frequency at which an imaging device produces unique consecutive images, called frames. A rate of 60fps is an acceptable rate for a smooth user experience, but depending on the performance of the machine the app is running on, or the complexity of the content you want to show, it can drastically lower. Less than 30fps is generally considered jittery, and annoying to the user.

The "real" family

Virtual Reality (VR)

Faking the reality

virtual reality completely replaces reality with a virtual world. Computing power and optics simulate a visual and auditory experience that seeks to fool the user into believing the virtual world is a real one.

CardBoard, Oculus, HTCVive

Augmented Reality (AR)

a better reality

AR enhances reality by layering information or virtual aspects over a direct view of actual reality

Google Glass,

Mixed Reality (MR)

3D object on the real world

MR combines digitally-rendered, interactive objects with the real environment. But unlike AR, which involves layering objects and information on top of the existing world, MR incorporates believable, virtual objects with reality.

WebVR is a JavaScript API for creating immersive 3D, Virtual Reality experiences in your browser.

A-frame

HTML to 3D/vr Scenes

A-Frame lets you build scenes with just HTML while having unlimited access to JavaScript, three.js, and all existing Web APIs. A-Frame uses an entity-component-system pattern that promotes composition and extensibility

A-frame

3D API

VR API

VRDisplay

VRDisplayCapabilities

VRPose

etc..

WebVr App

DeviceOrientationEvent

DeviceOrientationEvent

A-frame

Entity-Component-System

Codepen example

Panorama / skybox

equirectangular image

<a-image>

<a-sky 
    src="http://4.bp.blogspot.com/_4ZFfiaaptaQ/TNHjKAwjK6I/AAAAAAAAE30/IG2SO24XrDU/s1600/new.png" 
    rotation="0 -130 0"></a-sky>

Video 360

<a-video>

<a-scene>
  <a-assets>
    <video id="video" src="https://ucarecdn.com/bcece0a8-86ce-460e-856b-40dac4875f15/"
           autoplay loop crossorigin></video>
  </a-assets>

  <a-videosphere src="#video" rotation="0 180 0"></a-videosphere>
</a-scene>

gaze cursor

<a-cursor>

<a-scene>
  <a-camera>
    <a-cursor></a-cursor>
  </a-camera>
  <a-box></a-box>
</a-scene>

gaze cursor click and hover

<a-cursor>

<a-entity camera>
  <a-entity cursor="fuse: true; fuseTimeout: 500"
            position="0 0 -1"
            geometry="primitive: ring; radiusInner: 0.02; radiusOuter: 0.03"
            material="color: black; shader: flat">
  </a-entity>
</a-entity>
<a-entity id="box" cursor-listener geometry="primitive: box" material="color: blue"></a-entity>

AFRAME.registerComponent('cursor-listener', {
  init: function () {
    var COLORS = ['red', 'green', 'blue'];
    this.el.addEventListener('click', function (evt) {
      var randomIndex = Math.floor(Math.random() * COLORS.length);
      this.setAttribute('material', 'color', COLORS[randomIndex]);
      console.log('I was clicked at: ', evt.detail.intersection.point);
    });
  }

Loading Models

<a-scene>
  <a-assets>
    <a-asset-item id="tree" 
       src="https://raw.githubusercontent.com/aframevr/aframe/master/examples/showcase/shopping/man/man.dae">
    </a-asset-item>
  </a-assets>
  <a-entity collada-model="#tree"></a-entity>
</a-scene>

• collada-model
• ​blend-model
• gltf-model
• obj-model

A-frame inspector

<ctrl> + <alt> + i

position tip

Models with boxels

https://ephtracy.github.io/