The Research On Panorama Technology Based On HTML5

The roaming technology could implement virtual roaming on the network. Attributed to its impressive interaction and immersion, the roaming technology is popular with plenty of people. However, most of the traditional technologies like VRML, QuickTime, Flash have some shortages, including vary formats^different standards、 plugin-dependence、 closeness、 limited platform supporting and others. In recent years there have been a few panoramic roaming solutions based on HTML5which could relieve the above problems. But there are limited platform simple functions and weak versatility of the system, which is not conducive to expansion. Considering the above situations, this paper has designed and implemented a panorama system mainly based on WebGL library file three.js in HTML5framework combined with many traditional roaming technologies and some other panoramic roaming solutions based on HTML5.First, we could use panoramic head to achieve the collection of panorama scene pictures, whose stiiching and processing implementated by software tools such as PTGui and Photoshop, then the preparation of the cube panorama pictures could be completed by some segmentation softwares and batch files. The system is mainly based on WebGL library file three.js in HTML5framework, and users could operate the horizontal and vertical free viewing、 translational movement and scaling view with mouse, which brings realistic visual effects in the panorama roaming scene. The rich function and interactive options are operated by Javascript, Jquery, CSS3and other Web development technologies, embodied in the navigation hotspot map module and navigation menu module. The sliding in and out of the navigation map is controlled by navigation icon, and switching to different scenes could get help from the hot spots on the navigation map and the speech recognition provided by HTML5; Navigation menu section contains a full-screen display option、the neighboring scenes switching optiom zooming option、 audio commentary option、 picture wall by CSS3and so on. It could support user access in offline state. Through the concrete realization of the above functions, the system could provide a rich user experience.The panorama scene is created by three.js which could solve the technical bottleneck of the panoramic roaming which needs plugins supporting to create some panorama effect. Taking into account the system integration, the system also innovatively introduce some scene interactive effects made by many web development languages and some emerging HTML5features, which has fully embodied the technical advantages of HTML5. We could display panoramic scenes directly in the browser without some specific formats to ensure the independence of the system, In all, the system is free, relatively fully functional, and also contains faster transfer rates, less resource consumption, resource utilization and more comprehensive elements.From the test results, we can see that the normal functions of each part of the system could be achieved on the whole, except for some unprocessed details, and the source code of this system would be open, supplying a good chance for other staff to learn it in depth, in order to promote the development of the roaming panorama technology together.