|
2 | 2 | 'use strict';
|
3 | 3 |
|
4 | 4 | var defaultHeight = 1.5;
|
5 |
| - var entervrButton = document.querySelector('#entervr'); |
6 |
| - var container = document.querySelector('#game'); |
7 |
| - var status = document.querySelector('#status'); |
8 |
| - var icons = document.querySelector('#icons'); |
9 |
| - var controller = document.querySelector('#motion-controller'); |
| 5 | + |
| 6 | + var enterVRButton = document.getElementById('entervr'); |
| 7 | + var gameContainer = document.getElementById('game'); |
| 8 | + var vrHardwareStatus = document.getElementById('status'); |
| 9 | + var statusIcons = document.getElementById('icons'); |
| 10 | + var controllerIconTemplate = document.getElementById('motion-controller'); |
| 11 | + var noVRInstructions = document.getElementById('novr'); |
| 12 | + |
10 | 13 | var windowRaf = window.requestAnimationFrame;
|
11 | 14 | var vrDisplay = null;
|
12 | 15 | var canvas = null;
|
|
46 | 49 | }
|
47 | 50 |
|
48 | 51 | function onUnity (msg) {
|
49 |
| - // Measure Round-Trip Time from Unity. |
50 |
| - if (msg.detail === 'Timer') { |
51 |
| - var delta = window.performance.now() - testTimeStart; |
52 |
| - console.log('return time (ms): ',delta); |
53 |
| - testTimeStart = null; |
54 |
| - return; |
55 |
| - } |
| 52 | + // This way of passing messages is deprecated. Use rich objects instead. |
| 53 | + if (typeof msg.detail === 'string') { |
| 54 | + // Measure Round-Trip Time from Unity. |
| 55 | + if (msg.detail === 'Timer') { |
| 56 | + var delta = window.performance.now() - testTimeStart; |
| 57 | + console.log('return time (ms): ',delta); |
| 58 | + testTimeStart = null; |
| 59 | + return; |
| 60 | + } |
56 | 61 |
|
57 |
| - // Wait for Unity to render the frame; then submit the frame to the VR display. |
58 |
| - if (msg.detail === 'PostRender') { |
59 |
| - submitNextFrame = vrDisplay && vrDisplay.isPresenting; |
60 |
| - if (submitNextFrame) { |
61 |
| - vrDisplay.requestAnimationFrame(onAnimate); |
| 62 | + // Wait for Unity to render the frame; then submit the frame to the VR display. |
| 63 | + if (msg.detail === 'PostRender') { |
| 64 | + submitNextFrame = vrDisplay && vrDisplay.isPresenting; |
| 65 | + if (submitNextFrame) { |
| 66 | + vrDisplay.requestAnimationFrame(onAnimate); |
| 67 | + } |
| 68 | + } |
| 69 | + |
| 70 | + // Handle quick VR/normal toggling. |
| 71 | + if (msg.detail.indexOf('ConfigureToggleVRKeyName') === 0) { |
| 72 | + toggleVRKeyName = msg.detail.split(':')[1]; |
62 | 73 | }
|
63 | 74 | }
|
64 | 75 |
|
65 |
| - // Handle quick VR/normal toggling. |
66 |
| - if (msg.detail.indexOf('ConfigureToggleVRKeyName') === 0) { |
67 |
| - toggleVRKeyName = msg.detail.split(':')[1]; |
| 76 | + // Handle an UI command |
| 77 | + if (msg.detail.type === 'ShowPanel') { |
| 78 | + var panelId = document.getElementById(msg.detail.panelId); |
| 79 | + showInstruction(panelId); |
68 | 80 | }
|
69 | 81 | }
|
70 | 82 |
|
|
88 | 100 | return vrDisplay.requestPresent([{source: canvas}]).then(function () {
|
89 | 101 | // Start stereo rendering in Unity.
|
90 | 102 | console.log('Entered VR mode');
|
91 |
| - gameInstance.SendMessage('WebVRCameraSet', 'Begin'); |
| 103 | + gameInstance.SendMessage('WebVRCameraSet', 'OnStartVR'); |
92 | 104 | }).catch(function (err) {
|
93 | 105 | console.error('Unable to enter VR mode:', err);
|
94 | 106 | });
|
|
101 | 113 | }
|
102 | 114 | function done () {
|
103 | 115 | // End stereo rendering in Unity.
|
104 |
| - gameInstance.SendMessage('WebVRCameraSet', 'End'); |
| 116 | + gameInstance.SendMessage('WebVRCameraSet', 'OnEndVR'); |
105 | 117 | onResize();
|
106 | 118 | }
|
107 | 119 | return vrDisplay.exitPresent().then(function () {
|
|
223 | 235 | // scale game container so we get a proper sized mirror of VR content to desktop.
|
224 | 236 | var scaleX = window.innerWidth / renderWidth;
|
225 | 237 | var scaleY = window.innerHeight / renderHeight;
|
226 |
| - container.setAttribute('style', `transform: scale(${scaleX}, ${scaleY}); transform-origin: top left;`); |
| 238 | + gameContainer.setAttribute('style', `transform: scale(${scaleX}, ${scaleY}); transform-origin: top left;`); |
227 | 239 | } else {
|
228 | 240 | canvas.width = window.innerWidth;
|
229 | 241 | canvas.height = window.innerHeight;
|
230 |
| - container.style.transform = ''; |
| 242 | + gameContainer.style.transform = ''; |
231 | 243 | }
|
232 | 244 | }
|
233 | 245 |
|
|
242 | 254 | }
|
243 | 255 |
|
244 | 256 | function showInstruction (el) {
|
| 257 | + if (el.dataset.enabled) { return; } |
245 | 258 | var confirmButton = el.querySelector('button');
|
246 | 259 | el.dataset.enabled = true;
|
247 | 260 | confirmButton.addEventListener('click', onConfirm);
|
|
252 | 265 | }
|
253 | 266 |
|
254 | 267 | function updateStatus () {
|
255 |
| - if (parseInt(status.dataset.gamepads) !== vrGamepads.length) { |
| 268 | + if (parseInt(vrHardwareStatus.dataset.gamepads) !== vrGamepads.length) { |
256 | 269 | var controllerClassName = 'controller-icon';
|
257 |
| - var controlIcons = icons.getElementsByClassName(controllerClassName); |
| 270 | + var controlIcons = statusIcons.getElementsByClassName(controllerClassName); |
258 | 271 | while (controlIcons.length > 0) {
|
259 | 272 | controlIcons[0].parentNode.removeChild(controlIcons[0]);
|
260 | 273 | }
|
261 | 274 |
|
262 | 275 | vrGamepads.forEach(function (gamepad) {
|
263 |
| - var controllerIcon = document.importNode(controller.content, true); |
| 276 | + var controllerIcon = document.importNode(controllerIconTemplate.content, true); |
264 | 277 | controllerIcon.querySelector('img').className = controllerClassName;
|
265 |
| - icons.appendChild(controllerIcon); |
| 278 | + statusIcons.appendChild(controllerIcon); |
266 | 279 | });
|
267 |
| - status.dataset.gamepads = vrGamepads.length; |
| 280 | + vrHardwareStatus.dataset.gamepads = vrGamepads.length; |
268 | 281 | }
|
269 | 282 | }
|
270 | 283 |
|
|
287 | 300 | frameData = new VRFrameData();
|
288 | 301 |
|
289 | 302 | return navigator.getVRDisplays().then(function(displays) {
|
290 |
| - if (!displays.length) { |
291 |
| - return null; |
| 303 | + var canPresent = false; |
| 304 | + var hasPosition = false; |
| 305 | + var hasOrientation = false; |
| 306 | + var hasExternalDisplay = false; |
| 307 | + |
| 308 | + if (displays.length) { |
| 309 | + vrDisplay = displays[displays.length - 1]; |
| 310 | + canPresent = vrDisplay.capabilities.canPresent; |
| 311 | + hasPosition = vrDisplay.capabilities.hasPosition; |
| 312 | + hasOrientation = vrDisplay.capabilities.hasOrientation; |
| 313 | + hasExternalDisplay = vrDisplay.capabilities.hasExternalDisplay; |
292 | 314 | }
|
293 | 315 |
|
294 |
| - vrDisplay = displays[displays.length - 1]; |
295 |
| - |
296 |
| - if (!vrDisplay) { |
297 |
| - return null; |
298 |
| - } |
| 316 | + enterVRButton.dataset.enabled = canPresent; |
299 | 317 |
|
300 |
| - if (isPolyfilled(vrDisplay)) { |
301 |
| - showInstruction(document.querySelector('#novr')); |
302 |
| - } else { |
303 |
| - status.dataset.enabled = 'true'; |
304 |
| - } |
305 |
| - |
306 |
| - if (vrDisplay.capabilities && vrDisplay.capabilities.canPresent) { |
307 |
| - // Enable button to toggle entering/exiting VR. |
308 |
| - entervrButton.dataset.enabled = 'true'; |
309 |
| - } |
| 318 | + gameInstance.SendMessage( |
| 319 | + 'WebVRCameraSet', 'OnVRCapabilities', |
| 320 | + JSON.stringify({ |
| 321 | + canPresent: canPresent, |
| 322 | + hasPosition: hasPosition, |
| 323 | + hasOrientation: hasOrientation, |
| 324 | + hasExternalDisplay: hasExternalDisplay |
| 325 | + }) |
| 326 | + ); |
310 | 327 |
|
311 | 328 | return vrDisplay;
|
312 | 329 | }).catch(function (err) {
|
|
335 | 352 | window.addEventListener('keyup', onKeyUp, false);
|
336 | 353 | document.addEventListener('UnityLoaded', onUnityLoaded, false);
|
337 | 354 | document.addEventListener('Unity', onUnity);
|
338 |
| - entervrButton.addEventListener('click', onToggleVR, false); |
| 355 | + enterVRButton.addEventListener('click', onToggleVR, false); |
339 | 356 |
|
340 | 357 | onResize();
|
341 | 358 |
|
|
0 commit comments