VR first!

Vaibhav7779/ February 12, 2020/ Engineering

Is VR going to change the way we consume web content?

Virtual reality will alter the way we experience and interact with technology. WebVR has the potential to revolutionize the way we use the web. It allows users to experience VR through a web browser. We can say that the future belongs to immersive experiences.
And it is the time where we have to start following VR first approach instead of Mobile first.

Why is web a Big Deal in VR ?

  •     Infinite content on Web will make WebVr a real deal
  •     Room-scale VR redefines design paradigm
  •     Interactive 360° experience 

How big is the VR market?

Zoom chartoftheday_6677_the_worldwide_virtual_reality_market_is_set_to_be_huge_n.jpg
VR Market

VR is disrupting industries like Gaming, Real Estate, Zoo, Fashion, etc.

How big is the addressable VR market?

Zoom edui-the-future-of-vr-and-the-web-25-638.jpg
VR addressable Market

When this huge user base will meet infinite content of web possibilities will be endless.

How we will consume VR content?

Nothing to install, no waiting for content to load. WebVR makes it seamless.

Enough about numbers! Lets see the technical side of VR

Why VR on the web?

  • No downloads required, experiences are a click away
  • No large IDE required for development, just a browser and text editor
  • Cross-platform
  • Use tools web developers know (js/npm/jQuery/typescript/etc)
  • Desktop/Mobile/PWA

The Expansion of WebXR

The WebXR Device API provides access to input and output capabilities commonly associated with Virtual Reality (VR) and Augmented Reality (AR) devices. It allows you develop and host VR and AR experiences on the web. All major browsers are now providing their VR first browsers. 

Browser Support for VR

  • HTC Vive: Firefox, Servo, and Supermedium (Windows / Firefox Nightly (MacOS) 
  • Oculus Rift: Firefox, Servo, Supermedium, Chrome (Windows)
  • Samsung Gear VR: Oculus Browser, Samsung Internet, Servo
  • Daydream: Chrome, Servo
  • Google Cardboard: Chrome
  • Windows Mixed Reality headsets: Microsoft Edge / Firefox and Supermedium via SteamVR
  • PlayStation VR

Ways to create 360° images

To create 360°  experience images can be achieved in 2 ways

  • Equirectangular : Which can be achieved by either a 360° camera or stitching 2 fish-eye lens images.
  • Cubemap : 6 images are stitched to together

We will use the following image as an example.

Zoom plane.jpeg
plane.

Below is Equirectangular version of the above image.

Zoom equirectangular.jpeg
equirectangular

This is how a cubemap looks

Zoom cubemap.jpeg
cubemap.

What’s exciting in the world of VR ?

360° Photos :
  Ever thought of sharing your posts in 360°? Facebook now lets you click and share your photos in 360°.

Zoom ezgif.com-webp-to-jpg.jpg
Fb 360 93.6 KB View full-size Download

Will it be relevant to our matchmaking domain?? Well, let’s wait and watch.

Foveated rendering :
    
Cameras inside a headset precisely and quickly track the position of your pupils, enabling the GPU to know where it needs to focus its rendering resources — and where it can skimp. Area, where foveal point exists, is rendered in High resolution however area which is in peripheral vision is rendered in low resolution. AI is used to formulate possible pixels in peripheral by which it needs to render only 10% of actual pixels

How to build our First VR application.

Let’s try a sample app with React 360°

npm install -g react-360-cli
react-360 init Hello360
cd Hello360
npm start

then just open http://localhost:8081/index.html . It will look something like this.

Zoom react_360.jpg
react_360

That’s it, you have just written your first VR app in react 360. React 360 is built on top of react native. It has similar  component architecture like React Native eg. <View> <Text>

Here is a github link for a basic VR page
https://github.com/vaibhav7779/react-360-demo

“Soon there will be virtual reality, and augmented reality. If you assume any rate of improvement at all, then games will become indistinguishable from reality.” :  Elon Musk