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?
VR is disrupting industries like Gaming, Real Estate, Zoo, Fashion, etc.
How big is the addressable VR 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.
Below is Equirectangular version of the above image.
This is how a cubemap looks
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°.
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.
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
