Cross-Platform Drilling 3D Visualization System Based on WebGL

Abstract

This study develops a novel drilling 3D visualization solution based on WebGL, termed as WebDrillingViz, and introduces the system architecture design and software programming implementation. The software is part of the Engineering Technology Internet of Things (IoT) System, interfacing with other software, and also capable of direct hardware interfacing for data retrieval and system control. It is fully web-based, used real time, and used in RTOC (Real-Time Operating Center) of IoT system, which is a software system for drilling process remote monitor and decision. WebDrillingViz uses the most frontier HTML5 technology to realize a brand-new drilling 3D visualization system. The front end is designed in single-page application (SPA) mode and adopts technologies such as angular, bootstrap, and WebGL. The front-end uses single page application (SPA) mode, Angular, Bootstrap, WebGL and other technologies are used. The back-end data services provide data interface support for front-end visualization applications based on HTTP protocol which uses NodeJS, a lightweight development platform suitable for cloud platform, and Restify to realize a REST JSON API. Both sides are using the same object-oriented oriented development language—TypeScript. The front-end develops an easy-to-extend 3D visualization class library based on WebGL for drilling. It is encapsulated as Angular modularization to form an Angular component, which can be used standalone or integrated into other Angular applications. At the same time, the back-end microservice architecture combined with container and cloud technology is easy to maintain, deploy, and expand and has the advantages of being lightweight, cross-platform, flexible, and efficient. Using HTML5 standard and Bootstrap's responsive layout achieves cross-platform, which can support different operating systems and screen sizes. The system has better robustness and maintainability, thanks to the object-oriented and strong typing characteristics of TypeScript. Practical application shows that WebDrillingViz is efficient, capable of visualization of large drilling 3D scene, and compatible with mainstream devices, such as Windows, Linux, macOS, iOS, and Android. The use of open standards-based modern web technologies and data format enables a more lightweight and economical solution. WebGL, Angular, NodeJS, and TypeScript formed a powerful technology stack, which can be used as an excellent reference for other browser-based visualization development.