Inside My Social VR Bubble
It’s been four years now since I started experimenting with VR inside the browser. Well, I have finally encapsulated myself inside my own personal VR bubble!
What is that, you say?
I can actually meet with others inside of a VR server, with a browser and a VR headset and “experience a common immersive virtual environment together”. I custom designed it all myself, literally the stuff of science fiction to me.
I even have my own virtual office and a meeting complex setup. No high business office rents or commute. Just twenty bucks a month for a VPS server. You can find cheaper or even free. Try Mozilla’s HUBS.
A lot of this with A-frame, NAF, WebRTC, WebXR and now with video capability “all combined together” is still a bit bleeding edge, even for free open source software.
In fact, I did it the other day, with four of my friends for over an hour. One of them was on the other side of the world across the Atlantic ocean in England. Don’t get me wrong, I’m not talking about Zoom here, or other video teleconferencing software. Having VR in addition to video makes it more, even if I still have some video bugs to iron out.
At the end of this article you will find sample files and assets for jumpstarting your own personal VR server!
So, let me start at the beginning . . .
I learned about A-Frame at a JavaScript meetup, in a Google building back in 2017 here in San Francisco. I had previously tinkered with SecondLife and OpenSimulator many years earlier, but never owned a VR headset, because basically they were too expensive at the time.
I thought “Social VR” as pretty cool. We didn’t call it that back then . . . You could build things “in world”, meet and chat with other avatars in a virtual world. However, you had to install a special client viewer on your machine to do just that.
I remember thinking at the time, wouldn’t it be great if a browser was the actual viewer? You wouldn’t have to install anything, because nearly every computer on the planet had one! That would make it so much easier for people to get into VR. Making it easier is still a really big deal!
Yes, a browser is a 2D screen, but things have changed, now you put on your VR headset, launch to an internet address, click on a VR button and become totally immersed inside a virtual reality scene. Be careful you don’t bump your knees, or trip over that coffee table.
Don’t be discouraged. You can still try it all out even if you don’t own a VR headset just yet! This one works best without hardware, but you should have a fast internet connection, microphone and video cam. If you don’t own a VR headset yet skip over the next paragraph.
If you do have a VR headset like an Oculus Quest 2 or others use this link instead of the other one below (Sorry, I’m having a little trouble with video streaming on this one, but it’s worth seeing). Use right controllers toggle stick to move around and trigger to select. You can target the duck on the roof!
Here is how:
- Using Firefox, or Chrome on your personal computer (please, not a wimpy cell phone).
- Arrow keys will move you around (or WSAD).
- You will rotate your viewing direction by “left mouse button dragging” in the center of the screen. NOTE: your mouse pointer will lock when this is done, so remember to press the ESC key when you want control of the pointer back.
- Next you will click below and be please be patient while a lot of graphics download for the first time.
- Allow VR if asked. You will be asked to enable a microphone and video camera. Do so, if you want to be seen and heard. On Chrome you will also have to enable sound, if you want to hear others when they speak.
- In the upper left of your screen, click on the little lock on the Address Bar to the left of the page address, this will show you status of your mic, sound/audio and VR. They should all be Allow or Allowed.
That should mostly do it (oh, good idea to wear headphones to avoid feedback). Your avatar, a red robot head, will materialize (res or resolve) inside my VR meeting complex in a park like setting. If you run into any problems, best to refresh the page.
Enjoy, explore and when you are done, return to this article for more info. If nobody is there in VR, you can also open a second tab and paste the address in the browser and meet with yourself to test things out.
Ok, ready? Here we go . . . Launch VR inside my browser.
Now, welcome back! You might be asking yourself, how can I do this? I want to setup my own personal VR server too . . . but I don’t know much about A-frame. I do know HTML5, some Web Development, some JavaScript and how to setup a Windows Server VPS.
Also my VR server sandbox at:
Screen shots of me building the virtual environment using various tools.
Now to finish off — here are three detailed example pieces of VR code in this zip file including assets. You’ll still need to install them on your own server setup.
This article should probably have been called “Inside My Personal VR Office” on my private virtual island and how to build your own VR Office and VR Meeting Space for free. If you enjoyed this article, clap me up and please share, Thanks!
