Working Glitch example using AFrame

[Utopiah]

Hi, just gave the documentation a test at https://glitch.com/edit/#!/iwer-on-aframe?path=index.html relying on the CDN import example https://meta-quest.github.io/immersive-web-emulation-runtime/getting-started.html#import-iwer-from-a-cdn

Unfortunately it leads to

Uncaught TypeError: The specifier “gl-matrix” was a bare specifier, but was not remapped to anything. Relative module specifiers must start with “./”, “../” or “/”. XRDevice.js:16:28

while using

<script type="importmap">
    {
        "imports": {
            "iwer": "https://unpkg.com/iwer@1.0.0/lib/index.js"
        }
    }
</script>
<script type="module">
import { XRDevice, metaQuest3 } from 'iwer';

const xrDevice = new XRDevice(metaQuest3);
xrDevice.installRuntime();

console.log(xrDevice)
</script>

so wondering what should be done.

[msub2]

Try adding gl-matrix to the importmap as well, I remixed your glitch and that seems to have fixed the error

https://glitch.com/edit/#!/wiry-marble-tilapia

[Utopiah]

Thanks @msub2 it does indeed remove the error, yet if I run xrDevice.position.y++ I don't see a visual change, so I'm wondering if that's the expected behavior or if this makes 2 different instances and thus don't reflect back what should be a camera change.

[felixtrz]

@msub2 thanks for jumping in!

@Utopiah thanks for raising this issue! What's happening here is that IWER wasn't injected before aframe is able to run - when aframe first runs on the page, it will try to detect whether there is native WebXR implementation by looking at the navigator.xr object. In your code, IWER was injected after aframe script is run, causing aframe to not find native WebXR implementation at start up, and aframe injected its only WebVR polyfill as a result.

[felixtrz]

I remixed your project and hooked up some keyboard shortcuts that controls the camera movement (you need to click on the vr button first to use those): https://glitch.com/~bird-curvy-quartz

[felixtrz]

It's kinda tricky, and I have this point documented here: https://meta-quest.github.io/immersive-web-emulation-runtime/getting-started.html#creating-an-xrdevice-and-installing-the-runtime

But probably not noticeable enough and I've a feeling more folks are gonna run into this issue. Sorry for the confusion!

[felixtrz]

Try adding gl-matrix to the importmap as well, I remixed your glitch and that seems to have fixed the error

https://glitch.com/edit/#!/wiry-marble-tilapia

Alternatively, instead of importing the /lib/index.js and having to include gl-matrix as well, just import the /build/iwer.module.js:

<script type="importmap">
    {
        "imports": {
            "iwer": "https://unpkg.com/iwer@<version>/build/iwer.module.js"
        }
    }
</script>

Check out my threejs integration example: https://glitch.com/edit/#!/iwer-three-example

[felixtrz]

Added a few framework-specific integration examples on Glitch:

• Three.js: https://glitch.com/edit/#!/iwer-three-example
• Babylon.js: https://glitch.com/edit/#!/iwer-babylon-example
• A-Frame: https://glitch.com/edit/#!/iwer-aframe-example

[felixtrz]

Marking issue as closed