The Design And Implementation Of Panorama 3D Tour Based On WebGL

With the rapid development of Internet industry, the continuouse improvement of business complexity makes 2D graphics not meet the needs of the program. Especially in the rental market and decoration market, people are gradually tending to watch the structure and style of house by 3D scene as if they were inside. There are many deficiencies in the early 3D graphics technology like Java Applet and Flash, such as taking up more resources, lower performance, worse platform compatibility and so on. WebGL technology can realize 3D scene with higher efficiency, and overcome those disadvantages that exists in the traditional 3D panoramic technology like compatibility, high cost and high threshold. However, nowadays most domestic panoramic products are simple picture switch, not achieving the effect of walking in the panorama as if people were inside. On the whole, with the independent 3D scanning algorithm, this thesis designs and implements the panorama 3D tour system through WebGL, providing walking experience.In this thesis, the panorama 3D tour system includes viewing panorama subsystem. Processing captured image data subsystem and model manage subsystem. Viewing panorama subsystem can help users view panorama pages, free to walk inside and interact with the labels. According to functional module divison principle, it can be divided into query processing module, data processing module and page display module. Processing captured image data subsystem can help customers scan and generate panorama model, and it can be divided into data processing module and automatic stitching picture module according to functional module division principle. Model manage subsystem can help users manage panoramic models, and add other functions like label in panorama based on coordinate data of model. It can be divided into data access module, action module, event dispatch module, data processing module and page display module. This system adopts React and Redux framework to build the frontend, and in the backend builds the service with NodeJS and express in Docker container, using MongoDB database to store data with the format of documentation. I am mainly responsible for prototype design and the implementation of viewing panorama module and model manage module in this system.First, this thesis elaborates the background of panoarama 3D tour system and current situation of this field. Secondly, this thesis introduces the techniques adopted in the system and their importance. Then this thesis describes the business process and project needs, and shows the design and implementation of each module.