Skip to content

Latest commit

 

History

History
580 lines (434 loc) · 12.4 KB

content.md

File metadata and controls

580 lines (434 loc) · 12.4 KB
Raw

A-Frame

Building VR on the Web

WebVR India

Virtual Reality

Hardware

Friction of VR Ecosystems

Gatekeepers
Installs
Closed

WebVR

An open virtual reality platform with the advantages of the Web

Open
Connected
Instant

Standard browser APIs that enable WebGL rendering to headsets and access to VR sensors. https://w3c.github.io/webvr/

Browser Support

Firefox Nightly
Chromium (Experimental)
Samsung Internet
Mobile Polyfill
https://mozvr.com/
http://vr.chromeexperiments.com/

Import WebVR polyfill

Set up camera

Set up lights

Initialize scene

Declare and pass canvas

Listen to window resize

Install VREffect

Instantiate renderer

Create render loop

Preload assets

Figure out responsiveness

Deal with metatags and mobile

<a-scene></a-scene>

A-Frame

A web framework for building virtual reality experiences with HTML

<a-scene></a-scene>
// Box in three.js
var geometry = new THREE.BoxGeometry(1, 2, 3);
var material = new THREE.MeshStandardMaterial({color: 'red'});
var box = new THREE.Mesh(geometry, material);
box.position.set(10, 0, 10);
scene.add(box);
<a-box color="red" position="10 0 10"></a-box>

Hello World

<a-scene>
  <a-box color="#4CC3D9" position="-1 0.5 -3" rotation="0 45 0"></a-box>
  <a-cylinder color="#FFC65D" position="1 0.75 -3" radius="0.5" height="1.5"></a-cylinder>
  <a-sphere color="#EF2D5E" position="0 1.25 -5" radius="1.25"></a-sphere>
  <a-plane color="#7BC8A4" rotation="-90 0 0" position="0 0 -4" width="4" height="4"></a-plane>
  <a-sky color="#ECECEC"></a-sky>
</a-scene>

Hello World

Languages & Tools We Know

  • HTML
  • JavaScript and DOM APIs
  • Integrates with existing frameworks and libraries
var scene = document.querySelector('a-scene');
var sphere = document.createElement('a-sphere');
sphere.setAttribute('radius', 2);
scene.appendChild(sphere);

Languages & Tools We Know

d3.js
vue.js
React & Redux

Languages & Tools We Know

MagicaVoxel
Blender
Maya

Entity-Component-System

  • Composable, reusable, sharable bits of code
  • All the power of JavaScript, three.js, and WebGL
  • Developers empower other developers

Composing an Entity

<a-entity></a-entity>

Composing an Entity

<a-entity geometry="primitive: plane; height: 10000; width: 10000">

Composing an Entity

<a-entity geometry="primitive: plane; height: 10000; width: 10000"
          rotation="-90 0 0">

Composing an Entity

<a-entity geometry="primitive: plane; height: 10000; width: 10000"
          rotation="-90 0 0"
          material="shader: standard; opacity: 0.8">

Composing an Entity

<a-entity geometry="primitive: plane; height: 10000; width: 10000"
          rotation="-90 0 0"
          material="shader: standard; normalTextureRepeat: 50 50; opacity: 0.8"
          ocean-waves="intensity: 0.7">

Baking an Entity

AFRAME.registerPrimitive('a-ocean', {
  defaultComponents: {
    'ocean-waves': {intensity: 0.7}
  },

  mappings: {
    'reflection': 'material.sphericalEnvMap',
    'wave-intensity': 'ocean-waves.intensity'
  }
});
<a-ocean reflection="url(sky.png)" wave-intensity="2"></a-ocean>

Structure of a Component

AFRAME.registerComponent('position', {
  schema: {type: 'vec3'},

  update: function () {
    var el = this.el;  // Reference to the entity element.
    var data = this.data;  // Component data parsed from HTML.
    var object3D = el.object3D;  // three.js Object.

    object3D.position.set(data.x, data.y, data.z);
  }
});

Writing a Component

AFRAME.registerComponent('crazy-position', {
  schema: {
    min: {type: 'vec3'},
    max: {type: 'vec3'}
  },

  tick: function () {
    var data = this.data;
    var randomPosition = __getRandomPosition(min, max);
    this.el.object3D.position.copy(randomPosition);
  }
});
<a-sphere crazy-position="min: -1 -1 -1; max: 1 1 1"></a-sphere>

Community

  • Github: 60+ contributors, 2900+ stargazers
  • Slack: 1400+ members
  • Content: Hundreds of projects featured on awesome-aframe repository and A Week of A-Frame
  • StackOverflow: Community is very active on StackOverflow also

Scenes by Organizations

Augmented Reality

Thanks !



Links