Source: vr/VRApp.js

  1. /**
  2. * @class VRApp
  3. * @memberof SQR
  4. *
  5. * @description A helper class to create universal VR Apps (i.e. that work on both mobile and desktop VR-enabled browsers)
  6. */
  7. SQR.VRApp = function(appFunc, options) {
  8. options = options || {};
  9. options.isTouch = ('ontouchstart' in document);
  10. options.vrInput = null;
  11. options.vrData = {};
  12. var vrBtn, novrBtn, startInstr;
  13. var fsopt = {};
  14. var INSTR_COPY_DESKTOP = '<span>Put on your headset and press space when ready.</span>';
  15. var INSTR_COPY_MOBILE = '<span>Put on your headset and tap screen when ready.</span>';
  16. var BTN_COPY_VR = 'CARDBOARD';
  17. var BTN_COPY_NO_VR = 'NO CARDBOARD';
  18. var PORT_WARN_COPY = 'Please rotate your screen to landscape mode';
  19. var fullscreen = function(c) {
  20. if (c.requestFullscreen) {
  21. c.requestFullscreen(fsopt);
  22. } else if (c.msRequestFullscreen) {
  23. c.msRequestFullscreen(fsopt);
  24. } else if (c.mozRequestFullScreen) {
  25. c.mozRequestFullScreen(fsopt);
  26. } else if (c.webkitRequestFullscreen) {
  27. c.webkitRequestFullscreen(fsopt);
  28. }
  29. }
  30. var tryVR = function(onDone) {
  31. var vrHMD;
  32. var onVRError = function(e) {
  33. console.log('VR: Error in navigator.getVRDevices()');
  34. console.log(e);
  35. onDone();
  36. }
  37. var onVRDevices = function(devices) {
  38. SQR.flipMatrix = false;
  39. for(var i = 0; i < devices.length; i++) {
  40. var d = devices[i];
  41. if(!options.vrInput && d instanceof PositionSensorVRDevice) options.vrInput = d;
  42. if(!vrHMD && d instanceof HMDVRDevice) vrHMD = d;
  43. fsopt.vrDisplay = vrHMD;
  44. }
  45. // console.log(options.vrInput);
  46. // console.log(vrHMD.getEyeParameters("left"));
  47. options.vrData.leftEyeX = vrHMD.getEyeParameters("left").eyeTranslation.x;
  48. options.vrData.rightEyeX = vrHMD.getEyeParameters("right").eyeTranslation.x;
  49. options.vrData.leftEyeFOV = vrHMD.getEyeParameters("left").recommendedFieldOfView;
  50. options.vrData.rightEyeFOV = vrHMD.getEyeParameters("right").recommendedFieldOfView;
  51. onDone();
  52. }
  53. if(!navigator.mozGetVRDevices && !navigator.getVRDevices) {
  54. console.log("VR: Your browser is not VR Ready");
  55. onDone();
  56. return;
  57. }
  58. if(navigator.getVRDevices) {
  59. navigator.getVRDevices().then(onVRDevices, onVRError);
  60. } else {
  61. navigator.mozGetVRDevices(onVRDevices);
  62. }
  63. }
  64. var onKeyDown = function(e) {
  65. if(e.keyCode == 32) {
  66. document.removeEventListener('keydown', onKeyDown);
  67. startApp();
  68. }
  69. }
  70. var startApp = function(e) {
  71. if(vrBtn) document.body.removeChild(vrBtn);
  72. if(novrBtn) document.body.removeChild(novrBtn);
  73. if(startInstr) document.body.removeChild(startInstr);
  74. if(options.isTouch || (options.vrInput && !options.debug)) fullscreen(document.body);
  75. if(appFunc) appFunc(options);
  76. }
  77. var prepare = function() {
  78. if(options.vrInput && !options.isTouch) {
  79. startInstr = document.createElement('div');
  80. startInstr.innerHTML = INSTR_COPY_DESKTOP + INSTR_COPY_DESKTOP;
  81. startInstr.setAttribute('class', 'instr');
  82. document.body.appendChild(startInstr);
  83. document.addEventListener('keydown', onKeyDown);
  84. } else if(options.isTouch) {
  85. vrBtn = document.createElement('div');
  86. vrBtn.setAttribute('class', 'start vr');
  87. vrBtn.innerHTML = BTN_COPY_VR;
  88. document.body.appendChild(vrBtn);
  89. novrBtn = document.createElement('div');
  90. novrBtn.setAttribute('class', 'start novr');
  91. novrBtn.innerHTML = BTN_COPY_NO_VR;
  92. document.body.appendChild(novrBtn);
  93. portWarn = document.createElement('div');
  94. portWarn.setAttribute('class', 'portrait-warning');
  95. portWarn.innerHTML = PORT_WARN_COPY;
  96. document.body.appendChild(portWarn);
  97. vrBtn.addEventListener('click', function() {
  98. options.forceStereo = true;
  99. startApp();
  100. });
  101. novrBtn.addEventListener('click', function() {
  102. options.forceMono = true;
  103. startApp();
  104. });
  105. } else {
  106. startApp();
  107. }
  108. }
  109. tryVR(prepare);
  110. };