DEV Community: Hightopo

Virtual Reality (VR) Application for Smart Office Visualization

Hightopo — Fri, 30 Jun 2023 09:21:43 +0000

“Virtual Reality”, or VR technology, is a computer-generated simulation of an environment or situation that can be experienced through a VR headset or similar device. The rapidly growing field of VR has the potential to revolutionize many industries, from gaming to education to healthcare.

Project Overview
With the self-developed graphic engine “HT for Web”, Hightopo Software has built a 3D model of the Tianjin office. The office has been transferred into a virtual reality scene, maintaining a 1:1 ratio with the real-world office environment. The 3D scene within the VR setting showcases the functional areas of the office, including room distribution, workstation layout, meeting rooms, and bathroom facilities. Managers can receive real-time feedback on key locations through video surveillance, temperature and humidity monitoring, and water level tracking, providing them with a more accurate understanding of the office’s situation.

System Analysis
The essence of VR lies in creating a virtual three-dimensional interactive environment. With the help of special hardware devices, users can immerse themselves in a virtual world that transcends physical boundaries and allows for natural interactions. By using a VR headset as a display terminal, along with VR controllers, sensors, wireless kits, and other tools, it’s easy to present a 3D scene from an office right within the VR headset.

Hightopo leverages the WebXR standard to allow users to interact with various devices in a virtual office setting in real-time. Through language, gestures, walking, and 360° free movement using VR devices, users can immerse themselves in the Hightopo VR scene and focus on experiencing the office layout, personnel information, and current usage status of functional areas while interacting with others. This creates an immersive experience. Additionally, Hightopo VR now supports multiple VR devices, including HTC Vive, Oculus, Qeust2, and Pico.

First Person Roaming
Hightopo Software uses 3D virtual simulation technology and digital twin technology to simulate the Tianjin office environment in the real world. This includes accurately replicating office equipment and wall structures in three dimensions, allowing for a clear and comprehensive visualization of the entire environment in a browser.

Once the VR feature is enabled, users will be able to move around the virtual space with ease by wearing VR devices. They can explore the office from a first-person perspective and view various devices, wall-mounted demo pictures, and other objects within the office from any angle.

Users can move the VR controller to the demo image on the wall and click the interaction button to play the demo video. This feature makes it easier for visitors to view relevant content and improves the user experience.

When users view 3D scenes on other devices such as PCs or mobile phones, “HT for Web” graphics engine can support both first-person free roaming and third-person perspective free roaming.

VR Access Control
The VR virtual office also includes an access control function. To use it, the viewer can press the control button on the controller and aim the handset ray at the lock on the door to open the menu. They can then select the appropriate number on the menu, and after entering the correct password, the company door will be opened.

This system can connect with the company’s security and protection system. By monitoring dynamic data such as access control status, area location, card swiping times, and passage time, the administrator can manage the office remotely.

VR Zone Management
Hightopo VR employs a handheld interactive menu to optimize visual space in VR mode. Users can easily access the function menu by clicking the button on the gamepad. Selecting “Personnel Distribution” on the menu will display the distribution status of personnel on workstations in the office. In the 3D scene, Hightopo uses electronic fences of varying colors and textual descriptions to identify workstations based on different professions, facilitating quick comprehension of personnel distribution by new colleagues and visiting clients.

The electronic fence function is a commonly used feature in industrial digital twins, which is widely used in various fields, such as substations, sewage treatment plants, thermal power plants, commercial communities, and airports. With “HT for Web”, designer an developer can rapidly produce perimeter models tailored to customer specifications. By integrating UWB personnel positioning or fence alarm data, the software can achieve perimeter prevention and alarm functions in hazardous areas. This capability enables managers to quickly respond to diverse situations.

VR Resource Management
By using Hightopo software’s 2D panel components, this system can display real-time information of personnel or equipment in a 3D scene without distortion. This enables managers to easily grasp the situation in the office at any time and perform remote control.

When the user clicks on the employee nameplate on the desktop, a popup window will appear in the scene displaying real-time information about the employee at the current cube, such as name, position, contact information, current status, and device list.

When clicking on the computer on the desktop, a pop-up window will appear in the scene displaying information about the employee and device at the current workstation, such as the employee name, position, equipment being used at the current cube, and a list of all company equipment.

Office restrooms and meeting rooms are two public areas with high usage frequency. With “HT for Web”, we can add corresponding prompt panels on the model to help users quickly understand the usage situation of the current place. Meeting rooms can also be booked and queued through the company’s management system to improve office efficiency.

Users can click on the character model in the scene and use the pop-up operation panel to change the character’s clothing and logo style.

In digital twins, changing the model texture can alter the appearance and texture of the model surface, thereby affecting the visual effect of the model. This is very important for model design, rendering, and previewing. The “HT for Web” supports replacing model textures and improves the authenticity and credibility of digital twins.

Additionally, the 3D graphic engine “HT for Web” supports changing model textures to simulate different materials and textures, such as metal, wood, and fabric, which makes digital twins more detailed and realistic. This is of great significance for industrial design, product manufacturing, and architectural design.

VR Device Management
“HT for Web” supports using pop-up windows to display real-time camera data in a 3D scene. The software also supports integrating video surveillance with security systems to form a complete security system. Managers can remotely check the office status to ensure the safe operation of the office.

Temperature and humidity are another important indicators that need special attention in the office. The Hightopo VR Office system combines temperature and humidity sensor data with 2D panel components to display real-time values in the office. Managers can quickly adjust related equipment to provide employees with a comfortable working environment.

VR Remote Control
The system also supports two-way control between 3D simulation and physical equipment. That is, managers can directly control the lights or air conditioners in the office through VR; office personnel switch lights or adjust air conditioners, and they can also be presented in real-time in the 3D simulation scene.

Hightopo software supports two-way control between 3D scene and physical equipment. This means that managers can directly manage the lights or air conditioners in the office through VR. Meanwhile, office personnel can turn on/off lights or adjust air conditioning, and these actions can be displayed in real-time in the 3D scene.

During cold winters or hot summers, managers can pre-start the air conditioning to adjust the office temperature, making the working environment more comfortable for employees.

Bi-directional control is often used in digital twin projects for factories. In some dangerous environments, conventional operation may cause harm to the worker. By using digital twin bi-directional control technology, administrators can remotely turn on/off the corresponding equipment, which is both convenient and safe.

VR Alarm Control
Hightopo software supports integrating the data resources of the existing office system and establishing corresponding threshold alarm triggering rules.

In the following example, we have enabled event monitoring for the water level in the office. An alert message will be automatically triggered when the water level exceeds the threshold.

The system also provides quick troubleshooting based on recognized fault information or abnormal operation. This helps guide users to the corresponding location for fault diagnosis. Additionally, the system will display the alarm parameter panel, which assists users in analyzing key indicators, alarm information, and historical tracing, among other aspects.

Summary
With the support of VR and AR technologies, the interaction between users and digital twins is no longer limited to traditional screen display, but begins to resemble physical entity interactions. This makes the digital world closer to the real world in terms of sensory and operational experience. Decisions made based on digital twins for physical entities will be more accurate and closer to reality.

Hightopo Software insists on independent innovation and development. In addition to providing VR/AR visualization technology, it also provides web visualization application solutions for BIM, GIS, XR, MR, 2D configuration, and 3D configuration. Our self-developed graphic engine “HT for Web” not only supports the ability to provide graphical configuration SCADA, but also supports building low-code and zero-code IoT platforms at the PaaS and SaaS levels. Hightopo products have been widely used in various fields such as smart cities, parks, buildings, factories, intelligent manufacturing, water, energy, photovoltaics, wind power, electricity, new infrastructure, operation and maintenance, government affairs, transportation, medical, finance, and scientific research.

For more industry application examples, please refer to the Hightopo Software official website.

Hightopo Software Official Website

To get a free trial: https://www.hightopo.com/en-request.html

Hightopo YouTube: https://www.youtube.com/hightopo
Hightopo LinkedIn: https://www.linkedin.com/company/hightopo
Hightopo Facebook: https://www.facebook.com/hightopo2d3d
Hightopo Twitter: https://twitter.com/hightopo2d3d
Hightopo Instagram: https://www.instagram.com/hightopo

Hightopo Smart Civil Aviation Management System

Hightopo — Fri, 19 May 2023 08:12:01 +0000

Foreword
The Hightopo Smart Civil Aviation Management System (HSCAMS) is built using JavaScript and HT for Web (HT for short), a Web-based 2D/3D visualization engine. The system creates digital twins of the aircraft exterior, cabin management, cabin equipment, airplane engine, and cockpit in a sci-fi style. Various data is then integrated and analyzed using technologies such as the Internet of Things (IoT), cloud computing, big data analysis, and artificial intelligence. This allows for the establishment of a smart aircraft comprehensive management platform that is scenario-based, intelligent, and user-friendly. This platform offers managers a comprehensive and diverse management approach that includes multi-angle and multi-data management. In addition, it aims to create a green, smart, and secure civil aviation management system in the field of civil aviation.

Model Selection
The system’s 3D scene showcases three distinct aircraft types and their appearance parameters:

Airbus A380: a massive, wide-body passenger airliner with four engines, designed and manufactured by Airbus for long-range flights.
Boeing 787: the first ever mid-size airliner with long-range capabilities, making it a game changer in aviation history.
Boeing 727: a narrow-body civilian aircraft with medium-range capabilities, developed and manufactured by Boeing in the United States. Regarding the above models, we use virtual simulation and digital twin technologies combined with the HT for Web engine to render seamless 2D and 3D flight scenes, simulating the aerodynamic layout and geometric parameters of Airbus A380, Boeing 787, and Boeing 727, etc.

After selecting the model with the mouse, the system will show the overall shape of the currently selected plane in a roaming animation. By clicking the small triangle next to the model, a brief introduction of the current aircraft will pop up. So as to understand the history of the passenger aircraft, as well as engine other parameter information.

By connecting to the real-time data of the aircraft and its flight management system, it is possible to monitor the equipment data and passenger status in real time. This allows for sharing real-time data between the control tower and flying aircraft, which can help with pre-warning and post-event review, thereby effectively reducing the occurrence of various aviation accidents.

The 3D engine “HT for Web” is developed based on WebGL technology. It enables seamless rendering of 3D scenes and models of aircraft in the browser, as well as the creation of intricate navigation and data visualization. By accessing real-time data such as wing span, fuel capacity, and interference drag of the aircraft, HSCAMS allows for precise flight management. Additionally, it provides an immersive experience by simulating real-time flight scenes.

With Hightopo software’s all-in-one development tool, designers and programmers can collaborate on the design of view components, icons, 2D drawings, and 3D scenes for various aircraft models. This results in the rapid realization of 2D and 3D visualizations.

Aircraft Monitoring
After connecting the airport monitoring data to the system, the system not only displays the real-time status of various aircraft components such as the wing, fuselage, tail wing, landing gear, control system, and power equipment, but also provides information on the aircraft’s interference resistance, fuel load, and cargo compartment load rate. This helps the tower and instrument flight control room manage flights more effectively and scientifically.

Interference Resistance Information

In addition to friction, pressure, and induced resistance, “interference resistance” is an additional resistance generated by the mutual interference of airflow between various parts of the aircraft such as wings, fuselage, and tail. When designing an aircraft, the relative positions can be effectively calculated to reduce interference resistance.

We incorporate real-time resistance data into the HSCAMS. A red triangle with an exclamation mark will appear when the resistance is too high, making it convenient for the ground control tower to detect problems in a timely manner and contact the crew to confirm flight safety. The system’s historical records can also be used to optimize future aircraft designs.

Fuel Capacity Information

An aircraft’s fuel capacity can be categorized into three groups: maximum fuel capacity, minimum fuel capacity, and takeoff fuel quantity. The maximum fuel capacity is the greatest amount of fuel that the aircraft can carry while still ensuring safe flight. Minimum fuel capacity refers to the amount of fuel that the aircraft can carry after arriving at the destination airport, which should be sufficient to allow the aircraft to fly for 30 minutes at holding speed over the airport. Takeoff fuel quantity refers to the total amount of fuel carried by an aircraft for a flight’s mission.

This system combines sensors, 5G, and other technologies, and display the capacity data on 2D panels of the Hightopo visualization system, helping relevant personnel to monitor fuel consumption at all times. By adjusting the flight speed appropriately to make the actual fuel consumption as close as possible to the theoretical minimum value, it can also achieve cost reduction, carbon emissions reduction, and other purposes.

Cargo Information

HSCAMS utilizes Hightopo’s robust charts, graphics, and design elements to display information about general cargo, chemicals, overweight items, fresh goods, and more in a more user-friendly manner. By integrating real-time data from the cargo hold with data from the ground passenger and cargo transportation service area, it can also enhance airport loading and unloading efficiency.

The cargo loading capacity is a crucial indicator of an aircraft’s performance. For instance, the Airbus A380 has a maximum cargo capacity of 66.4 tons. The indicator is primarily restricted by weight, volume, door size, and floor load capacity. The system retrieves the loading capacity data of the aircraft model in the 2D panel and shows the current cargo hold load rate in percentage. Additionally, the 2D panel can also support unmanned monitoring of the cargo hold and fire warning.

Cabin Management
The Airbus A380, colloquially known as the “giant” of the skies, is the largest commercial passenger airliner in the world. Many A380s boast exceptional onboard entertainment such as fitness rooms, bathrooms, restaurants, and bars, providing passengers with a fun and enjoyable experience while flying. A unique feature of this aircraft is its two-story cabin and luggage compartment, which are separately displayed in the system. This provides a visual representation of the cabin structure, layout, and facilities and equipment, which correspond one-to-one with their actual locations and numbers, maintaining consistency with the actual aircraft.

The cabin is divided into three classes — first class, business class, and economy class — based on the size and comfort of the seats. Once connected to the ticketing system, different seat types, including selected, remaining, and VIP seats, are color-coded for easy differentiation.

Passenger Information

The system supports displaying passenger information such as name, class, boarding number, available mileage, etc., so that flight attendants can make more reasonable arrangements for passenger service.

Cabin Equipment Management

Clicking on the cabin equipment will take you to the details page, where you can view related information such as passenger volume, flight information, system parameters, and more.

In terms of design, we utilized a futuristic wireframe pattern and implemented a transparent shell for the aircraft. This allows for easy visual inspection of the cabin equipment by maintenance personnel, providing a clear view of the overall layout and structure. By integrating device data into the system, faults can be promptly detected, ensuring a safe flight. Additionally, by integrating passenger information data, the distribution of passenger nationalities can be viewed through small flashing dots on a world map located in the upper right corner, so as to help flight attendants provide personalized service to customers.

Aircraft Equipment View

Clicking on the Aircraft Equipment View will automatically remove the aircraft’s transparent mask. By clicking on the internal equipment again, the equipment name and its properties will be displayed. Our system uses the virtual simulation technology of Hightopo software to create a 3D interactive model of the aircraft that is based on its actual appearance. This high-precision model helps maintenance personnel to grasp flight data through real-time data-driven operations.

Equipment Self-check

Monitoring device data is a way to supervise processes as they happen, while equipment self-checks serve as reminders before a process begins. The HSCAMS interface’s 2D panel can scroll to show the current safety system status, and it includes an intelligent warning analysis feature. If the system data exceeds the set threshold, the relevant information will be highlighted in the list to remind maintenance personnel to promptly check the equipment’s health status.

Aircraft System Presentation

In this page, the Flight Management System (FMS) is capable of automating flight missions. The Aircraft Health Management System (AHMS) includes monitoring, diagnosis, and evaluation of the aircraft’s health status. The Air Data Inertial Reference System (ADIRSP) measures various factors such as the aircraft’s position, speed, trajectory, wind direction/speed, and attitude. The Information System (IS) provides flight, maintenance, cabin, and operational information. The Integrated Modular Avionics (IMA) is based on core computing, RTOS, and on-board networks that support system interconnection and data communication. The Communication System (CNS) is primarily used to maintain two-way voice and signal contact between the aircraft and ground navigation controllers, dispatchers, and maintenance personnel. The Display System (CDS) provides pilots with an integrated monitoring and cockpit display control system to enhance situational awareness.

Engine
The aircraft engine generates thrust to propel the aircraft forward. In HSCAMS, for instance, the TRENT 900 specification engine can be viewed from all angles through four methods: section, airflow, disassembly, and reset.

The TRENT 900 turbofan engine is composed of a compressor, a combustion chamber, a high-pressure turbine (which drives the compressor), a low-pressure turbine (which drives the fan), and an exhaust system. The diagram in the center of the page illustrates the working conditions of the high-pressure turbine blades. The Trent 900 engine has 70 high-pressure turbine blades, each of which is capable of generating nearly 600 kilowatt-hours of power. The 2D panel on the right displays the changes in engine pressure and temperature using line charts.

On the airflow page, the system presents the propulsion efficiency of various turbojet engines. This includes values for inlet airflow, aerodynamic load, thermal load, centrifugal load, and other indicators. The inflow and outflow airflow are differentiated with red and green arrows.

The software enables visualization of the engine’s internal structure by breaking down its components and displaying their names, including hollow structure fan blades, titanium alloy honeycomb cores, honeycomb interlayers, and superplastic formed wide-chord fans. It also allows for detailed viewing of each individual part after disassembling the engine. By connecting to IoT data of the components, the current status of each part can be monitored and visualized, enabling global monitoring from a macro to micro perspective.

Cockpit
The cockpit of a civil aviation plane is a complex and highly technical environment. It is here that pilots control the aircraft, monitor its systems, and communicate with air traffic control and other aircraft. The cockpit is designed to be ergonomic and intuitive, allowing pilots to quickly and accurately make critical decisions in real-time. Modern cockpits are equipped with advanced technologies such as digital displays, GPS navigation, and automated systems to enhance safety and efficiency.

Flight instruments in the cockpit are divided into three main categories: navigation, communication, and flight control. Navigation instruments guide pilots to navigate correctly during flights, while communication instruments maintain communication between the aircraft and the ground. Flight control instruments allow pilots to control the aircraft’s attitude and speed. On the cockpit page of this system, different flight information can be displayed by clicking on different displays, which will then pop up the corresponding 2D panel.

The Engine Indicating and Crew Alerting System (EICAS/ECAM) is utilized to monitor and present engine status and crew alerting information.
The Flight Management System (FMS) is utilized to enter and validate flight plans, control speed, and more.
The Multi-Function Display (MFD) provides a visual interface that can be utilized for integrated flight information, engine monitoring, and flight parameter configuration.
The Navigation Display (ND) displays the current aircraft heading information on a three-dimensional map. Aviation navigation refers to the various systems and equipment used in aircraft during flight, including flight computers, radar, inertial navigation, celestial navigation, and global satellite positioning. These systems provide continuous, safe, and reliable technical services for airborne aircraft. On the cockpit display, it shows the three-dimensional position and speed of the aircraft, as well as provide important information such as heading and attitude.

Summary

The Hightopo Smart Civil Aviation Management System (HSCAMS) uses 3D visualization and virtual simulation, as well as big data, cloud computing, and other technologies. This allows users to view a 3D interactive model of the aircraft and access operating data, helping relevant personnel to analyze flight data in real-time. Users can gain a comprehensive understanding of the aircraft’s working conditions and the status of various systems through device self-checks, aircraft system displays, and engine, cockpit, and other page operations. This results in increased flight reliability, reduced costs, and simplified maintenance. It also includes information on aircraft fuel capacity and engine operating curves, leading to digitization and more environmentally-friendly flight within the general aviation industry.

For more industry application examples, please refer to the Hightopo Software official website.
https://www.hightopo.com/demos/en-index.html

Low-Code 3D SCADA Graphic Visualization Development Platform

Hightopo — Sun, 23 Apr 2023 14:03:54 +0000

Business Background

The concept of Industry 4.0 has ushered in a new round of industrial revolution worldwide. The exponential growth of big data has provided a solid foundation for the rise of industrial intelligence. The production mode of traditional manufacturing, which is characterized by high pollution, high energy consumption, and low efficiency, no longer meets the requirements of modern industry.

Disadvantages of traditional factories:

Machinery and equipment are isolated from each other.
There are too many inventory items in the factory, and the warehouse is not integrated with production.
Products cannot be comprehensively traced and managed.
Process flow cannot be fool-proof controlled.
Labor costs for the enterprise are high.
Equipment failures is not easy to be discovered, analyzed, and dealt with immediately.
The production process can not be controlled by ERP. Traditional factories have many shortcomings that seriously affect production efficiency. Intelligent factories built using UI configuration and 3D configuration can greatly improve production output and defect detection rates. To promote the transformation and upgrading of their operations, traditional factories need to adopt technologies such as automation, artificial intelligence (AI), IoT, edge computing, cloud computing, 5G, and digital twins.

Intelligent factory
To evolve a traditional factory into a smart factory, it is necessary to share data between manufacturing systems, such as products, equipment, production lines, and workshops. It is also important to integrate modules such as R&D, customization, production, and logistics, and to verify the production process online.

Hightopo has created a 3D SCADA Graphic Editor by relying on its thousands of industry cases. This editor has rich UI components and supports the user to build 2D and 3D web industrial configurations with 0 code. This will help manufacturing companies to continuously improve their processes, prevent problems, optimize operational efficiency, and reshape the core competitiveness of enterprises.

Moreover, the intelligent factory created by this tool can not only improve the production efficiency of the factory, but also help accumulate and analyze big data to build a highly efficient, energy-saving, green, environmentally-friendly, and comfortable humanized factory.

Smart Factory Features

The smart factory can cover many aspects of the production process, including design, equipment monitoring, production monitoring, and environmental monitoring. It supports real-time monitoring, timely early warning, and intelligent diagnosis of the entire production process, effectively controlling the occurrence of failures in the production process.
Compared with traditional configuration software like InTouch/IFix/WinCC, the editor’s web-based platform is better suited for the trend toward transformation from C/S to B/S. Its rich visual components and fast data binding methods allow for quick creation and deployment of configuration products. Through IoT configuration, you can visually view the operating status of each production line and its corresponding equipment in the plant.
Hightopo 3D visualization technology adopts B/S architecture and supports seamless integration with other mainstream front-end frameworks such as Angular, React, and Vue. Users can access the 3D visualization system anytime and anywhere through PC, pad, or smartphone to realize remote monitoring and control.

Hightopo software once took the SMT production line as an example, used rich 3D and UI components, built a digital twin system for SMT process monitoring and management . Created an intelligent and green digital smart factory.

Editor introduction

Page Layout
The Hightopo 3D SCADA Graphic Editor comprises a drawing area, topology components, a menu bar, and a property panel. Users can easily design workshop layouts and process flows by dragging and dropping objects. This can be done using a PC or mobile phone. The software supports the creation of digital models of various equipment, allowing for digital management of the entire process of planning, production, and operation.

There are two buttons, edit and preview, on the left menu bar of the editor. Click “edit” to create and save the 3D configuration, and click “preview” to view the effect after saving. At the bottom of the editor, topology components can be freely selected and dragged to the drawing area to form a production line. Users can arrange equipment in accordance with the production process of the workshop, and simulate the production process of the product online.

Hot Key
To copy and paste the model, use the shortcut keys Ctrl+C and Ctrl+V. You can also hold down the Ctrl key to make multiple selections on the model. Once you have made your selection, press the Delete key can delete them.

This editor uses the “HT for Web” 3D engine, which isolates the underlying WebGL operations from the application layer. As a result, users don’t need to care about the cumbersome and complicated code operations. They only need to focus on the business layer of the application, thereby saving development costs and speeding up the development process.

Drawing Area
The size of the drawing area can be adjusted freely using four buttons that allow you to shrink or expand the X-axis and Y-axis. If you need to monitor multiple production lines together, you can enlarge the drawing area.

Model Manipulation
The example models include a six-axis robot, engraving machine, CNC, AGV, material library, polisher, cleaning tank, and production line models. Each model can be parameterized independently, including name, length, width, height, coloring, and more. Users can also rotate and move these models.

The editor uses a building block structure, allowing users to flexibly build and recreate the product production process in the workshop by simply combining the models.

The traditional numerically-controlled system provides diagnosis feedback through code, but the Hightopo visualization product can provide event feedback to help operators identify problems. For example, it can monitor engraving machines, polishing machines, and other equipment and store historical operational data. This is convenient for maintenance personnel to conduct fault analysis. By setting an alarm threshold, alarm signals such as a flashing red light can be triggered if the threshold is exceeded, making the early warning effect more intuitive.

Additionally, the editor also supports drawing the movement trajectory of AGV vehicles in the scene, thus enabling workshop inspections.

Data Binding
In the workshop, sensors are installed on assets, devices, and equipment. On-site control and data acquisition stations then collect and transmit data to the computer at the production monitoring level via the network.

The production monitoring layer conducts centralized operation and management of the data from the process control layer, such as various optimization calculations, statistical reports, fault diagnosis, display alarms, etc., and finally uploads them to the Hightopo 3D editor, raising the predictive maintenance of the workshop to a new level.

Chart Operation
There’re three buttons for chart in the editor: production index, operation index, and environmental protection index. Clicking on any of these buttons will pop up the corresponding chart box, which can be moved to any position on the screen. Once the data is connected, these charts can display the factory’s product production quantity, equipment operation data, carbon dioxide emissions, and other relevant information. By recording information such as material usage time, processing progress, and energy consumption, the editor can provide workshop managers with an analysis of the completion of orders and plans. Additionally, it can integrate material consumption and labor costs through the financial system, allowing managers to grasp the workshop’s operating costs in a timely manner.

The editor supports various operations, such as zooming, panning, and rotating. Each device in the scene can support interaction events. The system has built-in UI components, 3D components, IT O&M, electric power, flowchart, and other industry models. These models support connecting to public or local data sources and realize digital map linkage after data binding.

The editor also provides JS-SDK to meet the needs of low-code secondary development business . Relying on the data assets of thousands of cases, Hightopo software provides more practical visual operation solutions for various industries.

In addition, the editor provides a JS-SDK to meet the requirements of secondary development. Leveraging data assets from thousands of use cases, Hightopo software offers practical, industry-specific visual operation solutions.

For example, the Hightopo software is used in the automobile manufacturing industry to realize 3D visualization of the production line in the automobile assembly workshop. This makes the automobile production process more transparent and management more refined and efficient, ultimately improving the efficiency of production and the quality of products.

Realized Value
Hightopo 3D SCADA Graphic Editor constitutes a one-stop data visualization solution from scene building to data binding , which can help users quickly realize modern, high-performance, cross-platform (desktop/mobile/virtual reality) Graphic display effect and interactive experience. Its underlying framework HT for Web’s original vector rendering engine pursues the ultimate performance, and all components can withstand tens of thousands or even hundreds of thousands of graphics elements . With tens of thousands of tabular data, network topology primitives and instrument charts, it has broken through the traditional limits of many industry applications and can better adapt to the needs of the Internet of Things big data era.

Hightopo software adheres to the principle of Heavily Canvas Based for Ultimate Performance at the beginning of its software design, making full use of graphics optimization (memory/CPU/GPU) techniques such as partial refresh, batch aggregation, image caching, minimal DOM elements, etc.

Summarize
The Hightopo 3D SCADA Graphic Editor is a tool that can assist with product planning, design, and process simulation. It allows product information to flow through design, manufacturing, quality, logistics, and other links, and enables product lifecycle management (PLM). By combining sensors and radio frequency identification (RFI) technologies, it establishes a production process data supervisory control and data acquisition (SCADA) system that can fully collect production site information. It also enables data integration and analysis with the workshop manufacturing execution system, and realizes closed-loop management through digital process construction. Additionally, it supports integration with enterprise resource planning (ERP) management systems.

The Hightopo 3D SCADA Graphic Editor breaks the traditional manufacturing model by leveraging technologies such as digital twin, Internet of Everything, and intelligent decision-making. It enables the creation of a “transparent, green, digital, intelligent, and lean” smart factory with zero code, enabling rapid deployment.

You can go to our official website to view more cases and effects:
https://www.hightopo.com/demos/en-index.html

2.5D Automotive Manufacturing Management System

Hightopo — Tue, 11 Apr 2023 10:12:54 +0000

A car is primarily composed of four major parts: the engine, chassis, body, and electrical system. Each of these four parts is composed of countless tiny parts. In other words, a car is an electromechanical product composed of tens of thousands of small parts. To ensure efficient and high-quality automobile production, production monitoring is essential.

However, the traditional production monitoring methods are no longer sufficient for modern automobile production. To improve efficiency and quality, more and more automobile manufacturers are beginning to use visual configuration monitoring software to control and monitor the production process and improve production efficiency and product quality.

Hightopo 2.5D automobile manufacturing visual management software supports visual monitoring of the entire production process by collecting and analyzing production data. This monitoring method can intuitively reflect various data and information, such as the status and quality of stamping, body welding, paint spraying, assembly, and other processes, allowing for timely problem detection and resolution. The system can also automatically generate reports to facilitate data analysis of the production process, further improving production efficiency and quality.

Stamping Workshop

This module provides an overview of the stamping workshop. Its standard process includes the storage of raw materials (sheets and coils), the uncoiling line, the cleaning and oiling of large pieces, the uncoiling and shearing of small pieces, the stamping production line, the installation of molds, commissioning of the first piece to pass, mass production, rustproofing of qualified parts, and storage.

Hightopo software restored the entire stamping workshop according to the standard process. It allows operation and maintenance personnel to easily access the scene through cross-platform devices or mobile terminals. Users can use touchscreen devices to rotate, zoom, and translate with one, two, or three fingers. With the remote operation, you can have an overview of the entire stamping workshop, and control/monitor each process equipment.

The system links 2D and 2.5D UI elements with server data. When the user clicks on equipment on the page, a new page pops up, displaying the equipment’s detailed internal structure. This provides a more accurate view of the internal operation process. Raw materials are extracted from their storage area and transported to the stamping workshop via a robotic arm. After being stamped, some molds are delivered to the welding workshop by vehicles, while others are temporarily stored in the mold storage area for future use.

Hightopo allows for custom 2D interaction logic and can also be expanded to 3D and VR scenes. This means that users do not have to rebuild the interaction logic or be concerned about the differences in the mouse, touch screen, and VR interfaces. The system presents relevant data in a clear manner on both sides of the page and inside the scene, offering customers multi-dimensional technical assistance such as decision-making, early warning, and positioning.

To view the equipment ledger and operation details, simply click on the corresponding press machine. This will open a pop-up window displaying data from the industrial control data content of the user’s existing system. On the left-hand side, you will see a list of all operating or faulty equipment, including clamping machines, presses, conveyor belts, and washing machines. The search function can be used to locate the corresponding equipment quickly and easily. Clicking on a specific device will display detailed fault information and real-time operating parameters on the right-hand side of the window.

The real-time alarm information is displayed in a table format at the lower left corner of the page. This includes the name, time, and location of each device that is in alarm. The production situation can be combined with different production lines to carry out data visualization statistics according to the line body model, line body state, part number, part name, model, and production quantity of the production line.

The real-time display of the network status of Programmable Logic Controllers (PLCs) across various product lines will assist workshop staff in promptly identifying any issues with the production line’s normal functioning.

By producing the aforementioned content, the system can assist users in achieving production process discipline inspection. The content includes:

Verify that the product drawings, standards, and design documents are complete and can fulfill production requirements, while also complying with relevant regulations on process management.
Ensure that the process documents are complete and can satisfy production needs. These documents typically include work instructions, inspection instructions, and metal consumption quotas used on-site in the stamping workshop.
Ensure the accuracy, completeness, and uniformity of technical documents.
Confirm that materials, work-in-progress, and finished products meet process requirements, and assess the technical status of process equipment and tooling.
Verify the accuracy and timeliness of quality inspections, as well as the management situation on the production site.
Evaluate the performance of process management work and assess the implementation of work instructions by various personnel.

Welding workshop

Hightopo offers support for overlapping, rotating, and zooming 2D and 2.5D scenes. It also can simulate welding workshop operations and combines various welding processes to create realistic animations and scene constructions.

This scenario primarily involves using stamping welding, CO2-shielded welding, and laser welding in the automotive welding process. The process includes the following steps: floor assembly, left and right-side panel assembly, ceiling assembly, door cover installation, engine cover installation, trunk cover installation, robot resistance spot welding, stud welding, nut welding, glue application, surface adjustment (board repair), transportation to the parking area, and final assembly.

In the process of welding automobile parts, stamping welding is used to weld the basic body, frame, parking space, five doors, and one engine hood. For small parts or thick reinforcements that cannot be welded by stamping welding, CO2-shielded welding is used. Laser welding is mostly used in automobile manufacturing to weld large cover parts and appearance parts, such as the assembly of segmented doors, and the welding of top covers and side panels. The Hightopo system uses advanced visualization technology to simulate each step and achieve a digital twin simulation of the above processes, enabling users to monitor the process with a perfect visual experience without leaving their offices.

The real-time position of the current part in the workshop is displayed in the lower-left corner of the page, including various product models and output indicators to help operators understand changes comprehensively and in a timely manner. In case of detecting a problem or fault, the staff can also track the location in real time, enabling faster, more accurate, and scientific decision-making.

This system not only includes the simulation of the process flow, but also supports monitoring the current production line data, the real-time completion rate of the production line, the storage of parts, the storage location, and the total energy consumption of the workshop.

Paint workshop

The process flow of the automobile painting workshop involves several steps, including cleaning and dust removal, painting preparation, painting construction, drying and repairing. Initially, the workshop cleans and removes dust from the car, removing oil stains, moisture, and dust from the car surface. Next, it prepares the car for painting to ensure a smooth paint surface. Then, it carries out painting construction, using different painting methods (such as pistol painting or electric spray gun painting) based on the car model and specification. Finally, it dries and repairs to ensure the smoothness and gloss of the car surface coating.

This module will follow the steps of degreasing, surface conditioning, phosphating, pre-cleaning, draining before electrophoresis, drying, robot painting, PVC drying, sealant, grinding, retouching line, delivery line, and reserve area.

To achieve high-quality painting effects and good anti-corrosion performance, it is necessary to conduct surface treatment on the body before painting, conduct an overall inspection of the product, and repair and remedy repairable defects.

After that, the car body is sent to the spray gun position in the powder spray booth through the conveyor chain to prepare for the spraying operation.

The last step is the painting line process. Spray painting is a surface treatment that covers the products and semi-finished products that have passed the inspection. Spray paint can play the role of anti-rust and anti-corrosion.

Hightopo software can handle more than 100,000 levels of 2D, and 2.5D table tree component graphics, meeting the needs of massive IoT devices and data scenarios. In this system, it can fully reflect the complex production process of the paint shop.

Hightopo’s 2D animation technology can completely restore the entire car painting process. And clearly, accurately, and intuitively displaying each process to users.

By using Hightopo’s 2D chart components and data binding, the production data and energy consumption of the production line can be obtained and displayed in real time. The system can also make an overall display of the planned output and target output, as well as the operation of the robotic arm. Animated effects can make the entire page look more concise and beautiful, providing a high-quality user experience.

The statistics of the electrophoretic parts, intermediate time, drying room, and decoration room in the paint shop can be conveniently displayed. The system also supports combined VR/AR display, allowing users to immerse themselves in the virtual environment for experiences, especially for large-scale scenes such as factories, workshops, and production lines.

Summary

Hightopo software builds a complete digital simulation of the automobile production line process from 2D to 2.5D through data model + UI library + 2D topology, aiming to contribute to the construction of “digital twin + configuration monitoring + industrial Internet” and realize intelligent manufacturing.

Compared with traditional configuration software such as InTouch/IFix/WinCC, Hightopo’s web-based platform is more suitable for the general trend of transformation from C/S to B/S. Its multi-element-rich visual components and fast data binding methods can be used for the rapid creation and deployment of the system, completing real-time data monitoring based on web services and multi-user access on the server side. It can be applied to the power system, water supply system, petroleum, chemical industry, and other fields, providing various clear and beautiful visualization services in 2D, 2.5D, and 3D for various industrial scenes.

You can go to our official website to view more cases and effects:

https://www.hightopo.com/demos/en-index.html

Hightopo YouTube: https://www.youtube.com/hightopo
Hightopo LinkedIn: https://www.linkedin.com/company/hightopo
Hightopo Facebook: https://www.facebook.com/hightopo2d3d/
Hightopo Twitter: https://twitter.com/hightopo2d3d
Hightopo Instagram: https://www.instagram.com/hightopo/

How to apply VR to industries such as production, medical care, and training?

Hightopo — Thu, 16 Mar 2023 08:53:39 +0000

Virtual reality technology (VR) has important features such as perception, immersion, and interactivity. It integrates the latest high-tech development achievements such as 3D graphics, display, and simulation, to generate a digital environment that is highly similar to the real world in terms of vision, hearing, and touch. So that people in the virtual world can have an immersive feeling and experience.

Hightopo's self-developed “HT for Web” product can interact with various objects in the virtual environment by adapting to VR devices, such as grabbing, moving, and splitting. Now it has compatible with many VR devices such as HTC Vive, Oculus, Qeust2, Pico, etc.

VR in industry
In industrial scenarios, VR technology is combined with 3D visualization to simulate the real environment. It generates a controllable virtual environment space that solves many disadvantages of traditional industries in design, research and development, assembly, maintenance, training, etc.

The Hightopo VR Smart Industrial scene uses a self-developed graphics engine to simulate and restore the physical equipment model in 1:1. Covering many industrial scenarios such as production process monitoring, equipment point inspection, remote fault diagnosis, and unattended operation. It supports presets to realize roaming, manual inspection, automatic inspection, and other operational requirements. Give people a strong sense of immersion, realism, and picture.

VR Truck Production Line
Taking the “Digital Twin of Hightopo Heavy Truck Production Line” as the background, we used the self-developed HT for Web product to truly reproduce the basic operation, operation processing, and fault analysis of the scene.
Relying on VR equipment, users can walk in a 360° direction after entering the virtual environment. It simulates a series of behaviors such as holding, putting, grabbing, and throwing in the real environment and helps users feel the real state of the product in the virtual environment. It also can help people to closely grasp the status of R&D, manufacturing, test operation, and O&M in real time.

In the virtual assembly scene, we use 3D visualization, remote control, and other functions to strengthen compatibility with digital twin models and data. Help users improve production and quality simultaneously, increasing capacity utilization and reducing rework frequency.
Our VR products support operations such as component disassembly, inspection and maintenance, and practical training in the virtual environment. This can help operators consolidate their operating skills and understand the structure and operation principle of the car more conveniently.

VR Equipment Disassembly Demonstration
In the past, when studying the use and structure of industrial equipment, people usually need to disassemble and reassemble the equipment manually. However, many mechanical devices are inherently dangerous, they will bring risks during the process of dismantling and assembling. What's more, some equipment is expensive, and repeated disassembly will reduce its service life.
Hightopo VR visualization solutions can perfectly help us solve these problems.
First, we build digital twins of industrial equipment. Then, after entering the virtual environment, VR handles are used to grab the model to the desired position, allowing people to view it in detail from any angle. In this way, the problem of the incomplete display, caused by the actual mechanical equipment being too heavy, too expensive, and too large, is effectively solved.

Secondly, we added a dismantling module for the device layout. This module supports users to use the VR handle to disassemble, assemble, and rotate the equipment parts, so as to know the details of the internal layout. Cooperating with the 2D panel data can also tell people the function of each component.
In addition, it also supports a transparent display of equipment so that operators can understand its internal structure and operating principles. Hightopo software can provide a unique and innovative VR flashlight perspective inspection function to help users directly view the internal structure of the device, then shorten the maintenance cycle of the device, and improve the efficiency of operation.
And one more thing, Hightopo software also supports the cross-platform operation. Both the mobile and PC can open the 3D scene and realize the conventional touchscreen operation, or drag and drop the device by mouse to disassemble and restore it.

VR Smart Data Center
As a brand-new product form, VR technology has successfully upgraded the "human-computer interaction" mode to the "human-computer integration" mode.

Hightopo software converts data center visualization projects into VR scenes. The operation and maintenance personnel can use VR equipment to closely check the asset layout, airflow temperature, and energy efficiency status of the data center.

VR Emergency Escape Drill
For enterprises, effective emergency escape drills are very important to ensure their operation given possible dangerous accidents such as fires, collapses, stampedes, or severe weather such as typhoons, tsunamis, and mountain torrents.
Based on CAD drawings, bird's-eye views, and images/videos of the equipment, Hightopo software modeled and restored relevant scenes, buildings, and devices, and built a virtual emergency escape drill scene. After wearing VR equipment, employees can start the emergency escape process of simulating various emergencies. With the visual simulation drills, the sense of immersion, interaction, and presence is highly integrated to help people familiarize themselves with the knowledge of escape drills.

VR Smart Healthcare
VR smart healthcare can be used in the scenarios such as surgical training, rehabilitation plans, and clinical teaching. It can help doctors learn professional knowledge and practice professional skills intuitively, efficiently, and safely. Compared with traditional surgical teaching, medical VR technology has the advantages of high immersion, remoteness, and repeatability. It is crucial to the integrity, accuracy, and scientificity of medical information visualization content.
Hightopo software has built a 3D visualization solution for smart hospitals. This scene also supports users to simulate the patient's lesion signs in real-time by using VR technology. With 3D imaging data and VR, the real situation of the diseased area can be reproduced. In turn, it helps doctors understand the condition of the disease in an all-round, three-dimensional, and multi-perspective way, helps them formulate good surgical strategies, and enhances the accuracy of surgical positioning.

In medical anatomy teaching, the VR virtual human body can also help medical students to practice on the virtual operating table, and efficiently assist them in understanding the structure of human tissue and the characteristics of diseases.

VR Electricity Energy
Due to the large scale of the power system, complex facilities, and fine division of labor, the requirements for employees in power generation, power supply, and power construction are particularly strict.
Hightopo Smart Grid Solution allows users to roam and inspect immersively in virtual reality scenes by using VR glasses, handles, and other devices. For example, you can view key information such as device configuration, operating status, meter count, etc., and use the VR handle to remotely start and stop the device.

In order to provide a comprehensive and practical training experience, our virtual substation scene also supports the remote control of the operation panel, main switch, left ground switch, right ground switch, and other components through VR equipment, allowing users to directly see the operating principle of the device.

Summarize
Today, with the leapfrog development of science and technology, VR/AR/MR has been rapidly developed and applied in fields such as education and training, industrial manufacturing, military aerospace, medical care, cultural tourism exhibition halls, and emergency response. Hightopo software is committed to deeply integrating VR technology with various industries, gradually eliminating doubts and ambiguities in operation training, design planning, entertainment display, security inspection, and making forward-looking judgments to help customers reduce their time costs and break through geographical restrictions.
In addition to VR/AR visualization technology, Hightopo also provides web visualization solutions such as BIM, GIS, XR, MR, and 2D configuration/3D configuration. Our self-developed core engine "HT for Web" supports the graphical configuration of SCADA and builds low-code or zero-code IoT platforms at the PaaS and SaaS levels. Related products have been used in various fields such as smart cities, parks, buildings, factories, intelligent manufacturing, water affairs, energy, photovoltaics, wind power, electric power, new infrastructure, operation and maintenance, government affairs, transportation, medical care, finance, and scientific research.

Readers who are interested in 2D /3D visualization can click on the link below to browse other examples. HT will give you a lot of incredible things.

hightopo.com

JavaScript/WebGL 3D Visualization of Iron and Steel Plant | Web HMI/SCADA

Hightopo — Tue, 14 Feb 2023 01:35:37 +0000

[Click here to see more demonstrations including Digital Twins, GIS, VR, BIM, etc.]

Click the below link to see the video:
Iron and Steel Plant Management System
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.

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.

"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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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

The Application of GIS (Cesium) in Smart City

Hightopo — Thu, 19 Jan 2023 14:07:46 +0000

Click to see more demonstrations including Digital Twins, GIS, VR, BIM, etc.

An Integrated Command and Control Centre (ICCC), as the name suggests, works as a brain for all smart solutions implemented across a city — be it a surveillance system, smart traffic management, waste management, utility management, environmental sensors, public information system, etc.

Responsible development requires robust spatial information that is refined and constantly updated. In addition, foresight and problem-solving skills are required to put data to good use. This challenge has made Geographic Information System (GIS) invaluable to the city ecosystem to integrate every aspect of a city from conceptualization and planning to development and maintenance. Combine GIS with Cloud Computing, Big Data, IoT, Data Visualization and other kinds of technologies, to help different stakeholders prepare for exigencies, coordinate and manage response efforts, and enhance the ongoing efficiency of city operations.

Hightopo’s "HT for Web" visualization platform integrated with GIS, supports loading geographic data from various kinds, such as 3D Tiles, Map Tiles, etc. Visualizing massive data such as POI (Point of Interest) Data, Traffic Data, Urban Infrastructure Data, etc.

The Smart City concept aims at developing a comprehensive system that uses geospatial data to enhance the understanding of complex urban systems and to improve the efficiency and security of these systems. This geospatial data concerns (i) the urban built environment such as infrastructure, buildings and public spaces, (ii) the natural environment such as biodiversity, green spaces, air quality, soil and water, and (iii) urban services such as transport, municipal waste, water, energy, health and education.

Environment
Smart city planners can model potential buildings and predict short and long-term impacts on the environment. Conservationists can choose where best to incorporate green spaces or plan conservation projects, as well as analyze air quality and spot its causes in different areas of the city.

Governance
City agencies often use location technology to share data across silos and operate more efficiently. Smart city operation platform centralizes the city’s open data and communicates with citizens about smart city initiatives.

Human Capital
Strategists and business leaders can analyze the demographics of a city’s population and use that insight to plan improvements that attract specific talent.

Mobility and Transportation

GIS empowers the assets management and long-term plans improvements of the country’s traffic. Meanwhile, IoT-based applications can be used to optimize the flow of traffic in the city.

Combined GIS with building information modelling (BIM) technology, underground infrastructures can be undertaken by knowing the precise locations of them and, to safely weave new tunnels through the built environment.

Urban Planning
City leaders, businesses, and architecture, engineering, and construction (AEC) firms can see how a structure will look before they decide to build it, measuring views from a virtual apartment window or the shadow of a skyscraper on a local park. And Digital Twin and location data is come to help. Utilizing 3D models of their physical infrastructure and location data as a connective thread to experiment with virtual plans.

Click to see the video on YouTube:
Intelligent Operations Centre for Smart City

The Business Value of Smart Cities

The "HT for Web" GIS is intended to helping users integrated location information (GIS related) into their own projects, and reduce users’ learning and investment costs for GIS. Combined with the powerful visualization engine, enable superimposed display of different map tile data, oblique photography, 3D model, POI and other data; Combined with "HT for Web" BIM, enable the combination of BIM model and GIS Visual display; Combined with "HT for Web" 3D video fusion, to achieve real-time video fusion display in GIS scenes. The "HT for Web" GIS makes the visual display of GIS data richer, clearer and more intuitive, empowers users with data-driven insight.

Conclusion
Hightopo "HT for Web" GIS provides local government with tools to develop smarter cities and deliver better services to the community. As a collaborative platform, it enables government agencies to share spatial data to break through traditional data silos and build a more transparent organization. Furthermore, the platform can be scaled to provide the tools for enterprise-wide data-driven decision making that improves management efficiency. Its mobility capabilities allow staff to access data any time, on any device, from anywhere to ensure enterprise data is always accurate and up to date.

3D heat map (thermal cloud) based on HTML5 Canvas

Hightopo — Fri, 30 Dec 2022 06:52:21 +0000

[Click here to see more demonstrations including Digital Twins, GIS, VR, BIM, etc.]

Foreword
Data contains value, while the value of data needs to be discovered and explored with IT technology. Visualization technology can help people better analyze the data . The quality of information depends largely on how it is presented. In the data analysis, heat map is undoubtedly a good way.
At present, people can find many heat map effects on the Internet. But many of them are 2D effects or pseudo 3D. Some people may know the 3D point cloud, while it's not very good for performance experience. In this article, we written a new 3D heat map effect here.
Final Effects:

Application Scenario
A heat map of the distribution of people in the building:

Look at the heat map in the building. The more people the area has, the deeper color it gives us. This scenario can be applied to security surveillance in buildings . In the event of an emergency, it can help people to make scientifically and efficiently formulate diversion strategies to provide strong help and support, and finally reduce losses. It can also be used for early warning of fire disaster and real-time temperature monitoring of the area.
Indoor equipment temperature thermodynamic map:

The traditional data center reporting method is boring and monotonous, with little sense of reality and poor interaction . With the help of the 3D heat map, the operation and maintenance engineers can greatly improve their work efficiency and reduce the probability of problems in the data center.

Overall Procedure
After the scene has been deserialized, set the initial parameters of the heat map . Add the heat map model into the scene to simulate the 3D heat map effect, and finally add functions such as scanning, skin changing, and temperature prompts.

1. Data preparation
Draw the area of the heat map in the scene, as shown in the figure

At first let's determine the areaNode of the area to generate the heat map, and then randomly generate 20 points to simulate the source of heat, including the coordinate position (the coordinate is a vertex relative to the red cube) and the thermal value temperature .
The following is the main code of this part:

function getTemplateList(areaNode, hot, num) {
  let heatRect = areaNode.getRect();
  let { width, height } = heatRect;
  let rackTall = areaNode.getTall();
  hot = hot + this.random(20);
  let templateList = [];
  for (let i = 0; i < num; i++) {
      templateList.push({
          position: {
              x: 0.2 * width + this.random(0.6 * width),
              y: 0.2 * height + this.random(0.6 * height),
              z: 0.1 * rackTall + this.random(0.8 * rackTall)
          },
          temperature: hot
      });
  }
  return templateList;
}
let heatMapArea_1 = dm.getDataByTag('heatMapArea_1');
let templateList_1 = this.getTemplateList(
  heatMapArea_1,
  70,
  20
);

2. Initialization
Let's use the ht-thermodynamic.js plugin to generate heat maps.
After the data of the heat source (in step 1) is ready, configure the parameters of the heat map. The parameters are described as following.

// The default configuration
let config = {
  hot: 45,
  min: 20,
  max: 55,
  size: 50,
  pointNum: 20,
  radius: 150,
  opacity: 0.05,
  colorConfig: {
      0: 'rgba(0,162,255,0.14)',
      0.2: 'rgba(48,255,183,0.60)',
      0.4: 'rgba(255,245,48,0.70)',
      0.6: 'rgba(255,73,18,0.90)',
      0.8: 'rgba(217,22,0,0.95)',
      1: 'rgb(179,0,0)'
  },
  colorStopFn: function (v, step) { return v * step * step },
};
// get the size info of areaNode
let rackTall = areaNode.getTall();
let heatRect = areaNode.getRect();
let { width, height } = heatRect;
if (width === 0 || height === 0) return;
// init the heat map
let thd = this.thd = new ht.thermodynamic.Thermodynamic3d(g3d, {
  // the 3D box used by heat map
  box: new ht.Math.Vector3(width, height, rackTall),
  // min and max temperature
  min: config.min,
  max: config.max,
  // the render interval of each piece
  interval: 40,
  // false means use the max temperature (not sum) during crossed temperature regions
  remainMax: false,
  // opacity of each piece
  opacity: config.opacity,
  // color step function
  colorStopFn: config.colorStopFn,
  // color range 
  gradient: config.colorConfig
});

3. Load the heat map

Set the data object of thd with the heat source generated in the first step, and call thd.createThermodynamicNode() to generate the 3D node of the thermodynamic map. Set its related information and add this primitive to the 3D scene. Such a simple 3D heat map is complete.

// load the heat map
function loadThermodynamic(thd, areaNode, templateList, config) {
  thd.setData(templateList);
  // x,y,z faces
  let node = this.heatNode = thd.createThermodynamicNode(config.size, config.size, config.size);
  let p3 = areaNode.p3();
  node.setAnchorElevation(0);
  node.p3(p3);
  node.s({
      'interactive': true,
      'preventDefaultWhenInteractive': false,
      '3d.movable': false,
      "wf.visible": false
  });
  g3d.dm().add(node);
}

The introduction of the main body is done. Now let's talk about some other useful functions of the demo.

4. Temperature Label
The temperature label is used to show the real time temperature under the mouse.

Since in the 3D scene, it is difficult to judge the current mouse coordinates (x, y, z), so we put the tip panel on the 2D canvas, and embed the 2D drawing on the upper layer of the 3D scene. By listening to the onMove event in the 3D scene, you can control the visibility and value change of the tip panel.
tip visibility control: when the mouse moves into the heat map area, the tip is displayed, otherwise it is hidden. We can monitor the onLeave event to know when to hide the tip.
Tip value control: We can call the ht-thermodynamic.js method thd.getHeatMapValue(e.event,'middle') to get the temperature value of the current mouse relative to the heat map area, and change the value attribute of the tip panel in real time.
Code:

g3d.mi(e => {
  if (e.kind === 'onMove') {
      let { clientX, clientY } = e.event;
      if (this.templateTip) {
          let value1 = this.thd1.getHeatMapValue(e.event, 'middle');
          let value2 = this.thd2.getHeatMapValue(e.event, 'middle');
          if (value1 || value1 === 0 || value2 || value2 === 0) {
              let position = g2d.getLogicalPoint({ x: clientX, y: clientY })
              this.templateTip.a('value', value1 || value2 || 0)
              let { width, height } = this.templateTip.getRect()
              this.templateTip.setPosition({ x: position.x + width / 2, y: position.y - height / 2 })
          }
      }
  } else if (kind === 'onLeave') {
      let tag = data.getTag()
      if (tag && tag.hasOwnProperty('hoverBlock') > -1) {
          this.g2d.getView().style.cursor = 'default';
      }
      this.templateTip && this.setVisible(this.templateTip, false)
  }
})

5. Scan

Replace thd.createThermodynamicNode() in the third step. When generating a heat map object, instead of directly returning a model, select a certain direction for "cutting". Divide the length of this direction into n parts, and use the thd.getHeatMap() method to obtain the thermal image of each piece . The value of n can theoretically take any value . But for a better rendering effect, here we take 50, so that it will not be use too much time during the first rendering. Every time a surface is cut out, we dynamically create a ht.Node at the relative position of the thermal area. And then use ht.Default.setImage() to register the cut out surface as a picture and set it as the texture of the node (only need to set the two faces in the cutting direction). Finally, add all nodes to dataModel (the model that carries all nodes in ht).
There're two ways to finish the scan effect. The first is to create only one node instead of n nodes when doing cutting in step 3, and then dynamically set the texture and coordinates of the node to simulate the scanning effect; the second method still creates n nodes, and then hidden all of them. We display each of then at different times. Here we use the second way, as the first one needs to frequently modify multiple attributes, and the second one only needs to control the '3d.visible' attribute of the node.
The main code is as follows:

let length;
if (dir === 'z') {
    length = rackTall;
}
else if (dir === 'x') {
    length = width;
}
else if (dir === 'y') {
    length = height;
}
let size = config.size;
for (let index = 0; index < size; index++) {
    const offset = length / size;
    let timer = setTimeout(() => {
        let ctx = thd.getHeatMap(index * offset, dir, colorConfig);
        let floor = this.getHeatFloor(
            areaNode,
            dir,
            ctx,
            index,
            size,
            config
        );
        this.floors.push(floor);
        dm.add(floor);
    }, 0);
    this.timers.push(timer);
}
function start() {
    this.hide();
    this.anim = true;
    this.count = 0;
    let frames = this.floors.length;
    let params = {
        frames, // animation frames
        interval: 50, // interval between frames
        easing: t => {
            return t;
        },
        finishFunc: () => {
            if (this.anim) {
                this.start();
            }
        },
        action: (v, t) => {
            this.count++;
            this.show(this.count);
        }
    };
    this.scanning = ht.Default.startAnim(params);
}
function hide(index) {
    if (index || index === 0) {
        this.floors.forEach((i, j) => {
            if (index === j) {
                i.s('3d.visible', false);
            }
            else {
                i.s('3d.visible', true);
            }
        });
    }
    else {
        this.floors.forEach(i => {
            i.s('3d.visible', false);
        });
    }
}
function show(index) {
    if (index || index === 0) {
        this.floors.forEach((i, j) => {
            if (index === j) {
                i.s('3d.visible', true);
            }
            else {
                i.s('3d.visible', false);
            }
        });
    }
    else {
        this.floors.forEach(i => {
            i.s('3d.visible', true);
        });
    }
}

6. Switch the Theme

The way of skin change: dynamically modify the background color and wall color of ht.graph3d.Graph3dView according to different scene values.
code:

function changeSkin() {
        let backgroundColor = this.g3d.dm().getBackground(),
            dark_bg = this.g3d.dm().getDataByTag('dark_skin'),
            light_bg = this.g3d.dm().getDataByTag('light_skin');
        if (backgroundColor !== 'rgb(255,255,255)') {
            this.g3d.dm().setBackground('rgb(255,255,255)');
        } else {
            this.g3d.dm().setBackground('rgb(0,0,0)');
        }

        dark_bg.s('2d.visible', !dark_bg.s('2d.visible'));
        dark_bg.s('3d.visible', !dark_bg.s('3d.visible'));

        light_bg.s('2d.visible', !light_bg.s('2d.visible'));
        light_bg.s('3d.visible', !light_bg.s('3d.visible'));
    }

The End
This is all about the 3D heat map. Readers who are interested in 2D /3D visualization can click on the link below to browse other examples. HT will give you a lot of incredible things.
https://www.hightopo.com/demos/en-index.html

Building 3D Smart City Based on JavaScript and WebGL

Hightopo — Wed, 28 Dec 2022 07:37:09 +0000

[Click here to see more demonstrations including Digital Twins, GIS, VR, BIM, etc.]

With the enlargement of city size, it is difficult to thoroughly display the city panorama in traditional ways, but with the application of 3D technology, the way of 3D city group appears to present the city panorama dynamically and interactively. With the smart city system, through the way of Web visualization, city managers can more timely understand the traffic conditions, urban fire control, power management and other aspects of operation, and make processing.

This demo uses "HT for Web" graphic engine, a lightweight HTML5/WebGL modelling scheme. Traditional smart buildings/building automation/building security/smart parks often use BIM (Building information modelling) software, such as Revit or Bentley for Autodesk, but these BIM modelling data are often too bulky, with most of the detailed information on the building. Universal self-control has little meaning, but it affects the trend of industry Web SCADA or Web configuration monitoring. So we use the scheme of lightweight HTML5/WebGL modelling with Hightopo’s HT for Web products to achieve fast modelling, runtime lightweight and even mobile terminal browser to visualize operation and maintenance in 3D.

demo address: https://www.hightopo.com/demo/city/

Preview :

Code Implementation

Load 3d Scene
Create a new 3d scene and add it to the page.



const g3d = new ht.graph3d.Graph3dView();
const dm3d = g3d.dm();
g3d.addToDOM();

The addToDOM function loads the scene into the HTML body by default and fills the window.

Next, the city scene json is deserialized, and the scene’s perspective, center position, sky box are set in the callback of the deserialization function, and each meta-information is obtained, calling the startAnim function:



g3d.deserialize('scenes/ny.json', () => {
  g3d.setEye([1132.8386351821287, 1916.836416970022, 1479.5345608290288]);
  g3d.setCenter([519.9741236104874, 273.4741921410557, -319.58669041297884]);
  g3d.setSkyBox(dm3d.getDataByTag('skyBox'));

  // Primitives for obtaining diffusion effects
  scaleList.push(
      dm3d.getDataByTag('scaleBlue'),
      dm3d.getDataByTag('scaleRed')
  );
  ···

  // Start animation
  startAnim();
});

Animation Implementation
The loaded city scene is as follows:

We can see the blue and yellow water ripple effect in the scene, the flow effect of roads, fire passages, the effect of floating up and down, and the rotating logo and satellite.

Animations are all implemented through ht.Default.startAnim. Let’s start by understanding:



ht.Default.startAnim({
  // Number of animation frames
  frames: 12,
  // Animation Frame Interval Milliseconds
  interval: 10,
  // Animation Slow Function, default to ht.Default.animEasing
  easing: function(t){ return t * t; },
  // Functions called after the animation ends
  finishFunc: function(){ console.log('Done!') },
  // The action function must be provided to implement property changes during animation
  action: function(v, t){
    // This example shows animating a node node from position p1 to position p2
    node.setPosition(
        p1.x + (p2.x - p1.x) * v,
        p1.y + (p2.y - p1.y) * v
    );
  }
});

These are Frame-Based animations, in which the user controls the animation effect by specifying the number of frames in the frame animation and the interval animation frame interval parameter.

ht’s Animation Manual can be consulted: Animation Manual

The following describes the implementation of each effect in turn.

Ripple effect

Preview:

Code:



function waveScale(obj, dlt, max, min) {
  obj.forEach(node => {
    // Increase in diffusion radius
    let s = node.getScaleX() + dlt;
    // Reset to minimum when diffusion radius is greater than maximum
    if (s >= max) s = min;
    // Set zoom values in x,y,z direction
    node.setScale3d(s, s, s);
  });
}
function startAnim() {
  ht.Default.startAnim({
    frames: Infinity,
    interval: 20,
    action: () => {
　　　 // Diffuse Blue and Diffuse Red
      waveScale(scaleList, dltScale, maxScale, minScale);
    }
  });
}

Rotation effect

Preview:

Code:



function rotateAction(obj, dlt) {
  // Gets the value of the radius of rotation of the primitive, without zeroing it
  let rotation = obj.getRotation() || 0;
  // Radian increase per frame
  obj.setRotation(rotation + dlt);
}
function startAnim() {
  ht.Default.startAnim({
    frames: Infinity,
    interval: 20,
    action: () => {
      // Satellite Rotation
      rotateAction(star, dltRoattion);
    }
  });
}

Flow effect

Preview map:

Flow effect is a very common effect, and the process of implementation is relatively simple, just need to change the offset value of the uv map dynamically. In this example, multiple flow effects are achieved by dynamically increasing or decreasing the U direction of the map on the six sides of the model:



function uvFlow(obj, dlt) {
  // Change map uv coordinates for flow effect
  let offset = obj.s('all.uv.offset') || [0, 0];
  obj.s('all.uv.offset', [offset[0] + dlt, offset[1]]);
}
function startAnim() {
  ht.Default.startAnim({
    frames: Infinity,
    interval: 20,
    action: () => {
      // Trail Flow Effect
      uvFlow(roadSmall, dltRoadSmall);
    }
  });
}

Floating effect

Preview map:

Code:



function blockFloat(obj, dis, dlt) {
  obj.forEach(node => {
    let startE = node.a('startE');
    if (startE == null)
    // Gets the value of the primitive in the y (height) direction
      node.a('startE', startE = node.getElevation());
    let float = node.a('float') || 0;
    // Set status as direction
    let status = node.a('status') || 1;
    node.setElevation(startE + dis * float);
    if (float > 1 || float < 0)
    // Change direction beyond threshold
      node.a('status', status = -status);
    float += dlt * status;
    // Reset Primitive Height
    node.a('float', float);
  });
}
function startAnim() {
  ht.Default.startAnim({
    frames: Infinity,
    interval: 20,
    action: () => {
      // Floating effect of fire sign
      blockFloat(fireFloatList, fireFloadDis, fireFloatDlt)
    }
  });
}

In this way, a basic effect is achieved.

HT’s 3D urban agglomeration scheme not only works well on the big screen, but also has a good experience on the mobile side, which enables city managers to get real-time monitoring information anytime and anywhere. Here are two preview maps on the mobile browser for you to experience:

HT contains hundreds of industrial Internet 2D 3D visualization applications. Click here to check more demos:
https://www.hightopo.com/demos/en-index.html

How to simulate the neural network with JavaScript (attached source code)

Hightopo — Wed, 21 Dec 2022 03:20:30 +0000

The target we will achieve:
Neural network

[Click here to see more demonstrations including Digital Twins, GIS, VR, BIM, etc.]

Initialization

The initialization work includes the preparation of colors, 3d scene, layout, 3d model, control pane, etc.

        var init = function() {
            // prepare 3d scene and datamodel
            var dm = new ht.DataModel(),
                g3d = window.g3d = new ht.graph3d.Graph3dView(dm);
            g3d.getBrightness = function() { return null; };
            g3d.isMovable = function(node) { return node.s('shape3d') !== 'custom'; };
            g3d.addToDOM();

            // create node and edges
            var edgeList = initDataModel(dm),

            // init the control pane and elastic layout
            forceLayout = new ht.layout.Force3dLayout(g3d);
                        // the core code
            forceLayout.onRelaxed = function() {
                edgeList.forEach(updatePipeline);
            };
            forceLayout.start();
            initFormPane(g3d);
        };

Create Nodes and Edges

After the environment is ready, let's create the nodes (balls) and edges. This step is quite simple, when nodes are created, we just need to put the source node and target node into their Edge.
There're two ways to set the source and target endpoint for one Edge:

Specify the source and target node when creating Edge, i.e. new ht.Edge(node1, node2);
Use edgeInstance.setSource() and edgeInstance.setTarget() after the Edge has been created

Meanwhile, we'll create one 3d pipeline to connect the source node and target node. Each pipeline will be saved in its corresponding edges.

        var createNode = function(dm) {
            var node = new ht.Node();
            node.s({
                'shape3d': 'sphere',
                'shape3d.color': randomColor()
            });
            node.s3(40, 40, 40);
            dm.add(node);
            return node;
        };

        var createEdge = function(dm, node1, node2) {
            // create one self-defined 3d pipeline
            // this pipeline will be used between source node and target node 
            var node = new ht.Node();
            node.s({
                'shape3d': 'custom', // self-defined 3d model
                'shape3d.color': '#ECE0D4',
                'layoutable': false
            });
            dm.add(node);

            // can specify the source node and target node when create the Edge.
            var edge = new ht.Edge(node1, node2);
            edge.a('pipeline', node); // use one attribute of edge to save the pipline
            edge.s('edge.color', 'rgba(0, 0, 0, 0)');
            dm.add(edge);

            return edge;
        };

Update pipelines

The core code of this project is to overload the "onRelaxed" function of ht.layout.Force3dLayout.
The ht.layout.Force3dLayout class provides 3D force layouts, and constructors can input both DataModel and Graph3dView parameters. By default, only the unselected datas are laid out, and if the constructor parameter is Graph3dView, then the isMovable and isVisible functions of the view component will affect whether the data can be laid out, and the style layoutable attribute on the data can also be set to false to prevent datas from participating in the layout.
In this project, the updatePipeline function is created to update each pipeline:

forceLayout.onRelaxed = function() {
                edgeList.forEach(updatePipeline);
            };

Now the main work is how to update the pipeline corresponding to their edges. Since we have saved the pipeline into each edge attribute, and the source and target node can be get from each edge by edge.getSourceAgent() and edge.getTargetAgent(), we can then use their position to recalculate the shape of the pipeline.

        var updatePipeline = function(edge) {
            // get the pipeline from edge attribute
            var pipeline = edge.a('pipeline');
            pipeline.s3(1, 1, 1);
            pipeline.p3(0, 0, 0);

            // get the source node and target node
            var node1 = edge.getSourceAgent(),
                node2 = edge.getTargetAgent();
            // update the pipeline based on the position of source and target node
            pipeline.s('mat', createMatrix(node1.p3(), node2.p3(), 20));
        };

        var createMatrix = function(p1, p2, width) {
            var vec = [p2[0]-p1[0], p2[1]-p1[1], p2[2]-p1[2]],
                dist = ht.Default.getDistance(p1, p2);
            return ht.Default.createMatrix({
                s3: [width, dist, width], // size
                r3: [Math.PI/2 - Math.asin(vec[1]/dist), Math.atan2(vec[0], vec[2]), 0], // rotation
                rotationMode: 'xyz',
                t3: [(p1[0]+p2[0])/2, (p1[1]+p2[1])/2, (p1[2]+p2[2])/2]
            });
        };

At this time, the main work has been done. Let's take a look at the neural network:
Neural network
To get the source code, just open the link and press F12.

Find more cool demos here

Airport Digital Twins | Airport Visualization with JavaScript and WebGL

Hightopo — Mon, 12 Dec 2022 02:35:42 +0000

Daxing International Airport is known as the first of the “Seven Wonders of the New World”, which spanning 7.5 million square feet — the equivalent of 98 soccer fields. With the runways and annexes, its whole surface covers 18 square miles. In today’s continuous digital transformation, Daxing Airport has created the most eye-catching, theoretical and technologically innovative “Smart Airport” model project in the world’s airports.

In this article, let’s take a look at the 3D visualization of this airport.

System analysis
Picture 1: International routes issued by major domestic airports
At its most basic, the whole scene supports rotation, translation and scroll wheel zoom. It displays various international routes starting from major domestic international airports connect all continents of the world.

Picture 2: Comprehensive visualization of flight operation status
The data panel on the right side is used to display the flight information of the airport, including the flight on time rate of the day, the real-time status of each flight, the flight flow, passenger flow, logistics information, etc. This information helps monitors predict the operational capabilities in advance. At the same time, the airport staff can use it to get the estimated arrival time of the flight to ensure the progress and efficiency of the flight.

Picture 3: 3D simulation of the whole Airport

Building appearance simulation

The overall configuration of the airport terminal building is a concentrated five-finger corridor. We performed a high-precision 3D simulation of the airport. The angle of view can be switched at will, and it looks like a “Phoenix” from the air. When approaching the center of the terminal, a large hexagram is presented in front of people.

Apron operation scene

The apron is a specific place in the flight area for aircraft to board and unload passengers, load and unload cargo or mail, refuel, park or maintain. We used 3D visualization technology to simulate the aircraft docking in the terminal building and the apron, as well as the flight process of the aircraft leaving the port. At the same time, we also added the animation of the navigation lights on the airport runway, which highly simulated the working scene in the apron.

Tower monitoring and scanning animation

In the flight area of the airport, the West Tower, known as the “Eye of the Phoenix”, is responsible for air traffic control tasks such as flight takeoff and landing, and ground taxiing. We have visualized the action of tower scanning and monitoring, so that we can intuitively see the working status of the tower.

Realized value
This airport is a transportation hub under the background of the rise of digitalization. 3D visualization is integrated into the construction of “smart airport” to improve airport operation efficiency, passenger service level and safety guarantee level, forming a complete passenger service value chain, and serving all parties Create new profit growth points, create a smart benchmark for civil aviation airports, and drive the entire industry to jointly promote the construction of smart airports.

Based on 3D visualization technology, combined with cloud computing, big data, and IoT platforms, it can demonstrate the wisdom of Daxing Airport in many ways:

1) Airport operation and maintenance management visualization

It includes functions such as 3D panoramic view of the airport, monitoring of the airport apron, analysis of airport slots, and visualization of the radar range of the airport.

2) Visualization of flight operation process

With Daxing Airport as the center, it displays the national flight status associated with the airport, and supports visual analysis of various elements in the execution of flight plans; provides data protection to ensure safe operation of flights, and improves the efficiency of route planning; Departure sorting and collaborative management provide decision support.

3) Emergency command and dispatch

Combined with the data analysis of the airport flight flow trend and the utilization of seat resources, it realized the data early warning function of airport flight flow forecast and delay, early warning during peak hours, early warning of large-scale flight delay events, etc. And provide a favorable basis for the optimization of airport resources. It can assist all linkage units to deal with emergencies and provide managers with timely and effective emergency decision-making support.

Conclusion
A smart airport is to use various information and communication technology means to sense, analyze and integrate various key information of the airport, so as to realize the construction and construction of digital processing and intelligent response to airport security, service, operation, security and other needs.

By building a smart airport or digitally upgrading the airport, it will not only bring convenience to airport managers and passengers, but also greatly improve the airport’s service, security and safe operation capabilities.

Watch this 3D airport on YouTube:
https://youtu.be/D6EU4FLxVh0

Through years of accumulation, we also have many other excellent 3D visualization cases. Visit below link to see more:

https://www.hightopo.com/demos/en-index.html

How to create a 3D snake game with Javascript (attached source code and game link)

Hightopo — Tue, 29 Nov 2022 09:59:31 +0000

Let's take a look at the final effect of the game at first:
The video of the game

Now let's talk about how to achieve it with Javascript.
The game is made using HT for Web, with about 100 lines of code.

Initialize the scene

First, let's do some initialization work, including initializing the 3D scene, setting the ground grid, and enabling event monitoring, etc. The main code and comments are as follows:

  w = 40; // the grid gap
  m = 20; // the count of rows/columns of grid
  d = w * m / 2;
  food = null;            
  dm = new ht.DataModel(); // create one data model, which saves all the  grid, snake and food
  g3d = new ht.graph3d.Graph3dView(dm); // initialize one 3d scene  
  // config the grid on ground             
  g3d.setGridVisible(true);
  g3d.setGridColor('#29B098');
  g3d.setGridSize(m);
  g3d.setGridGap(w);    

  // add the 3d scene to body
  view = g3d.getView();            
  view.className = 'main';
  document.body.appendChild(view);   

  // monitor the resize event and mouse click event
  window.addEventListener('resize', function (e) {  g3d.invalidate(); }, false);                                                                                            
  g3d.sm().setSelectionMode('none');
  view.addEventListener(ht.Default.isTouchable ? 'touchstart' : 'mousedown', function(e){                
      if(isRunning){
          var p = g3d.getHitPosition(e); // get the position in scene when mousedown
          // calculate the move direction with the click position 
          if(Math.abs(p[0]) < d && Math.abs(p[2]) < d){
              if(direction === 'up' || direction === 'down'){
                  direction = p[0] > snake[0].p3()[0] ? 'right' : 'left';                       
              }
              else if(direction === 'left' || direction === 'right'){
                  direction = p[2] > snake[0].p3()[2] ? 'down' : 'up';                                             
              }                        
          }
      }else if(ht.Default.isDoubleClick(e)){
          start(); // double click the scene to start the game
      }                
  }, false);                        
  start();            
  // the snake move forward every 200ms
  setInterval(function(){ if(isRunning){ isRunning = next(); } }, 200);

Create the food

Every time the gluttonous snake eats a piece of food, its body will grow longer. At this point, new food needs to be created and randomly and placed in a new location. When creating food, its position should not coincide with the previous position, nor repeated with the current snake body.

/**
 * Create the food and place it in a random position
 * The food should not dup with snake or last food
 *
 */
function createFood(){
  var x = getRandom(), y = getRandom();
  // skip the snake body and last food
  while(touchFood(x, y) || touchSnake(x, y)){ x = getRandom(); y = getRandom(); }
  if(food) dm.remove(food);            
  food = createNode(x, y); 
  food.s({'shape3d': 'sphere',  'shape3d.color': 'red'});
}        
/**
 * whether the given position (x, y) is dup with the snake body
 *
 * @param {*} x
 * @param {*} y
 * @return {*} 
 */
function touchSnake(x, y){
  for(var i=0; i<snake.length; i++){                
      if(snake[i].a('x') === x && snake[i].a('y') === y){ return true; }
  }
  return false;
}        
/**
 * whether the given position (x, y) is dup with the food
 *
 * @param {*} x
 * @param {*} y
 * @return {*} 
 */
function touchFood(x, y){
  return food && food.a('x') === x && food.a('y') === y;
}

Create the snake

In the first step, we set the grid size and gap. In this way, the length and width of the entire grid and the size of each block of the snake are determined. In this step, we add boundaries to the mesh and then generate the snake.

/**
 * clear the scene, create the snake and wall
 *
 */
function start(){
  dm.clear(); snake = []; score = 0; direction = 'up'; isRunning = true;
  // create wall
  shape = new ht.Shape();
  shape.setPoints(new ht.List([
      {x: -d, y: d},
      {x: d, y: d},
      {x: d, y: -d},
      {x: -d, y: -d},
      {x: -d, y: d}
  ]));
  shape.setThickness(4);
  shape.setTall(w);
  shape.setElevation(w/2);
  shape.s({'all.color': 'rgba(20, 120, 120, 0.5)', 'all.transparent': true, 'all.reverse.cull': true});

  dm.add(shape);                 
  // create the snake       
  for(var i=0; i<m/2; i++) { snake.push(createNode(m/2 + i, m/2)); }            
  createFood();                        
}

Make the snake move forward

After having the snake and the food, the next step is to deal with the logic of the snake walking. include:

whether the snake has reached the border or touched its body
when the snake touched the food, its body gets longer
in other cases, move forward

/**
 * calculate nest position based on direction. and check:
 * 1. whether the snake has reached the border or touched its body
 * 2. when the snake touched the food, its body gets longer
 * 3. in other cases, move forward
 *
 * @return {*} 
 */
function next(){
  var node = snake[0], x = node.a('x'), y = node.a('y');
  if(direction === 'up') y--;
  if(direction === 'down') y++;       
  if(direction === 'left') x--;
  if(direction === 'right') x++;
  if(x < 0 || x >= m || y < 0 || y >= m || touchSnake(x, y)){ return false; }                        
  if(touchFood(x, y)){
      score++;                
      snake.splice(0, 0, createNode(x, y));                
      createFood();
  }else{
      snake.splice(0, 0, createNode(x, y));
      dm.remove(snake.pop());                
  }
  return true;
}

At this point, the whole snake game is complete. Quite simple, right? Double click on the scene to start the game or click on the scene to change the direction of the snake movement.

You can also directly click the link below to try the game:
3D Gluttonous Snake

To get the source code, just open the game link and press F12.

Find more cool demos here