diff --git a/examples/index.html b/examples/index.html index f72d0971562..e3dac6c8590 100644 --- a/examples/index.html +++ b/examples/index.html @@ -228,6 +228,7 @@

Performance

  • Cubes
  • Entity Count
  • In VR
    • +
  • Multiview Extension
    • diff --git a/examples/performance/multiview-extension/button.js b/examples/performance/multiview-extension/button.js new file mode 100644 index 00000000000..a4a03c354cb --- /dev/null +++ b/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; +} diff --git a/examples/performance/multiview-extension/cubes-generator.js b/examples/performance/multiview-extension/cubes-generator.js new file mode 100644 index 00000000000..59a86d0ae8e --- /dev/null +++ b/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); + } +}); diff --git a/examples/performance/multiview-extension/fps-counter-component.js b/examples/performance/multiview-extension/fps-counter-component.js new file mode 100644 index 00000000000..f71766b8822 --- /dev/null +++ b/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; + } + } +}); diff --git a/examples/performance/multiview-extension/index.html b/examples/performance/multiview-extension/index.html new file mode 100644 index 00000000000..e29de58bd16 --- /dev/null +++ b/examples/performance/multiview-extension/index.html @@ -0,0 +1,42 @@ + + + + Multiview Extension Performance Test - A-Frame + + + + + + + + + + + + + + + + + diff --git a/examples/showcase/model-viewer/index.html b/examples/showcase/model-viewer/index.html index 6510c9953b0..4a06d974290 100644 --- a/examples/showcase/model-viewer/index.html +++ b/examples/showcase/model-viewer/index.html @@ -22,7 +22,7 @@