Multiple layout and sample fixes
diff --git a/samples2/01-vr-presentation.html b/samples2/01-vr-presentation.html
index 3af3dcc..e12a19f 100644
--- a/samples2/01-vr-presentation.html
+++ b/samples2/01-vr-presentation.html
@@ -57,7 +57,7 @@
onRequestSession: onRequestSession,
onEndSession: onEndSession
});
- document.body.appendChild(vrButton.domElement);
+ document.querySelector('header').appendChild(vrButton.domElement);
// Is WebVR available on this UA?
if (navigator.vr) {
@@ -134,15 +134,17 @@
// Called every time the VRSession requests that a new frame be drawn.
function onVRFrame(frame) {
+ let session = frame.session;
+
// Per-frame scene setup. Nothing WebVR specific here.
scene.startFrame();
// Inform the session that we're ready for the next frame.
- vrSession.requestFrame(onVRFrame);
+ session.requestFrame(onVRFrame);
// Bind the WebGL layer's framebuffer, which is where any content to be
// displayed on the VRDevice must be rendered.
- gl.bindFramebuffer(gl.FRAMEBUFFER, vrSession.baseLayer.framebuffer);
+ gl.bindFramebuffer(gl.FRAMEBUFFER, session.baseLayer.framebuffer);
// Clear the framebuffer
gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
@@ -160,7 +162,7 @@
// If we do have a valid pose, loop through each of the views reported
// by the frame and draw them into the corresponding viewport.
for (let view of frame.views) {
- let viewport = view.getViewport(vrSession.baseLayer);
+ let viewport = view.getViewport(session.baseLayer);
gl.viewport(viewport.x, viewport.y,
viewport.width, viewport.height);
diff --git a/samples2/02-viewport-scaling.html b/samples2/02-viewport-scaling.html
index aae61b3..644fbec 100644
--- a/samples2/02-viewport-scaling.html
+++ b/samples2/02-viewport-scaling.html
@@ -77,7 +77,7 @@
onRequestSession: onRequestSession,
onEndSession: onEndSession
});
- document.body.appendChild(vrButton.domElement);
+ document.querySelector('header').appendChild(vrButton.domElement);
if (navigator.vr) {
navigator.vr.getDevices().then((devices) => {
@@ -136,21 +136,23 @@
// Called every time the VRSession requests that a new frame be drawn.
function onVRFrame(frame) {
+ let session = frame.session;
+
scene.startFrame();
// Adjust the viewports if needed.
adjustViewportScale();
- vrSession.requestFrame(onVRFrame);
+ session.requestFrame(onVRFrame);
- gl.bindFramebuffer(gl.FRAMEBUFFER, vrSession.baseLayer.framebuffer);
+ gl.bindFramebuffer(gl.FRAMEBUFFER, session.baseLayer.framebuffer);
gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
let pose = frame.getDevicePose(vrFrameOfRef);
if (pose) {
for (let view of frame.views) {
- let viewport = view.getViewport(vrSession.baseLayer);
+ let viewport = view.getViewport(session.baseLayer);
gl.viewport(viewport.x, viewport.y,
viewport.width, viewport.height);
diff --git a/samples2/03-360-photos.html b/samples2/03-360-photos.html
index 19e9d60..74a5d15 100644
--- a/samples2/03-360-photos.html
+++ b/samples2/03-360-photos.html
@@ -56,7 +56,7 @@
onRequestSession: onRequestSession,
onEndSession: onEndSession
});
- document.body.appendChild(vrButton.domElement);
+ document.querySelector('header').appendChild(vrButton.domElement);
if (navigator.vr) {
navigator.vr.getDevices().then((devices) => {
@@ -124,18 +124,20 @@
// Called every time the VRSession requests that a new frame be drawn.
function onVRFrame(frame) {
+ let session = frame.session;
+
scene.startFrame();
- vrSession.requestFrame(onVRFrame);
+ session.requestFrame(onVRFrame);
- gl.bindFramebuffer(gl.FRAMEBUFFER, vrSession.baseLayer.framebuffer);
+ gl.bindFramebuffer(gl.FRAMEBUFFER, session.baseLayer.framebuffer);
gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
let pose = frame.getDevicePose(vrFrameOfRef);
if (pose) {
for (let view of frame.views) {
- let viewport = view.getViewport(vrSession.baseLayer);
+ let viewport = view.getViewport(session.baseLayer);
gl.viewport(viewport.x, viewport.y,
viewport.width, viewport.height);
diff --git a/samples2/04-magic-window.html b/samples2/04-magic-window.html
index 8dd6ff7..9cc033f 100644
--- a/samples2/04-magic-window.html
+++ b/samples2/04-magic-window.html
@@ -57,7 +57,7 @@
onRequestSession: onRequestSession,
onEndSession: onEndSession
});
- document.body.appendChild(vrButton.domElement);
+ document.querySelector('header').appendChild(vrButton.domElement);
if (navigator.vr) {
navigator.vr.getDevices().then((devices) => {
@@ -83,7 +83,6 @@
session.requestFrameOfReference("eyeLevel").then((frameOfRef) => {
vrNonExclusiveFrameOfRef = frameOfRef;
onSessionStarted(session);
- session.requestFrame(onNonExlusiveVRFrame);
});
});
});
@@ -101,7 +100,6 @@
session.requestFrameOfReference("eyeLevel").then((frameOfRef) => {
vrExclusiveFrameOfRef = frameOfRef;
onSessionStarted(session);
- session.requestFrame(onExlusiveVRFrame);
});
});
}
@@ -118,6 +116,8 @@
}
session.baseLayer = new VRWebGLLayer(session, gl);
+
+ session.requestFrame(onVRFrame);
}
// Called when the user clicks the "Exit VR" button. In response we end
@@ -139,23 +139,20 @@
vrNonExclusiveSession = null;
}
- function onExclusiveVRFrame(frame) {
- vrExclusiveSession.requestFrame(onExclusiveVRFrame);
- onVRFrame(frame, vrExclusiveSession, vrExclusiveFrameOfRef);
- }
-
- function onNonExlusiveVRFrame(frame) {
- vrNonExclusiveSession.requestFrame(onNonExlusiveVRFrame);
- onVRFrame(frame, vrNonExclusiveSession, vrNonExclusiveFrameOfRef);
- }
-
// Called every time a VRSession requests that a new frame be drawn.
- function onVRFrame(frame, session, frameOfRef) {
+ function onVRFrame(frame) {
+ let session = frame.session;
+
scene.startFrame();
+ session.requestFrame(onVRFrame);
+
gl.bindFramebuffer(gl.FRAMEBUFFER, session.baseLayer.framebuffer);
gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
+ // Ensure that we're using the right frame of reference for the session.
+ let frameOfRef = (session == vrExclusiveSession ?
+ vrExclusiveFrameOfRef : vrNonExclusiveFrameOfRef);
let pose = frame.getDevicePose(frameOfRef);
if (pose) {
diff --git a/samples2/css/common.css b/samples2/css/common.css
index 21e9e66..05ec6e8 100644
--- a/samples2/css/common.css
+++ b/samples2/css/common.css
@@ -9,9 +9,9 @@
Segoe UI, Roboto, Oxygen,
Ubuntu, Cantarell, Fira Sans,
Droid Sans, Helvetica Neue, sans-serif;
- float: right;
- right: 0px;
- text-align: right;
+ float: left;
+ left: 0px;
+ text-align: left;
max-width: 420px;
padding: 0.5em;
background-color: rgba(255, 255, 255, 0.90);
@@ -25,6 +25,7 @@
canvas {
position: absolute;
+ z-index: 0;
width: 100%;
height: 100%;
left: 0;
@@ -32,4 +33,4 @@
right: 0;
bottom: 0;
margin: 0;
-}
\ No newline at end of file
+}