Skip to content

Commit c0423ce

Browse files
De-PantherDe-Panther
authored
Merge pull request #53 from De-Panther/dom_overlay_fix_firsttime
DOM Overlay fix for Chrome on Android
2 parents 08d13ae + d528f94 commit c0423ce

File tree

9 files changed

+75
-9
lines changed

9 files changed

+75
-9
lines changed

‎Assets/WebGLTemplates/WebXR/TemplateData/style.css

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,8 +12,9 @@
1212
.webgl-content .progress.Dark .full {background-image: url('progressFull.Dark.png');}
1313

1414
.webgl-content .footer {background-color: #ffffff; margin-top: 5px; height: 38px; line-height: 38px; font-family: Helvetica, Verdana, Arial, sans-serif; font-size: 18px;}
15-
.webgl-content .footer .webgl-logo, .title, .enterar, .entervr {height: 100%; display: inline-block; background: transparent center no-repeat;}
15+
.webgl-content .footer .webgl-logo, .webxr-link, .title, .enterar, .entervr {height: 100%; display: inline-block; background: transparent center no-repeat;}
1616
.webgl-content .footer .webgl-logo {background-image: url('webgl-logo.png'); width: 204px; float: left;}
17+
.webgl-content .footer .webxr-link {float: left;}
1718
.webgl-content .footer .title {margin-right: 10px; float: right;}
1819
.webgl-content .footer .enterar:enabled {background-color: #1eaed3; width: 38px; float: right;}
1920
.webgl-content .footer .enterar:disabled {background-color: #dddddd; width: 38px; float: right;}

‎Assets/WebGLTemplates/WebXR/index.html

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -34,6 +34,7 @@
3434
<div class="webgl-logo"></div>
3535
<button class="entervr" id="entervr" value="Enter VR" disabled>VR</button>
3636
<button class="enterar" id="enterar" value="Enter AR" disabled>AR</button>
37+
<div class="webxr-link">Using <a href="https://github.com/De-Panther/unity-webxr-export" target="_blank" title="WebXR Export">WebXR Export</a></div>
3738
<div class="title">%UNITY_WEB_NAME%</div>
3839
</div>
3940
</div>

‎Assets/WebGLTemplates/WebXR/webxr.js

Lines changed: 22 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -50,6 +50,7 @@
5050
this.isVRSupported = false;
5151
this.rAFCB = null;
5252
this.onInputEvent = null;
53+
this.waitingHandheldARHack = false;
5354
this.init();
5455
}
5556

@@ -94,16 +95,33 @@
9495

9596
XRManager.prototype.onRequestARSession = function () {
9697
if (!this.isARSupported) return;
98+
// The window on Chrome for Android lose focus when asking permissions.
99+
// A popup is opened and the Canvas is painted with the last frame.
100+
// We want to make sure that the Canvas is transparent when entering Handheld AR Session.
101+
this.waitingHandheldARHack = true;
102+
var thisXRMananger = this;
103+
var tempRender = function () {
104+
thisXRMananger.ctx.clearColor(0, 0, 0, 0);
105+
thisXRMananger.ctx.clear(thisXRMananger.ctx.COLOR_BUFFER_BIT | thisXRMananger.ctx.DEPTH_BUFFER_BIT);
106+
if (thisXRMananger.waitingHandheldARHack)
107+
{
108+
window.requestAnimationFrame( tempRender );
109+
}
110+
}
111+
window.requestAnimationFrame( tempRender );
97112
navigator.xr.requestSession('immersive-ar', {
98113
requiredFeatures: ['local-floor'], // TODO: Get this value from Unity
99114
optionalFeatures: ['dom-overlay'],
100-
domOverlay: {root: this.canvas}
115+
domOverlay: {root: this.canvas.parentElement}
101116
}).then(async (session) => {
117+
this.waitingHandheldARHack = false;
102118
session.isImmersive = true;
103119
session.isInSession = true;
104120
session.isAR = true;
105121
this.arSession = session;
106122
this.onSessionStarted(session);
123+
}).catch((error) => {
124+
thisXRMananger.waitingHandheldARHack = false;
107125
});
108126
}
109127

@@ -255,7 +273,9 @@
255273
func(time);
256274
});
257275
} else {
258-
window.requestAnimationFrame(func);
276+
if (!thisXRMananger.waitingHandheldARHack) {
277+
window.requestAnimationFrame(func);
278+
}
259279
}
260280
};
261281

‎Assets/WebGLTemplates/WebXRFullView/TemplateData/style.css

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,8 +12,9 @@
1212
.webgl-content .progress.Dark .full {background-image: url('progressFull.Dark.png');}
1313

1414
.webgl-content .footer {position: fixed; width: 100%; bottom: 0; margin-top: 5px; height: 38px; line-height: 38px; font-family: Helvetica, Verdana, Arial, sans-serif; font-size: 18px;}
15-
.webgl-content .footer .webgl-logo, .title, .enterar, .entervr {height: 100%; display: inline-block; background: transparent center no-repeat;}
15+
.webgl-content .footer .webgl-logo, .webxr-link, .title, .enterar, .entervr {height: 100%; display: inline-block; background: transparent center no-repeat;}
1616
.webgl-content .footer .webgl-logo {background-image: url('webgl-logo.png'); width: 204px; float: left;}
17+
.webgl-content .footer .webxr-link {float: left;}
1718
.webgl-content .footer .title {margin-right: 10px; float: right;}
1819
.webgl-content .footer .enterar:enabled {background-color: #1eaed3; width: 38px; float: right;}
1920
.webgl-content .footer .enterar:disabled {background-color: #dddddd; width: 38px; float: right;}

‎Assets/WebGLTemplates/WebXRFullView/index.html

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -35,6 +35,7 @@
3535
<div class="webgl-logo"></div>
3636
<button class="entervr" id="entervr" value="Enter VR" disabled>VR</button>
3737
<button class="enterar" id="enterar" value="Enter AR" disabled>AR</button>
38+
<div class="webxr-link">Using <a href="https://github.com/De-Panther/unity-webxr-export" target="_blank" title="WebXR Export">WebXR Export</a></div>
3839
<div class="title">%UNITY_WEB_NAME%</div>
3940
</div>
4041
</div>

‎Assets/WebGLTemplates/WebXRFullView/webxr.js

Lines changed: 22 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -50,6 +50,7 @@
5050
this.isVRSupported = false;
5151
this.rAFCB = null;
5252
this.onInputEvent = null;
53+
this.waitingHandheldARHack = false;
5354
this.init();
5455
}
5556

@@ -94,16 +95,33 @@
9495

9596
XRManager.prototype.onRequestARSession = function () {
9697
if (!this.isARSupported) return;
98+
// The window on Chrome for Android lose focus when asking permissions.
99+
// A popup is opened and the Canvas is painted with the last frame.
100+
// We want to make sure that the Canvas is transparent when entering Handheld AR Session.
101+
this.waitingHandheldARHack = true;
102+
var thisXRMananger = this;
103+
var tempRender = function () {
104+
thisXRMananger.ctx.clearColor(0, 0, 0, 0);
105+
thisXRMananger.ctx.clear(thisXRMananger.ctx.COLOR_BUFFER_BIT | thisXRMananger.ctx.DEPTH_BUFFER_BIT);
106+
if (thisXRMananger.waitingHandheldARHack)
107+
{
108+
window.requestAnimationFrame( tempRender );
109+
}
110+
}
111+
window.requestAnimationFrame( tempRender );
97112
navigator.xr.requestSession('immersive-ar', {
98113
requiredFeatures: ['local-floor'], // TODO: Get this value from Unity
99114
optionalFeatures: ['dom-overlay'],
100-
domOverlay: {root: this.canvas}
115+
domOverlay: {root: this.canvas.parentElement}
101116
}).then(async (session) => {
117+
this.waitingHandheldARHack = false;
102118
session.isImmersive = true;
103119
session.isInSession = true;
104120
session.isAR = true;
105121
this.arSession = session;
106122
this.onSessionStarted(session);
123+
}).catch((error) => {
124+
thisXRMananger.waitingHandheldARHack = false;
107125
});
108126
}
109127

@@ -255,7 +273,9 @@
255273
func(time);
256274
});
257275
} else {
258-
window.requestAnimationFrame(func);
276+
if (!thisXRMananger.waitingHandheldARHack) {
277+
window.requestAnimationFrame(func);
278+
}
259279
}
260280
};
261281

‎Build/TemplateData/style.css

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,8 +12,9 @@
1212
.webgl-content .progress.Dark .full {background-image: url('progressFull.Dark.png');}
1313

1414
.webgl-content .footer {background-color: #ffffff; margin-top: 5px; height: 38px; line-height: 38px; font-family: Helvetica, Verdana, Arial, sans-serif; font-size: 18px;}
15-
.webgl-content .footer .webgl-logo, .title, .enterar, .entervr {height: 100%; display: inline-block; background: transparent center no-repeat;}
15+
.webgl-content .footer .webgl-logo, .webxr-link, .title, .enterar, .entervr {height: 100%; display: inline-block; background: transparent center no-repeat;}
1616
.webgl-content .footer .webgl-logo {background-image: url('webgl-logo.png'); width: 204px; float: left;}
17+
.webgl-content .footer .webxr-link {float: left;}
1718
.webgl-content .footer .title {margin-right: 10px; float: right;}
1819
.webgl-content .footer .enterar:enabled {background-color: #1eaed3; width: 38px; float: right;}
1920
.webgl-content .footer .enterar:disabled {background-color: #dddddd; width: 38px; float: right;}

‎Build/index.html

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -34,6 +34,7 @@
3434
<div class="webgl-logo"></div>
3535
<button class="entervr" id="entervr" value="Enter VR" disabled>VR</button>
3636
<button class="enterar" id="enterar" value="Enter AR" disabled>AR</button>
37+
<div class="webxr-link">Using <a href="https://github.com/De-Panther/unity-webxr-export" target="_blank" title="WebXR Export">WebXR Export</a></div>
3738
<div class="title">Unity-WebXR-Export</div>
3839
</div>
3940
</div>

‎Build/webxr.js

Lines changed: 22 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -50,6 +50,7 @@
5050
this.isVRSupported = false;
5151
this.rAFCB = null;
5252
this.onInputEvent = null;
53+
this.waitingHandheldARHack = false;
5354
this.init();
5455
}
5556

@@ -94,16 +95,33 @@
9495

9596
XRManager.prototype.onRequestARSession = function () {
9697
if (!this.isARSupported) return;
98+
// The window on Chrome for Android lose focus when asking permissions.
99+
// A popup is opened and the Canvas is painted with the last frame.
100+
// We want to make sure that the Canvas is transparent when entering Handheld AR Session.
101+
this.waitingHandheldARHack = true;
102+
var thisXRMananger = this;
103+
var tempRender = function () {
104+
thisXRMananger.ctx.clearColor(0, 0, 0, 0);
105+
thisXRMananger.ctx.clear(thisXRMananger.ctx.COLOR_BUFFER_BIT | thisXRMananger.ctx.DEPTH_BUFFER_BIT);
106+
if (thisXRMananger.waitingHandheldARHack)
107+
{
108+
window.requestAnimationFrame( tempRender );
109+
}
110+
}
111+
window.requestAnimationFrame( tempRender );
97112
navigator.xr.requestSession('immersive-ar', {
98113
requiredFeatures: ['local-floor'], // TODO: Get this value from Unity
99114
optionalFeatures: ['dom-overlay'],
100-
domOverlay: {root: this.canvas}
115+
domOverlay: {root: this.canvas.parentElement}
101116
}).then(async (session) => {
117+
this.waitingHandheldARHack = false;
102118
session.isImmersive = true;
103119
session.isInSession = true;
104120
session.isAR = true;
105121
this.arSession = session;
106122
this.onSessionStarted(session);
123+
}).catch((error) => {
124+
thisXRMananger.waitingHandheldARHack = false;
107125
});
108126
}
109127

@@ -255,7 +273,9 @@
255273
func(time);
256274
});
257275
} else {
258-
window.requestAnimationFrame(func);
276+
if (!thisXRMananger.waitingHandheldARHack) {
277+
window.requestAnimationFrame(func);
278+
}
259279
}
260280
};
261281

0 commit comments

Comments
 (0)