Back in October, I received the Oculus Rift DK2 for my birthday and found what I think will be the future of how we build websites, interact with customers, and communicate with each other. I found a community of enthusiasts who are building virtual worlds with the very same concepts we use to build two-dimensional websites today. This community is pushing the boundaries of the web in a way that is unlike any other, and we’re having an absolute blast discovering the possibilities.
Let me paint a picture for you. Think first of the web as you know it today: text, images, and links to other websites, some of them on different domains. Today, the web is a flat surface, sometimes a highly complex and interactive document, but almost always a two-dimensional representation of information that you look at on your two-dimensional screen, which allows you to scroll up and down, left and right.
Now, instead, imagine a room with four walls. On the front wall you have a beautiful image in a picture frame, but this image looks more like a hologram, with depth. You can see that the river in the picture is closer to you and the mountain in the background farther away. Maybe a bird flies from the water and into the distance. On the wall to your right is a glowing doorway with a sign over the top that says, “Lullabot” and then an address such as you’re already familiar with, “http://www.lullabot.com”. You click on this glowing doorway and it disappears, allowing you to look through and see what is on the other side. Is this a website or a video game?
You walk through the now open doorway and find yourself in a brick building. Windows to your left and right reveal an otherworldly landscape. A life-size Lullabot sits in the corner beside a large flat screen with what looks like a two-dimensional website on it. In the middle of the room there’s a small area with gently swaying bamboo surrounded by rocks and wood chips—a little zen garden where you can walk around. As you walk, you see an open passageway to another part of the room where famous logos line the walls, and more doorways that—once you click and walk through—showcase how two-dimensional websites look and act on various devices. A large screen shows the MSNBC website at desktop resolution. A giant iPad beside that has the same website on it at tablet breakpoint, and a large floating iPhone beside that shows how the website looks and responds on a mobile device.
Sounds a bit crazy you say? Crazy or not, this is now a reality; virtual reality.
To visit, the Lullabot Lounge I’ve described, download JanusVR from http://janusvr.com, launch the app, hit the tab key and type in this address: http://lullabot.github.io/loungeVR/. A new glowing portal will appear. Click on it and walk through! There you’ll be able to see the Lullabot Lounge in VR. The code and assets for this room are hosted on GitHub, so feel free to fork or send us pull requests!
Enabling the 3D Web
The community that I’m part of is based around a piece of free software called JanusVR. At it’s heart, Janus is a new web browser which can interpret a subset of XML we’re calling JanusML. Akin to what the ReactJS community has done with it’s JSX specification, JanusML extends XML for new applications.
JanusVR is built by one person currently, Dr. James McCrae, who hails from the University of Toronto. JanusVR makes it easy for anyone to create a three-dimensional website, fostering a community around this software. James has taken the concepts built into typical every-day web browsers like Chrome and Firefox and applied them to the way you build a three dimensional website. In fact, the original name of the project was “Firebox” and JanusML was “Firebox code.” In truth, you don’t even need the Oculus Rift or any other head mounted display to view these sites though it helps enhance the experience. If JanusVR doesn’t detect an Oculus Rift, it launches in 2D mode and you can use it without headgear. It’s also cross-platform and founder McCrae aims to keep it that way.
JanusML defines a way to load Assets such as images, audio, three-dimensional models, and more. You can then define coordinates and other attributes for them within the Room tag in order to build a three-dimensional space through which you or anyone else with an internet connection can navigate.
Here’s a quick example of what this code looks like:
<FireBoxRoom>
<Assets>
<AssetObject id=“moon_obj” src=“http://vrsites.com/assets/moon.obj http://vrsites.com/assets/earth1.jpg” tex_clamp=“false” />
<AssetImage id=“bert_img” src=“http://vrsites.com/assets/bert.jpg” />
</Assets>
<Room use_local_asset=“room_1pedestal” col=“0.5 0.5 0.5” pos=“0 0 0” fwd=“0 0 -1”>
<Object id=“moon_obj” pos=“0 3 -10” fwd=“0 0 1” rotate_axis=“0 1 0” rotate_deg_per_sec=“3” />
<Image id=“bert_img” pos=“-9.5 2 -10” fwd=“1 0 0” />
</Room>
</FireBoxRoom>
This code presents a room that looks like this:
JanusVR represents you and any other user with an avatar chosen by default. Through the use of a open source multi-user server written in NodeJS, you can see other people’s avatars within these spaces and interact with them. You can download and run the janus-server code on your own server if you want and then specify the address of your server in your JanusML’s <Room> tag with the server attribute.
JanusVR also has a basic editing mode which allows you to collaborate on building these 3D spaces with the people you meet there. Take a look at some of the JanusVR Basics written up on VR Sites. There’s also basic JavaScript support for scripting your rooms. I’ve done a little experimenting with this in the form of a scavenger hunt for which you can see the code here or you can experience the 3D version in JanusVR by downloading Janus and entering this URL: http://bitgridio.github.io/LullabotVR/lullabot.html
A Dedicated Community
The JanusVR community mainly communicates via r/JanusVR (a subreddit forum) and via a Mumble server (for voice chat). The Mumble server is the current voice channel for the community until voice is built into Janus itself. New releases are announced on the Reddit forum and bug reports and feedback are discussed there as well. We also have an IRC channel on free node at #janusvr and #vrsites, and don’t forget to follow @officialjanusvr on twitter.
Everyone I’ve met in the community has been helpful and willing to take time to show me around the hundreds of rooms that have been built for Janus. I’ve been given advice on optimizing a Janus room, learning JanusML, and modeling with Blender. To get involved, begin with the following sticky post on the subreddit.
One of the first things I found while wandering around within JanusVR was that there was some dedicated hosting for JanusVR rooms called VR Sites. VR Sites is a hosted sandbox where you can upload assets and edit your JanusML. This was a fairly simple PHP system that allowed people to upload assets and edit some basic HTML files in order to create their JanusVR rooms. It made it quick and easy to get started without needing to run my own web server.
I soon got in touch with u/qster123 and started talking about hosting. As it turned out he was looking for help in maintaining the site and I soon convinced him to switch to Backdrop. We rebuilt most of the functionality in about an hour with Backdrop. We have a few more things on the roadmap, but overall it’s been an excellent experience working with qster123 and Backdrop both. To help out or get involved, drop me a line at u/sirkitree or in any of the other places previously mentioned.
What The Future Holds
The JanusVR community is still experimenting, brainstorming, and figuring out what the future holds for this new medium. We’re exploring possibilities for enterprise clients and how to present content in a three-dimensional space. Potential use cases include demonstrations of software and products in virtual spaces, educational VR field trips to faraway places, business and social collaboration, and even gaming. We’re discovering the current limitations and learning new skills such as 3D modeling and what UX means in such a world. If you’re interested in joining us, please contact us in one of the many mediums I’ve mentioned above. We can’t help but look forward to the future, and we hope you’ll help us bring it to life.