Add example for multiview extension

examples/index.html

@@ -228,6 +228,7 @@ <h2>Performance</h2>
       <li><a href="performance/cubes/">Cubes</a></li>
       <li><a href="performance/entity-count/">Entity Count</a></li>
       <li><a href="performance/in-vr/">In VR</a></li>
+      <li><a href="performance/multiview-extension/?multiview=on">Multiview Extension</a></li>
     </ul>
   </body>
 </html>

examples/performance/multiview-extension/button.js

@@ -0,0 +1,70 @@
+/* global AFRAME */
+AFRAME.registerComponent('button', {
+  init: function () {
+    var buttonContainerEl = this.buttonContainerEl = document.createElement('div');
+    var buttonEl = this.buttonEl = document.createElement('button');
+    var style = document.createElement('style');
+    var urlParams = getUrlParams();
+    var css =
+      '.a-change-button-container {box-sizing: border-box; display: inline-block; height: 34px; padding: 0;;' +
+      'bottom: 20px; left: 20px; position: absolute; color: white;' +
+      'font-size: 12px; line-height: 12px; border: none;' +
+      'border-radius: 5px}' +
+      '.a-change-button {cursor: pointer; padding: 0px 10px 0 10px; font-weight: bold; color: #666; border: 3px solid #666; box-sizing: border-box; vertical-align: middle; max-width: 200px; border-radius: 10px; height: 34px; background-color: white; margin: 0;}' +
+      '.a-change-button:hover {border-color: #ef2d5e; color: #ef2d5e}';
+
+    if (style.styleSheet) {
+      style.styleSheet.cssText = css;
+    } else {
+      style.appendChild(document.createTextNode(css));
+    }
+    document.getElementsByTagName('head')[0].appendChild(style);
+
+    buttonContainerEl.classList.add('a-change-button-container');
+    buttonEl.classList.add('a-change-button');
+    buttonEl.addEventListener('click', this.onClick.bind(this));
+
+    buttonContainerEl.appendChild(buttonEl);
+
+    this.el.sceneEl.appendChild(buttonContainerEl);
+
+    if (urlParams.multiview && urlParams.multiview === 'on') {
+      buttonEl.innerHTML = 'DISABLE MULTIVIEW';
+    } else {
+      buttonEl.innerHTML = 'ENABLE MULTIVIEW';
+    }
+  },
+
+  onClick: function () {
+    var params;
+    var currentParams = getUrlParams();
+    if (currentParams.multiview && currentParams.multiview === 'on') {
+      params = '?multiview=off';
+    } else {
+      params = '?multiview=on';
+    }
+    window.location = window.location.pathname + params;
+  }
+});
+
+var currentParams = getUrlParams();
+var sceneEl = document.querySelector('a-scene');
+if (currentParams.multiview && currentParams.multiview === 'on') {
+  sceneEl.setAttribute('renderer', 'multiviewStereo: true');
+}
+
+function getUrlParams () {
+  var match;
+  var pl = /\+/g;  // Regex for replacing addition symbol with a space
+  var search = /([^&=]+)=?([^&]*)/g;
+  var decode = function (s) { return decodeURIComponent(s.replace(pl, ' ')); };
+  var query = window.location.search.substring(1);
+  var urlParams = {};
+
+  match = search.exec(query);
+  while (match) {
+    urlParams[decode(match[1])] = decode(match[2]);
+    match = search.exec(query);
+  }
+  return urlParams;
+}

examples/performance/multiview-extension/cubes-generator.js

@@ -0,0 +1,44 @@
+/* global AFRAME */
+AFRAME.registerComponent('cubes-generator', {
+  schema: {objectsNumber: {default: 5000}},
+  init: function () {
+    var objectsNumber = this.data.objectsNumber;
+    this.cubeDistributionWidth = 100;
+    for (var i = 0; i < objectsNumber; i++) {
+      var cubeEl = document.createElement('a-entity');
+      cubeEl.setAttribute('position', this.getRandomPosition());
+      cubeEl.setAttribute('geometry', {primitive: 'box'});
+      cubeEl.setAttribute('material', {color: this.getRandomColor(), shader: 'flat'});
+      cubeEl.setAttribute('rotate-obj3d', '');
+      this.el.sceneEl.appendChild(cubeEl);
+    }
+  },
+
+  getRandomPosition: function () {
+    var cubeDistributionWidth = this.cubeDistributionWidth;
+    return {
+      x: Math.random() * cubeDistributionWidth - cubeDistributionWidth / 2,
+      y: Math.random() * cubeDistributionWidth - cubeDistributionWidth / 2,
+      z: Math.random() * cubeDistributionWidth - cubeDistributionWidth / 2
+    };
+  },
+
+  getRandomColor: function () {
+    return '#' + ('000000' + Math.random().toString(16).slice(2, 8).toUpperCase()).slice(-6);
+  }
+});
+
+function randomIncRad (multiplier) {
+  return multiplier * Math.random();
+}
+
+// COMPONENTS
+// ------------------
+AFRAME.registerComponent('rotate-obj3d', {
+  tick: function () {
+    var el = this.el;
+    el.object3D.rotation.x += randomIncRad(0.01);
+    el.object3D.rotation.y += randomIncRad(0.02);
+    el.object3D.rotation.z += randomIncRad(0.03);
+  }
+});

examples/performance/multiview-extension/fps-counter-component.js

@@ -0,0 +1,42 @@
+/* global AFRAME */
+AFRAME.registerComponent('fps-counter', {
+  schema: {
+    for90fps: {default: true}
+  },
+
+  init: function () {
+    this.el.setAttribute('text', {align: 'center', side: 'double'});
+    this.frameCount = 0;
+    this.frameDuration = 0;
+  },
+
+  tick: function (t, dt) {
+    var color;
+    var fps;
+
+    color = 'green';
+    if (this.data.for90fps) {
+      if (fps < 85) { color = 'yellow'; }
+      if (fps < 80) { color = 'orange'; }
+      if (fps < 75) { color = 'red'; }
+    } else {
+      if (fps < 55) { color = 'yellow'; }
+      if (fps < 50) { color = 'orange'; }
+      if (fps < 45) { color = 'red'; }
+    }
+
+    if (color) {
+      this.el.setAttribute('text', 'color', color);
+    }
+
+    this.frameCount++;
+    this.frameDuration += dt;
+
+    if (this.frameCount === 10) {
+      fps = 1000 / (this.frameDuration / this.frameCount);
+      this.el.setAttribute('text', 'value', fps.toFixed(0) + ' fps');
+      this.frameCount = 0;
+      this.frameDuration = 0;
+    }
+  }
+});

examples/performance/multiview-extension/index.html

@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Multiview Extension Performance Test - A-Frame</title>
+    <meta name="description" content="">
+    <script src="../../../dist/aframe-master.js"></script>
+    <script src="fps-counter-component.js"></script> 
+    <script src="cubes-generator.js"></script>
+  </head>
+  <style>
+    body {
+      color: #cccccc;
+      font-family: Monospace;
+      font-size: 13px;
+      text-align: center;
+      margin: 0px;
+      overflow: hidden;
+    }
+
+    #info {
+      background-color: #000;
+      position: absolute;
+      top: 0px;
+      width: 100%;
+      padding: 5px;
+      z-index: 9999;
+    }
+    #info a {
+      color: #fff;
+    }
+  </style>
+  <body>
+    <a-scene cubes-generator button>
+      <a-entity camera wasd-controls look-controls>
+        <a-entity position="0 0 -1.1" geometry="primitive: plane; width: 0.16; height: 0.1;" material="color: white; shader: flat"></a-entity>
+        <a-entity position="0 0 -1" fps-counter></a-entity>
+      </a-entity>
+    </a-scene>
+  </body>
+  <script src="button.js"></script>
+</html>
+

examples/showcase/model-viewer/index.html

@@ -22,7 +22,7 @@
     <!--
       Model source: https://sketchfab.com/3d-models/triceratops-d16aabe33dc24f8ab37e3df50c068265
       Model author: https://sketchfab.com/VapTor
-      Model license: Sketcfab Standard
+      Model license: Sketchfab Standard
     -->
     <a-asset-item id="triceratops"
       src="https://cdn.aframe.io/examples/ar/models/triceratops/scene.gltf"