What do you understand by Virtual Reality on HTML5

vineesh

Virtual Reality is on its way to future. It gives us an experience of greater magnitude. We can take a look at how html5 can incorporate VR experience. We know that html5 is gonna be future of the web. With the ES6 of Javascript and Hardware accelerated CSS3 rendering, the web is on its way to far further than the original inventors thought of.

Virtual Reality and 360-degree experience.

VR and 360-degree experience shall become a cardinal pillar of entertainment/gaming industry in the future. VR Headsets, Cardboard, Controllers all are out in the market. On the other hand SDK’s like Oculus, Samsung GEAR VR, Unity is backing software technology. Despite all of these, we know that web or html5 is something that’s having a huge market share in the planet. Most of VR technologies are tightly bound to native environment of the device. But native environment brings a sort of restriction as you move across a platform. And in this new world, people are trying to bring a unified platform for development. No doubt, html5 is a great platform to do that.

HTML5 and VR

Direct support for VR on html5 based devices is limited these days. However, we could expect these things in the future. Yet there are few awesome frameworks and libraries available for this experience.

1
krpano

is one of the frameworks we can use to create 360 / VR experience.

360 Videos eBook

Popular 360 Players

-KR Pano
      KR Pano is pretty much the world’s most versatile and amazing panorama viewer. If you don’t mind messing with XML and you fancy yourself a decent web developer, look into krpano and consider the option of building your own UI template for it. Supports video play, Audio play and Image viewer.

-Video
      The first thing we notice is that they must have a talented UX designer because navigating and using this service is incredibly easy and intuitive. You can easily browse trending videos or browse popular channels and videos by category. Adopted some of the key features from KR Pano.

-Little star
      The player itself is fairly basic, offering some projection options and zooming. Particularly we’re excited to see a little planet projection mode. As of the time of writing, they don’t support resolution switching in the player or a VR display mode, although they’re testing native VR support.

-JW Player
      JW Player provides video professionals with powerful and flexible technology for reaching viewers, growing audiences, maximizing revenue, and perfecting your video strategy across all screens. Works well with JW Streaming server.

-Bit Movin Player
      An intelligent and intuitive Adaptive HTML5 Video Player supports adaptive streaming.
      Does not support hotspot or any interaction over the video. Looking forward to this feature in 2017.

Why KR Pano

-krpano delivers high-performance rendering and high-quality images.
-krpano is the ultimate customizable viewer.
-Everything has settings and it’s possible to add a custom setting or custom behavior too.
-krpano has a wide-range of supported panoramic formats and image file formats.
-Large images can be viewed quickly due to the multi-resolution feature. It splits the image into little squares at several levels of zoom.
-It can handle hotspots, maps, thumbnails, select boxes or any other custom actions which allow making complex virtual tours.
-Supports hotspots on images and videos.
-Supports movable hot spots in videos [ This is one of key feature in KR Pano ]

KRPANO [https://krpano.com/]

krpano is a web framework that we can use to for a variety of purposes like.
-360 degree VR Experience
-360-degree video
-360-degree images
-hotspots in images and video
-panoramic views
-sound interface
-blending between scenes

Despite these effects, krpano has it’s on scripting language which makes it very powerful and customizable.

Getting started with krpano

krpano is available free for download, but you may need a license to publish or remove watermark from your project.

Installation

Once you pull out the setup, it’s fairly straight forward. Extract the folder in desired location, and you are done.

Running

It’s always better to put it on your local server, and serve it there.

Scripting

Krpano uses XML based scripting. And there is separate syntax developed for the tool. All the documentation of scripting is provided here, https://krpano.com/docu/actions.

Creating your own virtual tour.

Creating virtual tour is much easier with krpano, even without coding. On the other hand with coding, you can do much more tweaking and other things.

Examples

-With the krpano you have downloaded, you will get a bunch of examples.
-It can be a server on your local server to view.
-All that examples are hosted online here

Limitation

We know that VR and 360 experience are still in evolving stage. Krpano has few limitation on mobile devices like.
-Autoplay of media isn’t possible unless user interaction is detected.
-High resolution 360 videos are not supported in ios device because of a bug in safari.
-Devices without gyroscope can’t get gyro feature.
-The sound is a bit delayed in mobile devices.

Conclusion

Despite its limitation, krpano is a great tool to get started with 360 and vr experience on html5. Moreover, the scripting allows us to tweak it to a greater magnitude. And the extended support across different kind of devices make it a handy tool for quick deployment.

Virtual reality

about the author

vineesh