Skip to content
Permalink
master
Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?

webvr.info/samples/00-hello-webvr.html

Go to file
 
 
Cannot retrieve contributors at this time
213 lines (180 sloc) 8.26 KB
Raw Blame
Open in GitHub Desktop
<!doctype html>
<!--
Copyright 2016 The Chromium Authors. All rights reserved.
Use of this source code is governed by a BSD-style license that can be
found in the LICENSE file.
-->
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<meta name="mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-capable" content="yes">
<!-- Origin Trial Token, feature = WebVR (For Chrome M62+), origin = https://webvr.info, expires = 2018-09-10 -->
<meta http-equiv="origin-trial" data-feature="WebVR (For Chrome M62+)" data-expires="2018-09-10" content="AhQcOrbjvS0+50wwuqtAidzraKNfZj8Bj159g2+2LsT5QRHe9IeebCl5ApORwd3oGxfKzl5H8s5K3aTMNzC+5gsAAABPeyJvcmlnaW4iOiJodHRwczovL3dlYnZyLmluZm86NDQzIiwiZmVhdHVyZSI6IldlYlZSMS4xTTYyIiwiZXhwaXJ5IjoxNTM2NjAxNDEzfQ==">
<title>00 - Hello WebVR!</title>
<!--
This sample enumerates over the connected VRDisplays and displays their
contents on screen. Useful for debugging. WebGL is not used in this sample
and nothing is presented to the VRDisplay.
-->
<style>
.vr-display {
font-family: sans-serif;
font-size: 0.8em;
border-bottom: 1px solid #888;
}
.vr-display h1 {
font-size: 1.2em;
}
.vr-display .float-array {
font-family: monospace;
}
</style>
<!-- This entire block in only to facilitate dynamically enabling and
disabling the WebVR polyfill, and is not necessary for most WebVR apps.
If you want to use the polyfill in your app, just include the js file and
everything will work the way you want it to by default. -->
<script src="js/third-party/webvr-polyfill.js"></script>
<script src="js/third-party/wglu/wglu-url.js"></script>
<script>
// Dynamically turn the polyfill on if requested by the query args.
if (WGLUUrl.getBool('polyfill', false)) {
var polyfill = new WebVRPolyfill({
// Ensures the polyfill is always active on mobile, due to providing
// a polyfilled CardboardVRDisplay when no native API is available,
// and also polyfilling even when the native API is available, due to
// providing a CardboardVRDisplay when no native VRDisplays exist.
PROVIDE_MOBILE_VRDISPLAY: true,
});
}
</script>
<!-- End sample polyfill enabling logic -->
<script src="js/vr-samples-util.js"></script>
</head>
<body>
<script>
/* global VRSamplesUtil */
(function () {
"use strict";
function buildVRElement (vrDisplay) {
var vrElement = document.createElement("div");
vrElement.classList.add("vr-display");
var header = document.createElement("h1");
header.innerHTML = vrDisplay.displayId + " - " + vrDisplay.displayName;
vrElement.appendChild(header);
// This function walks through the object recursively and builds a
// list of all the properties and values. It's a quick and dirty way
// to dump the contents of a VRDisplay onto the screen.
function buildMemberList (obj, depth) {
if (depth >= 5) {
return; // Don't let this infinitely recurse on us.
}
var ul = document.createElement("ul");
for (var key in obj) {
// Ignore some names that are intended to be "private"
if (!key.length || key[0] == "_" || key[key.length-1] == "_") {
continue;
}
// Don't list functions
if (typeof obj[key] === "function") {
continue;
}
var li = document.createElement("li");
if (obj[key] === null) {
li.innerHTML = "<b>" + key + ":</b> <i>null</i>";
} else if (Object.prototype.toString.call(obj[key]) === "[object Float32Array]") {
// This formatting ensures that the array prints at a fixed size
// as the values in the array change.
var value = "";
for (var idx in obj[key]) {
if (value !== "")
value += ",";
if (obj[key][idx] >= 0)
value += " ";
value += obj[key][idx].toFixed(3);
}
li.innerHTML = "<b>" + key + ":</b> <span class='float-array'>[" + value + " ]</span>";
} else if (typeof obj[key] === "number" && obj[key] !== (obj[key]|0)) {
li.innerHTML = "<b>" + key + ":</b> " + obj[key].toFixed(3);
} else if (typeof obj[key] === "object") {
li.innerHTML = "<b>" + key + ":</b>";
li.appendChild(buildMemberList(obj[key], depth+1));
} else {
li.innerHTML = "<b>" + key + ":</b> " + obj[key];
}
ul.appendChild(li);
}
return ul;
}
var memberUL = buildMemberList(vrDisplay, 0);
var frameData = new VRFrameData();
vrDisplay.getFrameData(frameData);
var frameDataLI = document.createElement("li");
frameDataLI.innerHTML = "<b>getFrameData():</b>";
var frameDataUL = buildMemberList(frameData);
frameDataLI.appendChild(frameDataUL);
memberUL.appendChild(frameDataLI);
var leftEye = vrDisplay.getEyeParameters("left");
var leftEyeLI = document.createElement("li");
leftEyeLI.innerHTML = "<b>getEyeParameters('left'):</b>";
var leftEyeUL = buildMemberList(leftEye);
leftEyeLI.appendChild(leftEyeUL);
memberUL.appendChild(leftEyeLI);
var rightEye = vrDisplay.getEyeParameters("right");
var rightEyeLI = document.createElement("li");
rightEyeLI.innerHTML = "<b>getEyeParameters('right'):</b>";
var rightEyeUL = buildMemberList(rightEye);
rightEyeLI.appendChild(rightEyeUL);
memberUL.appendChild(rightEyeLI);
// Update the values that may change frame-to-frame
function onAnimationFrame () {
vrDisplay.requestAnimationFrame(onAnimationFrame);
vrDisplay.getFrameData(frameData);
frameDataLI.removeChild(frameDataUL);
frameDataUL = buildMemberList(frameData);
frameDataLI.appendChild(frameDataUL);
leftEye = vrDisplay.getEyeParameters("left");
leftEyeLI.removeChild(leftEyeUL);
leftEyeUL = buildMemberList(leftEye);
leftEyeLI.appendChild(leftEyeUL);
rightEye = vrDisplay.getEyeParameters("right");
rightEyeLI.removeChild(rightEyeUL);
rightEyeUL = buildMemberList(rightEye);
rightEyeLI.appendChild(rightEyeUL);
}
vrDisplay.requestAnimationFrame(onAnimationFrame);
vrElement.appendChild(memberUL);
return vrElement;
}
function eventFired(evt) {
VRSamplesUtil.addInfo("[" + evt.type + "] VR Display: " + evt.display.displayName + ", Reason: " + evt.reason, 3000);
}
if (navigator.getVRDisplays) {
// Enumerate the VRDisplays
navigator.getVRDisplays().then(function (displays) {
if (!displays.length) {
VRSamplesUtil.addInfo("WebVR supported, but no VRDisplays found.");
return;
}
for (var i = 0; i < displays.length; ++i) {
document.body.appendChild(buildVRElement(displays[i]));
}
}, function () {
VRSamplesUtil.addError("Your browser does not support WebVR. See <a href='http://webvr.info'>webvr.info</a> for assistance.");
});
window.addEventListener("vrdisplayconnect", eventFired, false);
window.addEventListener("vrdisplaydisconnect", eventFired, false);
window.addEventListener("vrdisplayactivate", eventFired, false);
window.addEventListener("vrdisplaydeactivate", eventFired, false);
window.addEventListener("vrdisplayblur", eventFired, false);
window.addEventListener("vrdisplayfocus", eventFired, false);
} else if (navigator.getVRDevices) {
VRSamplesUtil.addError("Your browser supports WebVR but not the latest version. See <a href='http://webvr.info'>webvr.info</a> for more info.");
} else {
VRSamplesUtil.addError("Your browser does not support WebVR. See <a href='http://webvr.info'>webvr.info</a> for assistance.");
}
})();
</script>
</body>
</html>