5 May 2017

Add WebVR support to the Viewer

Default blog image

I saw that Kean updated his cool vrok.it sample to use the Autodesk.Viewing.WebVR extension and it worked fine on my mobile device, so I gave it a try. :)

I made my Viewer instance load the extension:

var viewerElement = document.getElementById('forgeViewer');
var config = {
  extensions: ['Autodesk.Viewing.WebVR'],
  experimental: [ 'webVR_orbitModel' ]
viewer = new Autodesk.Viewing.Private.GuiViewer3D(viewerElement, config);

This made the extension load but the cardboard goggle icon
 did not appear in the Viewer toolbar :(
I sort of knew that my device did not really support WebVR directly, but I expected it to work since vrok.it worked for me too.
I saw that the relevant polyfill module (webvr-polyfill.min.js?v=v2.13.*) was brought in automatically by the Viewer, so was not sure what was going wrong:

In the end, I added the polyfill that Kean's sample was using, and that made things work. :)

I just downloaded the "webvr-polyfill.js" from Kean's github project and added it to my project. 
I then referenced it from my html file as one of the first modules:

<script src="/js/webvr-polyfill.js"></script>

I also added this meta to my html file to make the Viewer fit nicely on my mobile device's screen:

<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=no" />

And now it's working :)


Related Article