The immersive experience!

What is HTML5?

Apart from the fact that it's a buzz word:

HTML5 is the current framework for a large range of extensions to earlier HTML standards. We still expect that the use of HTML will stay as dynamic as it was in the past. There are some more or less precise recommendations by W3C, WhatWG, and other organisations, and still much space for browser specific innovations.

The article describes some HTML5 features available in the fields of graphics elements, touchscreen input and motion detection which were useful for implementing the Panorado JS viewer. To get this overview, some current browsers needed to be investigated one by one.

The Canvas Element

Canvas is an HTML element which allows drawing operations to be performed at runtime, controlled by JavaScript code.

Canvas supports rendering primitive graphics elements, as well as bitmap elements like sections of large panoramic images.

Current Canvas implementations offer 2 so-called contexts which are radically different:

2D: Supports simple 2-dimensional rendering and transformations. Implemented by all HTML5 compatible browsers.
WebGL: Supports 3-dimensional rendering, using graphics hardware according to the WebGL standard defined by the Khronos Group. This enables very fast rendering. Currently, most browsers support it accurately.

Touchscreen Input

This is currently an issue for tablet computers, mobile tablets and smartphones. Unlike mouse input on traditional computers, touch input needs to be interpreted very carefully: Touches can refer to a certain visible element on the screen, but can also be meant as gestures to flip pages, scroll, or zoom the current page.

The good thing about touch input is that it is detected by virtually all mobile browsers. The bad thing is that some browsers have implemented proprietary interfaces which differ significantly from the W3C recommendations. Another problem: Parallel handling of input events and time-consuming graphics rendering seems to be a real challenge for some browsers on older mobile devices.

Device Motion

virtually all current mobile devices are equipped with gyroscope/acceleration/magnetometer sensors. In theory, data from these sensors could be used to interactively control visual website content. In practice, our tests on Android devices showed that it makes sense to rely on the deviceOrientation API in conjunction with window orientation detection, not on the deviceMotion API. Since the times of Android 4.0, there have been significant improvements in hardware and software.

The inaccuracy of magnetometer data (compass) is still an issue which cannot be fully compensated by software.

At least, all browsers tested made use of the same W3C interface definitions.

In the meantime, device motion data which is available within browsers is now sufficient for providing a realistic 3-D impression when you look at a panoramic scene with a VR glasses/smartphone array. You may watch the VR samples in our Panorama Gallery to get an impression.

Mobile Devices

We are currently witnessing a significant shift of user experience - away from traditional computers (desktop, notebook) towards small mobile devices (smartphone, tablet). Web publishers habe to be aware of this. For developers, there are some significant differences:

Traditional PCs: Apart from some older netbooks, they are equipped with powerful (Intel) processors plus powerful graphics hardware. Normally controlled by keyboard, mouse or mouse-like touchpad, not by touchscreen input. All popular browsers perform quite fast and stable.
Mobile Devices: The preferred way of input is touching the screen with fingers. Quality and performance of newer devices are comparable to desktop computers, while older devices impose some restrictions by slow processors and some browsers are not yet implementing WebGL rendering and touch input perfectly.

Browser Compatibility

This table is a summary of test results for 14 different operating system/browser combinations.

I like to emphasize that the selection of browser/os combinations is far from being complete, and that all results are just snapshots. Results have changed with many upcoming new browser version in the past, and we don't expect this to change in the future.

Recent tests have proven these OS/browser combinations as suited for Panorado JS:

Windows 7+:Microsoft Internet Explorer 9+, Microsoft Edge, Mozilla Firefox, Chrome, Opera
Android 5+:Chrome, Opera

Outlook

We are expecting further quality, stability and performance improvements of mobile web browsers in the near future. Hardware performance of new mobile devices is also likely to improve.

Development of OS-specific apps is tedious, and the web is the common platform of almost all users anyway. Thus, it's a good idea to use the new HTML5 features for interactive graphics applications like Panorado JS.