Keywords

1 Introduction

With the development of computer technology in all aspects, the way objects are displayed has undergone tremendous changes. With the development of artificial intelligence technology and the rise of the Industrial IoT, ordinary 2D image systems can no longer meet people's visual experience and the needs of the industry. Therefore, Web 3D technology emerges as the times require. In the process of continuous development and iteration of Web 3D technology, many 3D visualization frameworks with high application value have emerged, including WebGL (Web Graphics Library) and so on. WebGL has become the mainstream 3D visualization framework on the market with its powerful performance, plug-in-free features, and the support of major browser manufacturers. The emergence of WebGL and HTML5 (HyperText Markup Language 5) provides conditions for high-performance OpenGL (Open Graphics Library) rendering and Web browser integration [1].

WebGL can provide hardware 3D accelerated rendering for HTML5 Canvas, so that web developers can display 3D scenes and models more smoothly in the browser with the help of the system graphics card [2]. However, WebGL contains a lot of matrix transformation and computer graphics operations, and its underlying API encapsulation is very low, which has disadvantages such as difficult application development, complex calculation process, and low fault tolerance.

The emergence of Three.js technology has largely solved this series of problems and has become the most popular 3D development engine. Three.js simplifies complex interfaces and structures data by encapsulating WebGL [3]. Taking warehousing management as an example, this paper independently develops a 3D intelligent warehousing visualization system based on Three.js. It models and renders the real scenes of each warehouse area, which can not only display the situation of each warehousing location clearly and intuitively, but also connect the data interface of the IoT device with the 3D model to realize 3D data visualization. The system has a high degree of 3D visualization, real-time information sharing, and integrated solutions for cargo, environment, security, fire protection, and other aspects. This paper mainly introduces the related technologies used in the system and the system research and design scheme, and analyzes the system performance and application prospects.

2 Key Technology

The 3D intelligent warehousing visualization system designed in this paper is composed of two parts: the server-side and the client-side. The main technologies used by the server are Spring Boot and database to realize database interaction, user event processing, IoT data interface configuration, 3D file storage, etc. The main technologies used by the client are HTML, JavaScript, and Three.js, which mainly realize the functions of 3D scene display and jump, loop rendering, and data visualization. The system’s technical framework is shown in Fig. 1.

2.1 WebGL Technology and Three.js Engine

WebGL is a 3D drawing standard that allows JavaScript and Open GL to be combined, so that JavaScript programs running in the browser can take full advantage of hardware-accelerated 3D rendering [4,5,6]. In this way, developers can use the system graphics card to display 3D scenes and models more smoothly in the browser.

Three.js is a 3D drawing framework based on WebGL architecture, which is written in JavaScript language and is a JavaScript library for secondary encapsulation and extension of WebGL [7]. Through its built-in 3D engine, it can create various objects including orthogonal and perspective cameras, tween animations, geometry, light and shadow lines, and various 3D scenes in the browser, and can provide many 3D interactive functions. Three.js has a higher degree of integration and extensibility, making 3D drawing and construction easy [8]. Therefore, this article uses Three.js as the rendering engine for system development.

Fig. 1.
figure 1

The system’s technical framework

Full size image

2.2 3D Model Production

Blender is a multi-platform lightweight and all-around 3D animation production software. Therefore, this system chooses the lightweight software Blender as the device model creation tool, and uses the glTF file format. glTF (GL Transmission Format) is a web technology based on modern graphics cards, especially a new technology designed for WebGL technology [9]. The glTF format reduces the related loading processing code procedures, accelerates the loading efficiency of 3D models, but also relieves the constraints of 3D model plug-ins [10]. Therefore, this system uses the glTF model and makes full use of its advantages. The specific steps of making the model are show in Fig. 2.

Fig. 2.
figure 2

3D model building

Full size image

3 System Architecture

The 3D intelligent warehousing visualization system architecture designed in this paper, which includes the data layer, processing layer, and application layer.

The data layer realizes the invocation of data such as warehousing information, video surveillance data, smoke alarm data, fire equipment inspection data, and temperature and humidity sensors in the database through the interface; The processing layer performs data processing, format unification, and data processing on the operation and maintenance data, and realizes the real-time statistical function of various types of operation and maintenance data; The application layer uses the Three.js 3D engine to associate the data with the scenes, models, labels and other information of the 3D display environment to realize the visualization of various operation and maintenance data information, thereby realizing the overall monitoring of warehousing management.

4 System Function

The 3D intelligent warehousing visualization system is a real-time warehousing monitoring and management system based on 3D models and IoT devices. It can clearly and intuitively display the status of cargo inventory and IoT equipment, provide managers with clear and intuitive storage information, improve the efficiency of management and scheduling, and provide customers with convenient query service functions.

The system includes five functional modules, namely warehousing data visualization, device data visualization, security monitoring visualization, visualization of roaming in the warehouse area, and visualization of inventory increases and decreases, as shown in Fig. 4.

Fig. 4.
figure 3

System function

Full size image

4.1 Warehousing Data Visualization

This functional module includes three functions: model visualization in the library, inventory information visualization, and inventory information statistics, to realize the visualization of warehouses, goods, and other data, so that managers have a clear and intuitive display of inventory data. The visualization effect of warehouse data is shown in Fig. 5.

  1. 1.

    Visualization of the model in the warehouse: The system can display the status of the warehouse and goods in a 3D visual environment. Managers can move or rotate the mouse to realize multi-directional viewing of the goods in the warehouse, which is conducive to the overall management of the warehousing.

  2. 2.

    Inventory information visualization: Managers can click on the goods in the warehousing location, and can view the inventory information such as the name, quantity, attribute, model, etc. of the goods in real-time.

  3. 3.

    Inventory information statistics: The system can display the currently used warehousing locations and the remaining empty warehousing locations in the warehouse, and improve the scheduling efficiency by calculating the warehousing location utilization rate.

Fig. 5.
figure 4

Warehousing data visualization

Full size image

4.2 Device Data Visualization

Device data visualization includes two parts: infrastructure visualization and IoT device data visualization. It displays the IoT and infrastructure in real-time and enables managers to have overall control over warehouse device data. Device data visualization is shown in Fig. 6.

Fig. 6.
figure 5

IoT device data visualization

Full size image
  1. (1)

    Infrastructure visualization: Through 3D modeling, the actual conditions of infrastructure and IoT devices such as buildings, vehicles, gates, containers, and cranes in the reservoir area are restored with high precision.

  2. (2)

    Data visualization of IoT devices: The system utilizes real-time data transmitted from temperature and humidity sensors, smoke alarms, and fire-fighting equipment in the warehouse. Accurate and real-time information on IoT devices in the warehousing greatly improves security.

4.3 Security Monitoring Visualization

3D modeling is performed based on the location of the camera distribution in the real environment, and managers can interact to obtain real-time monitoring video for security inspection. When the user clicks the corresponding camera on the screen, the monitoring image at this time can be browsed in real-time by using the interface protocol of the network camera. The content of the page is the real-time monitoring image in the current real environment. After the user completes the browsing operation, the user can click the corresponding exit button to exit the monitoring video page. The visualization effect of security monitoring is shown in Fig. 7.

Fig. 7.
figure 6

Security monitoring visualization

Full size image

4.4 Warehouse Area Roaming and Inventory Increases and Decreases Visualization

The two functions of roaming visualization in the warehouse area and visualization of inventory increase and decrease enable managers to quickly locate the location of goods, make inventory data changes more intuitive, and make warehouse management more efficient.

Warehouse area roaming visualization: this function mainly simulates the real user's first-person perspective, and the user realizes roaming by clicking on the ground in the scene. By judging the position of the user's click, the system jumps to the camera's perspective and controls the browsing perspective to roam around the scene in the warehouse area.

Fig. 8.
figure 7

The “blinking light” effect

Full size image

Inventory increases and decreases visualization: Through the monitoring and analysis of the inventory information of each warehousing, the system realizes the simulation of the entry and exit of the corresponding warehousing location according to the change in the inventory information of the goods. For example, when the warehousing location data decreases, the system displays the goods in the warehousing location as a “blinking light”, as shown in Fig. 8, and the goods in the warehousing location disappear.

5 System Test

The client configuration is: the CPU is Intel(R) i7-7700K, 4.20 GHz; the RAM is 16 G; the GPU is Intel(R) HD Graphics 630, and the server is the configured same as the client. The system can be used normally on current mainstream browsers such as Chrome browser Microsoft Edge browser and Firefox browser, the rendering effect is shown in Fig. 9.

Fig. 9.
figure 8

Rendering effect of the 3D warehouse area model in the browser

Full size image

In the functional test, each functional module of the 3D intelligent warehousing visualization system is tested. The test results show that each module can basically operate normally, but in some cases, the system may experience a slight stuck.

This system performance test is mainly tested from three aspects: average interaction response time, average rendering time for 3D warehouse scenes, and average rendering time for warehouse outside scenes. When the user uses the system, the response time of an operation should be within 6 s. If it exceeds 6 s, the user experience will be affected. From the results in Table 1, it can be seen that the performance of the system is better.

Table 1. System performance test.
Full size table

6 Conclusion

With the continuous deepening of the concept of “intelligent warehousing”, providing users with intelligent and efficient warehousing solutions will surely become the mainstream development direction of the warehousing industry in the future. The 3D intelligent warehousing visualization system adopts the Three.js class library based on the WebGL standard, imports the 3D model into the system to construct the 3D scene, and realizes the visualization of the IoT device data by combining it with the IoT device data interface, and finally controls and interacts with the scene through JavaScript script. And so on. This system involves the management of materials, environment, security, etc. It can not only accurately and effectively grasp all aspects of warehousing management, but also improve the efficiency and quality of warehousing management, so it has great application prospects.