JavaScript/WebGL 3D Visualization of Iron and Steel Plant | Web HMI/SCADA
Tags: webdev, javascript, programming
Published: 2023-02-14 01:35:37

[[Click here to see more demonstrations including Digital Twins, GIS, VR, BIM, etc.]](https://www.hightopo.com/demos/en-index.html)

![Youtube](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/irwgut5u331su1qe4g4a.gif)
Click the below link to see the video:
[Iron and Steel Plant Management System ](https://www.youtube.com/watch?v=p6zYnU3zM7w)
In iron and steel smelting, from raw material procurement, coking and sintering, ironmaking, steelmaking, steel rolling, to finished products, the lengthy production process and complex operation scenes require more attention to the safety of personnel at the production site, and safety precautions and supervision throughout the day-to-day in the whole process of operation, get through the "last mile" of safety production responsibility.

With the gradual advancement of the informatization process of steel mills in recent years, UWB centimeter-level high-precision positioning technology has become the development trend of personnel/equipment positioning security in the steel mill industry.

**Effect Display**
Relying on the self-developed "HT for Web" product, Hightopo Software starts from the digital twin steel plant and highly concentrates on the steel plant area, equipment machinery, and operating personnel. And based on the UWB precise positioning technology, the location data is directly associated with the visualized business process, realizing the precise positioning of the 3D visualized monitoring workshop operators, traceability of historical traces, electronic fence supervision and abnormal early warning, and other business functions. Form a supervision platform based on UWB precise positioning, dispatch integration, data transparency, and intelligent operation and maintenance.

![Effect Display](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vvzgvepec9zovcp8udm6.gif)
The UWB positioning system is mainly composed of four parts: positioning base station, positioning label, POE switch/network cable, and server/positioning software. Enterprises deploy UWB positioning base stations in specified areas, and operators wear UWB positioning tags. They often adopt a multi-dimensional positioning mode that integrates 0-dimensional presence detection, 1-dimensional linear trajectory positioning, and 2-dimensional regional plane positioning. Through the positioning management background, the label position in the factory area can be accurately located in real-time. The management background integrates multiple business functions such as real-time location, running track, electronic fence, video linkage, alarm information, and equipment management, which greatly improves work safety and management efficiency.

**System Analysis**
The main scene of steel plant personnel positioning and safety management built by Hightopo uses the powerful rendering function of the self-developed graphics engine to restore and display the main structures of the steel plant area, hot rolling plant area, and blast furnace body with high precision in a lightweight modeling method.

![System Analysis](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yth75txxwhc1j2qz367j.gif)
"HT for Web" supports cross-platform, and mobile terminals can easily open scenes, and realize operations such as one-finger rotation, two-finger zoom, and three-finger translation of touch-screen devices, and users no longer have to worry about cross-platform interaction modes.

**Quick Navigation Visualization**
The panels on both sides of the visualized scene have a built-in multi-dimensional shortcut navigation function. By integrating multiple types of IoT data, various data sources such as personnel, equipment, and regional locations obtained by the link server are highly centralized and presented, so that the panel data is consistent with the personnel, equipment, and area in the scene, realizing digital map linkage. It is convenient for managers to accurately retrieve demand targets such as personnel, areas, videos, and electronic fences from the plant-level information data, and then issue instructions through the interface to achieve the purpose of remote real-time remote command and scheduling.

![Quick Navigation](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/a66n67yfg2knq83nfnke.png)
**Personnel Navigation**
The personnel navigation and search function can realize fuzzy retrieval, precise positioning, and detailed review of target personnel. After inputting the person's name in the navigation bar, the system recognizes the UWB positioning badge worn by the operator, and transmits the positioning information to the management background in real-time. The linked visual scene is automatically located in the area where the operator is located, and the trajectory of the operator is dynamically tracked in real-time. Cooperate with the pop-up 2D panel to inform the operator of basic information such as name, micro-tag ID, department, position, and area.

![Personnel Navigation](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tvctaf25m89w2pyu2ts4.gif)
**Historical Track Query**
While querying the location of personnel, it is equipped with a historical trajectory query function to query the historical trajectory of the target personnel at any time on demand. Select the start time, obtain the historical trajectory information of the target personnel, support double-speed playback and pause functions, and help managers accurately capture the main plot within a limited time. Historical trajectory query is applicable to various scenarios such as patrol inspection, operation situation analysis, personnel behavior analysis, and accident analysis.

![Historical Track Query](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/eemyje9bmnao6tipnwg4.gif)

**Electronic Fence Navigation**
The electronic fence navigation function provides managers with one-click positioning of the distribution of electronic fences in various regions. Select two search methods by entering the fence name or the area tree to obtain the number and number of electronic fences in the area. Click the corresponding number, the scene will immediately switch to the specific location, and check the real-time status of all target objects in the area. Managers can clearly grasp the distribution and setting status of electronic fences without frequently entering and leaving the factory area, so as to realize the traceability and planning of the whole life cycle of the anti-theft alarm system around the factory.

![Electronic Fence Navigation](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kamgir6o3n4xoqpcaver.gif)

**Area Navigation**
The emergence of the area navigation function is more conducive to the manager to quickly lock the operating area and the operating situation of the operating equipment. Enter the keywords of the specified area, switch to the preset specific viewing angle, and view the overall operating conditions and personnel safety behavior specifications in the area with a high-quality view, saving a lot of time for the manager to tour the factory area and improve the efficiency of production management.

![Area Navigation](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/q2ol8ra7ph7m36m10tpn.gif)

**Video Navigation**
In the past, the monitoring equipment in the factory area was scattered, isolated, and lacked perspective, which was not conducive to unified maintenance and management. To improve the effectiveness of safety management and control in all aspects of the factory area, "HT for Web" supports the seamless integration of various HTML5 multimedia functions, and links various security subsystems to carry out dynamic security monitoring of blast furnaces, casting machines, heating furnaces, rolling mills, and other areas. Enter the number, name, and other attributes in the navigation bar, jump to the corresponding area and click the flashing logo in the scene to view the monitoring screen of the corresponding area. Video images can be accessed anytime and anywhere to meet the monitoring needs of managers such as quick retrieval of video surveillance of current scenes, historical retrospective comparison, etc.

![Video Navigation](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4l5zcp20zppte15gwr2p.gif)

**Abnormal Alarm One-key Positioning**
The environment of the steel plant is complex. If a foreign visitor or operator is negligent, they may mistakenly enter the equipment maintenance area, high-altitude operation area, or near the large-scale equipment operation area, and the consequences will be disastrous.

As a centimeter-level high-precision personnel positioning technology, UWB is deeply integrated with the Hightopo visualization scene. According to the positioning coordinate data transmitted by the UWB positioning system, the personnel SOS alarm, micro-tag low battery alarm, and unaccompanied operation alarm are presented in real-time in the scene. Location information is triggered by factors such as electronic fence crossing alarms. Ensure that the positioning coordinates of operators are accurately reproduced in the virtual scene, and clearly view the location distribution information and personnel data statistics of personnel.

![Abnormal Alarm One-key Positioning](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kaj6a5fk1g5zwvavhfxh.gif)

**Unaccompanied Alarm**
As a by-product of the ironmaking process, gas is distributed throughout blast furnaces, coke ovens, converters, and other operating areas. Therefore, when it is required to enter the internal maintenance of gas equipment, it should be accompanied by two or more people.

To improve the standardization of gas area operation specifications in steel plants and increase the supervision and management of gas area operations, Hightopo supports the logic of safety behavior norms and sets up a real-time alarm supervision mode for unaccompanied personnel. Synchronously upload the acquired locations of irregular workers, basic employee information, and statistics on the number of alarms for irregular workers within the range, and use the advantages of 3D visualization and flexible management to capture real-time information on plant personnel. While improving operation safety management and control, it also empowers managers with a streamlined, institutionalized, and globalized digital management form.

![Unaccompanied Alarm](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1xif43dksvlq22spyf00.gif)

**Microtag Low Battery**
As an important part of the positioning system, UWB micro-tags need to be worn by personnel, equipment, and vehicles at all times during operation. When the tag enters the signal coverage of the positioning base station, it can automatically establish contact with the base station and determine the location of the tag by sending a signal.

In order to effectively prevent the phenomenon that the power of the microtag is too low during the operation, which leads to the phenomenon that the speed of calling for help, finding, and locating is too slow. Based on multi-dimensional factors such as time, space, and rules, Hightopo filters the collected mass of micro-tag power, screens out the workers who are in low power, and centralizes the alarm on the large visual scheduling screen. Click the corresponding alarm information, and the 3D scene will be switched to the personnel working position synchronously, which will facilitate the manager to accurately grasp the personnel coordinates, help the manager to troubleshoot and maintain the power of the micro-tag faster, and improve the level of positioning safety management and the efficiency of fault operation and maintenance resolution.

![Microtag Low Battery](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/sve8jzu07vkhm566e3oc.gif)

**Personnel SOS Alarm**
When the operator encounters a gas leak, molten steel splash, water leakage into the furnace, or other abnormal situations, he can actively press the SOS alarm button to send a distress signal to the platform.

The 3D visualization platform independently locates the location of the personnel according to the UWB positioning information received in the background, and sends back the time, location, and personnel information to the alarm list, and informs the relevant staff to pay attention, understand, and deal with it on time. The system supports automatic alarms to relevant departments according to the emergency plan process and can initiate coordinated dispatching and commanding across departments and levels.

![Personnel SOS Alarm](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zr1c3gshwca1go8eym0s.gif)
The reuse of personnel SOS alarm visualization and UWB positioning technology has accelerated the efficiency of enterprise accident rescue and actively resolved the risk of untimely rescue caused by inaccurate positioning in the past.

**Visualization of Electric Fence Alarm**
The electronic fence is currently a particularly advanced perimeter protection and alarm system. Its host adopts the perimeter security concept of "blocking first, alarming second", integrating "deterrence, blocking, alarming, and security". However, the traditional management method is not closely related to time and space in real-time, and managers cannot manage and trace the behavior of operators in real-time and visually.

"HT for Web" combines UWB high-precision positioning system to generate a virtual electronic fence in the visualized scene, realizing the triple control measures of scientific and technological prevention and control + personnel prevention and control + physical prevention and control. The manager in the scene can freely set the alarm types such as cross-post, stranded, overcrowded, absent, intrusion, and static timeout according to the production situation of each area. For violations, the scene immediately responds to the interaction, and the warning prompts are given through the flashing motion effect, and the captured violation images are popped up to ensure that the risk status within the monitoring range can be effectively fed back.

![Visualization of Electric Fence Alarm](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/r29siu553ntpbryawnik.gif)
The scene binds the 2D panel to the data, and synchronously displays the dynamic data of key information such as alarm time, alarm date, and alarm events. With simple carousel charts, it presents multi-angle, detailed and intuitive key information to users, helping to tap the value behind the information.

Managers can open a browser to access the monitoring scene at any time through a PC, PAD, or smartphone, overturning the limitations of the previous user controlling the scene in the control room, and truly realizing the two-way, visualized, and networked management and control form of the command center.

**Intelligent Video Analysis and Alarm**
The visualization platform combines multiple visual images for 7×24h dynamic monitoring. When receiving alarms from operators for help, irregular operations, and illegal stays in electronic fences, the alarm prompts can be broadcast immediately in the 3D scene, responding quickly to potential crises and stopping losses on time, reducing remedial costs, and achieving efficient analysis and early warning in the factory. management purposes.

![Intelligent Video Analysis and Alarm](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/x8v95pmoj8ethkq06dmq.gif)
It supports the Hightopo video fusion technology of the superimposed map software, and through the superimposed display of the monitoring video in the workshop and the 3D scene, you can view the scene as if you were there. It also realizes advanced functions such as automatic video inspection of critical paths and fast locking of key areas. Hightopo video fusion technology adopts WebGL technology and uses GPU high-performance computing power to process video images in real-time, image processing does not occupy CPU resources, and the whole solution has a smooth picture.

**Electric Fence Drawing**
Hightopo supports the manual drawing of virtual electronic fences in the scene according to the physical fence points and independently increases the security defense line of the area and equipment. If there is molten steel splashing, equipment movement, areas around high-temperature radiation hazards, or areas where equipment failures are being overhauled and repaired, a temporary drawing is carried out.

![Electric Fence Drawing](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vs72wlky6jc6xcmmgxpg.gif)

**Visual Monitoring of Carbon Monoxide Concentration**
he iron and steel industry is a typical "high investment, high energy consumption, high emission" industry. In the context of "dual carbon", it is urgent to establish a stock constraint mechanism based on pollutant emissions to help the steel industry to save energy and reduce emissions efficiently, and develop in a green, low-carbon, and high-quality direction.

During the operation of blast furnaces, converters, and coke ovens, a large amount of harmful carbon monoxide gas will be released. If improperly handled, leakage or explosion will endanger the lives of workers, cause losses to corporate property, and increase air pollution. "HT for Web" creates a carbon monoxide monitoring module, equipped with carbon monoxide detectors, sound and light alarms and other detection devices, to carry out visual alarm monitoring of harmful gas exceeding the standard, environmental pollution, real-time concentration parameters, etc. in each area.

![Visual Monitoring of Carbon Monoxide Concentration](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ajilailqp142swakuzla.gif)
Choose to divide the gas concentration distribution in the form of a 3D cloud image. The brighter the color, the lower the density. It cooperates with the 2D panel to display dynamic energy efficiency data such as blast furnace height, concentration, and distribution. Let managers see through the gas distribution characteristics at a glance, understand the energy consumption status of the plant area in real-time, and provide a strong data basis for the rational allocation of resources, energy conservation, and emission reduction in the plant area.

When the gas concentration exceeds the established threshold, the system will immediately send out an audible and visual alarm to remind managers to evacuate the crowd in time and take further protective measures.

**Alarm Visualization**
The visual alarm module includes creating an alarm form and disabling an alarm form.

**Alarm Form Visualization**
By equipped with intelligent sensing components, it aggregates key information such as alarm time, alarm personnel, alarm status, and alarm equipment to create a multi-data intensive monitoring and management model. Events can be automatically classified and dispatched according to the emergency plan process, and the risk level research and judgment can be carried out in combination with the early warning model to determine the risk level of the alarm information and improve the efficiency of emergency handling.

![Alarm Form Visualization](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1yr1cibzmoehyu4m7lea.png)

**Disarm Alarm Form Visualization**
When the alarm information is resolved, the case will be automatically classified into the alarm removal module. The alarm disarming module records key information such as the occurrence time, cause, personnel, department, and position of past alarm events, which satisfies the need for managers to retrospectively compare the historical data of alarm information in the factory area.

![Disarm Alarm Form Visualization](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/f99bou8fzhxew89b3nbs.png)
With efficient data retrieval mode and one-key calling of intelligent means, dynamic, real-time, and intelligent monitoring of the five major elements of the production workshop, man, machine, material, method, and environment, can effectively help the factory area to discover, process, and control early.

Apply Hightopo software's rich visual chart components, choose styles such as classification, combination, and sorting, to convey information clearly and effectively, and let classified policies replace extensive management. Make the operation and control ability of the steel plant change from vertical to flat, to achieve the purpose of data sharing, real-time response and visual operation.

**Application Expansion**
From the perspective of industrial manufacturing, the digital twin smart factory personnel positioning safety management solution enables real-time, dynamic and uninterrupted interactive transmission of physical data such as operating status, environmental changes, and sudden disturbances, and information such as simulation predictions, statistical analysis, and domain knowledge. Form a fully closed-loop optimization of multi-system intercommunication, and enhance the synchronization and consistency between the physical world and the information world.

In terms of scene design style, Hightopo has a variety of presentation methods: technological wireframe, abstract simplicity, simulation and realism, cyberpunk and so on. For the boring operation and maintenance management interface, add design elements with graphic features. For example, the cool wireframe mode builds the internal structure of the steel plant, effectively highlights the operating machines and personnel working positions, and better conducts factory safety inspections and operational status judgments.
![Application Expansion](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/s89avf0l8satiabjw2u2.gif)
A digital twin smart steel plant project with a full architecture has been built, and multiple production lines of the steel plant are visualized from the three dimensions of digital twin animation, process flow chart, and cockpit. Turn "numbers" into "things", and integrate the data of six major ironmaking processes and dozens of business systems originally distributed within tens of thousands of square kilometers.

![Application Expansion2](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8zellwt7rle4sn3o7wdl.gif)

**Summarize**
This demo is a 3D visual monitoring platform for personnel positioning and safety management in steel mills, based on digital twin technology, to visually display the environmental status, equipment status, and personnel status of the factory area. The monitoring system, alarm system, management system and other link resources are efficiently integrated to form a multi-party information coordination linkage such as interconnection, intercommunication, and sharing among various systems.

Break down the information barriers existing in the factory area, so that the production management departments and safety supervision departments at all levels in the factory area can intuitively, quickly and comprehensively understand the dynamic information of the factory operators, and provide decision-making basis for the production scheduling command, safety inspection, and accident traceability of the factory area. The comprehensive, integrated and transparent safety production mechanism of "monitoring, control and management" in the factory area.

Click the below link to see more demonstrations:
[https://www.hightopo.com/demos/en-index.html](https://www.hightopo.com/demos/en-index.html)