ThingJS for key technology analysis of 3D Visual alarm System based on WebGL

#3D visualization #3D development #

  1. WebGL 3 d technology
  2. Next generation 3D framework -ThingJS
  3. 3D visualization alarm system example
  4. Universal architecture design based on ThingJS

 

WebGL 3 d technology

WebGL is a JavaScript API for rendering 3D graphics in a web browser, which can be displayed by writing web code without plug-ins. Compared with the traditional Web3D technology, WebGL technology has two advantages: first, it realizes the interactive 3D animation production through JavaScript language without relying on any browser plug-in; Second, WebGL is based on the underlying OpenGL interface and has the underlying graphics hardware (GPU) acceleration function.

The process of WebGL drawing 3D model is divided into four steps as follows:

First, get the vertex coordinates. Vertex coordinates are usually exported from 3D software. After obtaining vertex coordinates, they are stored in video memory for faster reading by GPU. Second, pixel assembly, draw a triangle. Pixel assembly is the process of generating primitives (triangles) from vertices, which is done by vertex shaders. The vertex shader will transform the vertex coordinates into screen coordinates through matrix first, and then the pixel assembly is carried out by GPU. Third, rasterization, that is, the generation of tiles (a pixel point). Fourth, after the generation of primitives, the model needs to be “colored” by the “chip shader” running on the GPU.

 

A new generation of 3D frames

If 3D development using WebGL directly is inefficient, it requires developers to have a deep understanding of graphics knowledge, and the concept of fragmentation is not easy to develop. In order to solve the problem of low development efficiency, a third-party library based on JavaScript language -three.js has emerged, which is an open source technology and is popular with the majority of front-end to 3D developers.

As a cross-browser script, three.js encapsulates the underlying graphical interface and has good support for WebGL. It can achieve 3d scene rendering without mastering complex graphics knowledge. For example, rendering white cubes and triangles on a black background requires about 150 lines of code for WebGL, while threejs requires only about 30 lines of code, which is only one fifth of WebGL’s workload and greatly improves the development efficiency.

In contrast, ThingJS, an emerging 3D framework in the past two years, encapsulates almost all 3D concepts. Developers do not even need 3D expertise reserves, but directly use JavaScript to call 3D source code to easily achieve 3D effects and successfully complete secondary development. For example, loading a 3D scene requires about 100 lines of code. Loading a 3D scene requires only one line of code.

 

3D visualization alarm system example

3 d visual warning system in the urban traffic command, subway communication, smart home, fire safety, industrial automation equipment operational management process, often fault location difficulty, the problem such as monitoring data image not intuitive, 3 d framework based on WebGL technology development, this case implements a general 3 d visualization of the alarm system design scheme, It not only gets rid of the shackles of traditional 3D visualization schemes relying on plug-ins, but also solves problems such as high error rate and difficult data precipitation.

From a user perspective, using WebGL technology in virtual simulation for the browser to industrial production equipment, and based on comprehensive monitoring management platform to workshop equipment operation data collected on the performance of the device image three-dimensional display, 3 d scene dynamic effect to managers to good immersive and mutual inductance, out of form, text and other more traditional way of management.

 

A port digital alarm monitoring visual application interface

Universal architecture design based on ThingJS

A general alarm system, divided into data storage layer, data processing layer and data display layer.

The data storage layer mainly uses mysql database to store devices, basic data information, and collected alarm information, and uses JSON files to store 3D model data information. The data processing layer mainly uses Ajax data docking method to judge the alarm information online, and uses JavaScript script to process and analyze the data and realize the business logic. The data display layer mainly uses ThingJS platform components based on WebGL to complete loading and rendering of 3D scenes, and provides online project sharing function. Users can generate unique URLS and TWO-DIMENSIONAL codes, and embed IFrame links in other Web systems for demonstration. [Official website registration link]

 

1. Basic function construction

Basic operations include three functional modules: device management module, 3D roaming module, and device health status management.

 

(1) Equipment management. You can view basic device information, drag and drop devices to change their positions in a scene, zoom in or rotate devices, and add or delete devices as required. ThingJS developers call javascript scripts that control the position, rotation, scaling, and z-axis movement of objects. [See full example]

On ('click', function(event) {if (event. Picked) car. Position = event. PickedPosition; }); Function obj_translate() {car.translate([0, 0, -1]); Function obj_rotate() {car.rotatey (45.0); } function obj_scale() {car.scale = [1, 2, 1]; }Copy the code

(2) Free roaming of 3D scenes. Users can move, zoom and rotate the whole 3D scene with the mouse, so as to meet the needs of users to view the scene in 360 degrees and bring users a good sense of interaction and immersion. The ThingJS example uses a JAVASCRIPT script to automatically rotate the camera around a point of view (in world coordinates) or an object. 【3D Demonstration 】

 

Visualization application of an energy storage power station alarm system

(3) Device health status management. Users can view the health status of any device in the equipment room. The health status is divided into three colors: red, yellow and green. When the system detects that an alarm is generated on a device, an alarm icon is displayed above the device. You can click the icon to view the alarm details, including the alarm time, alarm type, and alarm cause. In ThingJS, basic data requests can be made based on Ajax technology to determine device temperature and health status and set an alarm threshold. [See full example]

Function updateData(obj) {$. Ajax ({type: "get", url: "Https://3dmmd.cn/getMonitorDataById", data: {" id ": obj id}, dataType:" json ", / / return the data type of the json success: function (d) { console.log(d); var temper = d.data.temper; // Set the object monitoring data. Obj. setAttribute("monitorData/ temperature ", temper); changeColor(obj); Timer = setTimeout(function () {updateData(obj)}, 3000); }}); } function stopUpdate() {clearTimeout(timer); Function changeColor(obj) {var temper = obj.getAttribute("monitorData/ temperature "); Var value = temper.substr(0, temper.indexof ("℃")); If (value > 25) {obj.style. Color = 'RGB (255,0,0)'; } else { obj.style.color = null; }}Copy the code

2. Automatic cruise function

Not only autopilot system, industrial equipment visualization can also add automatic cruise function, moving at a constant speed.

Users can according to the situation of building environment and equipment layout, set the cruise path, when users click on automatic cruise button, can along a path set tour, without user manual operation, can be on the path of equipment health status in the global understanding, greatly reduce the workload of the user, to improve the working efficiency.

ThingJS uses the camera concept in JAVASCRIPT scripts to determine the Angle of view from which to view a 3D scene, allowing the camera to follow the object and set a cruise path. [See full example]

New thing.widget. Button(' Camera follows object ', function () {// Set camera position and target point car. On ('update', App.camera. Position = car. SelfToWorld ([0, 5, selfToWorld, selfToWorld, selfToWorld) - 10]); App.camera. Target = car. Position}, 'custom camera follow '); }); New thing.widget. Button(' stop ', function () {car. Off ('update', null, 'custom camera follow '); }); });Copy the code

The ThingJS project is based on a B/S architecture, WebGL technology and a more efficient 3D wrapper library. Users can access the project directly from a url in a browser without installing any plug-ins.

In the online development program of ThingJS platform, 3D simulation is carried out on the browser for the running data collected by automatic equipment and various monitoring systems, which not only makes the DISPLAY of 3D data more vivid and three-dimensional, but also achieves the purpose of assisting operation and maintenance. At the same time, the online development can run on a variety of terminal devices, a variety of screen sizes of the system, anytime and anywhere to view the monitoring picture, greatly reducing the operation cost, reduce the implementation time and cost of 3D visualization projects.