Wow that was some night in VR!

Ada Rose Cannon
Jan 12, 2017 · 3 min read

Last night I gave a talk on Virtual Reality in Virtual Reality at London Web Performance. LDNWebPerf is a monthly talk hosted at the Financial Times in London.

The talk was recorded so if you missed it don’t worry.

Image for post
Photo by LDNWebPerf’s Perry

100 people sharing the same VR experience powered by A-Frame and Web Sockets. We managed to get the whole audience connected simultaneously and they could see each other looking around in the virtual space.

Video and Notes

The whole talk was recorded. Here are my talk notes and a video of the event.

Of course you can’t experience the magic of sharing a VR experience with the 100 other audience members it was pretty incredible.

Video

Notes

How did I do it?

Feel free to fork the repo for a future project if you want:

The main message of my talk last night was that A-Frame enables one to author a VR scene exactly like one would with HTML.

I marked up a simple studio from A-Frame components with a stage and a place for the audience to go.

The HTML file which contains the scene: https://github.com/AdaRoseEdwards/metaverse/blob/c5059a08561083d218182de0b0d15f61ea3ac871/static/index.html#L49

When I would introduce new content, the server would message every client using websockets. The client would then update the innerHTML of the entity: https://github.com/AdaRoseEdwards/metaverse/blob/c5059a08561083d218182de0b0d15f61ea3ac871/static/scripts/slides.es6#L20

That is all that is required to add some new content.

Syncing Users

This was a little more complex because I wanted to ensure that the server could handle unexpected to loads.

In order to minimise over head the server deals only in byte data and does no parsing it just stores it on each websocket object.

60x per second the server concatenates all the raw byte data and sends it down to every client.

The clients then parse the raw byte data to update the position of rotation each avatar with matching IDs to the chunks of data.

If there is an ID without a corresponding Avatar we make a new DOM node use appendChild to add it to the #avatar-container

If any avatars have not been updated then using .removeChild we remove the avatar from the scene.

There is some redundancy in the data format, allowing me to store some additional data for future use:

4 bytes - ID
12 bytes - Position
12 Bytes - Rotation
4 Bytes - Misc

Final Thoughts

The night was a huge success! The audience had fun and the VR held up we had over 100 users at peak load and it ran without a hitch!!

I built this over a few days and I couldn’t have done it without A-Frame which made it very easy to VR without expertise.

Thank you to Perry and the Financial Times for hosting us last night and thanks to Google for the cardboards. It was a really fun talk to give and I am glad it went well!

Image for post

Samsung Internet Developers

Writings from the Samsung Internet Developer Relations…

Thanks to Daniel Appelquist

Ada Rose Cannon

Written by

Co-chair of the W3C Immersive Web Working Group, Developer Advocate for Samsung.

Samsung Internet Developers

Writings from the Samsung Internet Developer Relations Team. For more info see our disclaimer: https://hub.samsunginter.net/about-blog

Ada Rose Cannon

Written by

Co-chair of the W3C Immersive Web Working Group, Developer Advocate for Samsung.

Samsung Internet Developers

Writings from the Samsung Internet Developer Relations Team. For more info see our disclaimer: https://hub.samsunginter.net/about-blog

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch

Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore

Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store