WebVR is still not easy. What if we could change that?

Bringing VR content creation to the web online, WebVR has transformed the process of 3D content creation & sharing to an easy one. With WebVR, you can open up a browser and experience the VR content simply by accessing a link. The concept of WebVR was brought to the world pretty recently.

WebVR is a set of APIs that lets the websites render content to VR headsets, such as the HTC Vive, Oculus Rift, Google Cardboard or OSVR in a web browser.

The Roots:

The term “WebVR” came into existence in late 2014. The Mozilla team was the first one to coin the term. They proved that WebVR and Firefox are apt to deliver a low-friction VR experience. Installing-free VR experience built on an open web stack was made accessible then. They further moved on to create easy VR authoring sites. This made creating VR on the web an easy task. Thus a framework for building VR experiences- A frame was decided upon. It was built on Three.js (3D JavaScript for engines and libraries). On March 1, 2016, when Mozilla along with the collaboration of Google Chrome, announced the launch of version 1.0, WebVR API.

VR Headset: Mandatory?

These devices are one of the basic amenities for experiencing the immersive world. There are quite a number of options available in the market. A few prevalent ones being, Occulus Rift, Occulus Go, HTC Vibe, Samsung Gear etc.

The WebVR apps/games perform in the same way as any other VR content/experience. The headsets are preferred, as they ensure a full immersive experience. But currently, many apps provide a choice between a headset and your phone. For WebVR application & implementation, the most important amenity is the web browser.

Browsers Supported.

Almost all the prevalent web browsers support web VR content. To name a few: Chrome, Mozilla, Microsoft edge.

With more and more web-browsers supporting VR content, WebVR browsers & VR first browsers are facing high acceptance among the general public.

The difference between WebVR browser & VR First Browser

WebVR Browser:

They are the major browsers that have enabled the standard WebVR API specifications. Browsers such as: Google Chrome, Mozilla Firefox, Microsoft Edge, and Samsung Internet are included in this category. While using a WebVR API enabled browser, as you go about experiencing a 2D content, you will be able to experience & interact with the 3D content too. It is offered by the WebVR gateway (magic window). A Magic Window enables the users to view 360º content without a VR headset .This will permit you to respond & interact with the content through different positioning and movement of your mobile. You can then utilize your 3D headsets to experience full immersion.

VR First Browser:

One of the recent examples of a VR First Browser is the Oculus Browser. It can be experienced only inside a VR headset. When the user is viewing a 2D website, the appearance will be in a two dimensional flat plane. Although, if a WebVR version is available, the user can use the “Enter VR “button to shift into the VR space. So, the two different approaches have a big impact on how user navigate

Making WebVR content:

To create WebVR content, there are various new API’s and technologies (WebGL and Web Audio) available. We can utilize various WebVR APIs to furthermore enhance simple scenes created in WebGL using Three.js.

Creating WebVR content using WebGl & Three.js:

• Preparation: Deals with creation of index, main & style files. This also includes utilizing libraries like three.js to access additional scripts.
• The Scene & Rendering: Three.js uses the concept of a display list. All objects are drawn to the screen after being stored in the list. You may also need to add more objects as you want them to be drawn on the screen to the scene. You can have as many scenes as you want. A renderer however draws the scene one by one. Everything is drawn from the scene to the Three.js canvas.
• Adding an object: Three.js enables the objects to be drawn on the screen using meshes. Each mesh has its own geometry and material. Geometry is a set of points joined to create the object whereas material pertains to the colour of the object.
• Adding a Camera to the scene: Before rendering, we first need to add the camera to the scene, to understand the point of view for rendering.
• Adding light: The skybox technique is used to add background to a scene. It is basically nothing but adding a big cube to the background.
• Adding Movement: By adding a render loop to our app, we can add movement to it as well.

With the description, it is pretty evident that the procedures sound too development-centric rather than an easy one. To make them, more consumer-approachable we need to make it less complex.

That’s where we come in.

Scapic is building the foundations of the next iteration of the internet broadly called the Immersive web. We are focused on bringing the promise of the Virtual and Augmented reality to storytellers, creatives, businesses and everyday users. The Scapic platform provides a suite of dead simple tools needed for anybody to build their own experiences in VR/AR in a matter of minutes. At Scapic, we make creation of a VR content as easy as making a PowerPoint presentation and we can’t wait to see the things you create.

Check us out at Scapic

🎉