Engine 3D visualization system based on HTML5 WebGL

preface

Most of the industrial machinery products are bulky and have high transportation costs. When participating in industry exhibitions or selling to overseas customers, if there is no physical display, only by static and simple picture instructions, customers can not fully understand the products, not only the staff make trouble, but also the customers look hard. If you can do a 3D device demonstration on the Web, the sales staff can introduce the demonstration to customers at any time on any platform. It can also demonstrate the process of equipment disassembly and assembly without being limited by realistic conditions, and show the internal structure of products and the effect of dynamic operation, so that customers can have a more intuitive understanding of product components, more accurate and comprehensive understanding of product functions and characteristics, and greatly reduce the cost of communication. To address these industry pain points, this article uses Hightopo’s HT for Web product to implement a 3D visualization of engine equipment.

Preview system

Preview address: based on HTML 5 WebGL engine 3 d visualization system (www.hightopo.com/demo/engine)…

Scenario building

The engine model is modeled by the designer through 3ds Max, then exported OBJ and MTL files, and analyzed OBJ and MTL files in HT to generate usable models in 3D scenes (please refer to obJ manual “Loading through JSON” section), because each part needs to be operated separately. Therefore, the device model is split into multiple OBJ files and imported.

The 2D panel is drawn by HT vector. We need to create hT.graph. GraphView and HT.graph3d. Graph3dView to render 2D and 3D content. The relevant codes are as follows:

var g2d = new ht.graph.GraphView(); var g3d = new ht.graph3d.Graph3dView(); // Add the 3D component to the body under g3d.addtodom (); // Add the 2D component to the root div of the 3D component g2d.addtodom (g3d.getView());Copy the code

Function implementation

Equipment disassembly animation

When we click the “expand” button, we set different delays for each animation, so that the animation staggered to achieve better visual effects, so that the 2D drawing and 3D scene are better linked.

If each of our animations ran at a constant speed, it would inevitably look monotonous. So I added much different function to different animation, much the function by defining different data curve formula, to describe each frame callback when the need to change the graphics parameter properties of amplitude, so as to achieve uniform, first fast after slow, slow, quick, and even beyond the start and end values first, then slowly recovering of animation effects. Here’s another example to get a better feel for how different Easing functions work: From Easing.

For example, the following part in the center of the drawing disassembled the rotating and enlarging ring, and I set Easing. BackBoth to it. The code is as follows:

AnimCenter (data) {ht.default. startAnim({duration: 4500, // Set the easing function to ease: easing. BackBoth, // 1000, action:functionSetScale (1 + v * 0.9, 1 + v * 0.9); (v, t) {// Change the scale value of data.setScale(1 + v * 0.9, 1 + v * 0.9); // Change the rotation Angle data.setrotation (math.pi * v); // Change the rotation Angle data.setrotation (math.pi * v); }}); } // Ease. EaseOutStrong =function(t) {BACK_CONST = 1.70158;if ((t *= 2) < 1) {
        return5 * (t * t * (((BACK_CONST * = (1.525)) + 1) * t - BACK_CONST)); }return5 * (t (t = 2) * * (((BACK_CONST * = (1.525)) + 1) * t + BACK_CONST) + 2); };Copy the code

The dismantling animation of device parts is realized by changing the coordinates and rotation Angle of nodes, and the code is as follows:

Var p3 = node.p3(); var p3 = node.p3(); var offset = [targetP3[0] - p3[0], targetP3[1] - p3[1], targetP3[2] - p3[2]]; Var r3 = node.r3(); var offset = [targetR3[0] - r3[0], targetR3[1] - r3[1], targetR3[2] - r3[2]]; Ht.default. startAnim({duration: 2000, // set easing to ease: easeOutStrong, delay: 1000, action:function(v, t) {/ / modify the node coordinates of the node. P3 (p3 + offset [0] [0] * v, p3 + offset [1], [1] * v p3 + offset [2] [2] * v); // Change the node rotation Angle node. R3 (R3 [0] + offset[0] * V, R3 [1] + offset[1] * V, R3 [2] + offset[2] * v); }}); EaseOutStrong = easeOutStrong =function (t) {
    return 1 - (--t) * t * t * t;
};Copy the code

There are also panels on both sides of the drawing. You can set its clipping direction and clipping proportion to achieve hidden effects. The code is as follows:

// Set the clipping direction to right to left node.s('clip.direction'.'left'); // Clipping animation HT.default. startAnim({duration: 1800, easing: easeOutStrong, action:function(v, t) {// Modify the clipping ratio node.s('clip.percentage', 1 - v);
    }
});

// 缓动函数
Easing.easeOutStrong = function (t) {
    return 1 - (--t) * t * t * t;
};
Copy the code

Animation of the internal operation of the device

Next, we implemented the perspective change animation to observe the structure of different components of the device. The perspective in the 3D scene is determined by the two parameters center (target point coordinates) and Eye (camera coordinates) provided by Graph3dView, so as long as these two parameters are dynamically changed in the perspective animation, MoveCamera method provided by HT is used here, and the code is as follows:

g3d.moveCamera([-466, 93, -280], [40, -40, -40], {
    duration: 2500,
    easing: function (t) {
        return1 - (--t) * t * t * t; }});Copy the code

A small part of the device is attached to a larger part and moves and rotates with the larger part. For example, the hydraulic lever, when we want to achieve the motion animation of the widget, it is difficult to calculate by modifying the coordinates, so we use the way to modify the anchor point to achieve, the anchor point affects the position of the node, the anchor point is also the center point of rotation and scaling. Here, animation is achieved by modifying the Y-axis anchor point of the hydraulic rod, and the effect is as follows:

The relevant codes are as follows:

ht.Default.startAnim({
        duration: 800,
        action: function(v, t) {// Modify the Y-axis anchor point of node node.setanchor3d (0.5,v,0.5); }};Copy the code

After clicking the flow button, we can see the animation of liquid flowing in the pipe. To achieve the flow effect, we first need a continuous 2d map (left/right or up/down maps seamlessly), then we use code to drive the UV to shift a quadrant in the positive direction of the U axis, and loop the action indefinitely. The effect is as follows:

The code is as follows:

ht.Default.startAnim({
    duration: 2000,
    action: function(v, t) {// Modify map uv value node.s('shape3d.uv.offset', [v, 0]); }};Copy the code

Device Recovery animation

Mouse over effect

In order to clearly observe the internal structure of the device through the shell, I adjusted the transparency of the shell model and set the model highlighting mode when the mouse was hovering over the part. The relevant codes are as follows:

// Set the highlight color ht.Style['highlight.color'] = 'rgba (255255255,0.6)'; // Set the current highlighted mode g3d.sethighlightMode ('mouseover'); // Enable the highlighting effect data.s('highlight.visible'.true); // Set the node to interactive data.s('interactive'.true); // The node does not block the default interaction behavior data.s('preventDefaultWhenInteractive'.false); // Listen for the interaction event g3d.mi(function(e) {// Mouse move eventif (e.kind === 'onEnter') {// Enable transparent data.s('shape3d.transparent'.true); // Set node transparency data.s('shape3d.opacity', 0.25); } // Mouse out eventif (e.kind === 'onLeave') {
        data.s('shape3d.transparent'.false); }});Copy the code

Scene Angle limit

Finally, we restrict the scope of view of the whole scene, and the code is as follows:

/ / set the maximum Angle of ht. Default. Graph3dViewMaxPhi = math.h PI * 1/2; // Set the minimum Angle hT.default. graph3dViewMinPhi = Math.PI * 1 / 4;
Copy the code

conclusion

Through the case, we can feel that compared with the traditional way, the three-dimensional display of equipment has a more flexible form of expression and more intuitive and vivid effect. For export-oriented enterprises, vivid demonstration animation can make foreign investors understand the working principle and advantages of products faster, but also avoid misunderstandings caused by language errors. And compared to ordinary industrial animation, visualization systems on the Web are richer, freer, more flexible and less costly to change subsequent requirements.

The equipment model used in this paper is the designer’s imaginary nuclear power engine, which pays more attention to the display effect of the model. If applied to actual products, a more realistic equipment disassembly process can be made. Through online 3D product operation drills, product assembly, disassembly and maintenance training can be conducted for the staff. If you are interested, please refer to our other case “3D Virtual reality Visualization Training System Based on HTML5 WebGL + WebVR”.