WebVR: A glimpse
“I dream. Sometimes I think that’s the only right thing to do.” ― Haruki Murakami, Sputnik Sweetheart
Web Virtual Reality or WebVR began as an experimental API in Mozilla back in 2014. Right now teams from google and microsoft have joined the development. (see webVR specification).
Main points:
- We can taste webVR simply on a web browser, (check this site to see if yours is compatible),
- Sharing the experience is easy, just copy the link and send it to your friends.
- We don’t need an SDK, There are webVR frameworks to ease our lives, such as A-frame, that is pretty awesome.
- We can write webVR apps with just HTML5 if we use A-Frame.
- The requirements of your machine don’t matter that much, webVR adjust itself and renders the experience the best it can.
- You can see the apps in mainstream virtual reality devices too.
ReactVR is another javaScript framework to build webVR apps, is based on React. See the video below to know more about this.
Projects and companies about webVR or somehow related to webVR:
- Matterport, has a 3D gallery that you can explore.
- Sketchfab, is a website where you can share and view 3D scenes.
- Vizor, also a website to explore 360 content, for example architecture designs.
- You must checkout Google’s WebVR experiments, you could test an app and see the source code on github!, I like these: Musical forest, Konterball, Speak to Go (see this on Chrome).
Now, let’s see a bit about that awesome tool we just mentioned: A-frame.
- A-frame is a framework to build VR scenes just using HTML, it is developed by the mozilla VR team, MozVR.
- Because of HTML, the generated code can be manipulated by designers and web developers that don’t have any experience in WebGL (web graphics library).
- A-frame library is compatible with other libraries such as React, Angular, etc.
- A-frame uses the entity-component-system that is architectural pattern used in game development. An entity is a general object, that is made by components that give said object its functionality and its looks.
Ok, we are going to see how easy is to do a hello world app in A-frame below.
In the A-Frame site, https://aframe.io, they give us several examples, we can also see the source code, they already have a basic app called “Hello WebVR”, you can see it by clicking this link.
In your browser you should be able to see this:
As we can see, it’s just an scene of a plane having a box a sphere and a cylinder. Let’s review the source code:
That’s all. Cool, right?
To be able to add VR content into your HTML file in the head part you add the script to reference the Javascript library:
<script src="https://aframe.io/releases/0.5.0/aframe.min.js"></script>- In your body tag, you need to add the tag <a-scene> that works as a container in which with your VR scenes will be.
- The <a-box>, <a-sphere> and <a-cylinder> are some of the primitives. Primitives are entities that have components with default values. These primitives will display a box, a sphere and a cylinder respectively.
- The <a-plane> tag is just a flat surface.
- Finally the <a-sky> tag is the 360 degree background of your VR scene.
Now, you have a starting point, if you want to go deeper, visit the documentation and play with the given examples, you can modify them by clicking view source code, that will take you to the glitch.com site, then there you do your magic, copy the link of your app and share it with everyone. Or you can use the wonderful Visual Inspector, just by clicking the Visual Inspector button, and modify some of the examples, for instance I changed the HelloVR example and I added another cube:
It is so beautiful that I shed a tear when I saw it. Really.
Lastly, because I’m 100% into vaporwave, synthwave and Bixlabs I made a meaningless modification of the text of the kickass A-frame example: Hello Metaverse.
And this is the result: https://outrageous-money.glitch.me (I barely do something…)
I would also like to recommended this introductory book: Learning Web-based virtual reality , they give us an example of a hello world app, following the steps this is what we got: https://spice-condition.glitch.me
Play and have fun!
