For starters, I got rid of the polyfile, which provides PlayCanvas. For this, I did not include support for VR in the settings.
Then I took the latest version of the polyfil from here and set the priority for loading the scripts.
Then I wrote a simple script to activate VR support when initializing PlayCanvas.
Webvr.prototype.initialize = function() {
var self = this;
var VrDisplay = null;
this.app.vr = new pc.VrManager(this.app);
var polyfill = new WebVRPolyfill();
navigator.getVRDisplays().then(function(displays) {
VrDisplay = new pc.VrDisplay(self.app, displays[0]);
});
};
The script does the following…
- Creates a new object VrManager;
- Creates a new object
WebVRPolyfill()
for to activate the API webvr-polyfill; - Next, using the getVRDisplays() method of the polyfile
navigator
interface, I was able to access the available displays; - Finally, using the VrDisplay constructor built into the PlayCanvas, I created a display for the PlayCanvas;
After all the actions, I got a working VR and the correct output to the console this.app.vr
.
However, if you run the code on your smartphone in debug mode, you will receive errors. There are no errors with the published version. Example.