Mixing Real and Virtual in WebAR

Mixing Real and Virtual in WebAR

Augumented and Mixed Reality for Everyone

Rabimba Karanjai @rabimba

What is WebVR What is WebXR (ImmersiveWeb) What devices they support Can I build a VR app here Can i dance with a Dragonite in this room?

Workshop Materials

https://on.tchspk.rs/oscon2018 - the actual workshop https://on.tchspk.rs/rk-oscon-workshop - session review

Why WebVR? Browser APIs that enable WebGL rendering to headsets.

https://webvr.rocks - shows you what's supported on what browsers.

AFrame is a Mozilla WebVR Framework. Rich community. https://aframe.io/blog

We are using Glitch to code and host online.

We mainly walked through each example in the slides above. Each slide had an example you could click on in Glitch and edit the code and run it there to see the changes.

This stuff doesn't work great in default Chrome. Use Firefox

Control-Option(alt)-I will open an inspector that shows you the whole scene. I had to quit my window magnet app cause it was capturing Control-Option-I...

You can add physics: Add a Dynamic Body to an entity and it will give it a physics engine.
Add a Static body to an entity to make it solid.

AFrame Registry is a community of shared animations and resources. You can just copy them into your scene and use them.
https://aframe.io/aframe-registry/

He skipped over a lot of info like hand tracking with leap motion/vive controllers.

WebXR

On the iPhone you have to use the Mozilla WebXR Viewer. Seems like WebXR isn't very supported on many devices except very recent Android devices.

Examples

This is an example of a VR representation of data using D3. https://www.youtube.com/watch?v=vy8e8zIi4qw