Implementation and Application of 3D Flow Effects in HT for Web

The flow effect has a wide range of application scenarios in the 3D field. For example, in the field of traditional Chinese medicine, the flow of 3D can be used to intuitively observe the flow of human blood, the gas field can be used to monitor the flow, flow rate and temperature of liquid or gas flowing in the pipeline.

 

Nowadays, the data center of enterprise data centers is facing the problem of equipment heat dissipation. Using the hot and cold channels solution can greatly improve the heat dissipation capability of the data center and make full use of the space of cabinets and data centers, therefore, in the field of 3D data center monitoring of China Telecom, it is often necessary to monitor the hot and cold channel system of the data center based on the flow effect.

Hightopo's HT for Web is used as a 3D client presentation solution. The focus of today's introduction is not to collect these indicators, but to apply the pre-defined 3D elements of HT to achieve the flow effect. The HT for Web-based animation introduced in "viewing the nature of the Easing function through WebGL 3D" is an animation by changing the position of the model, the solution described in this article is to keep the model position unchanged, but to control the flow by controlling the texture parameters uvScale and uvOffset of the model, the advantage of this implementation is that there are not too many 3D primitive models, and 2D images can be used for 3D rendering. After all, the artist can change 2D images or dynamically change 2D images in the programmer's memory, it is easier and lightweight than dynamically changing 3D models.

This example mainly applies ht. shape object in ht. graph. graphView shows the polygon effect, and the model is in ht. graph3d. graph3dView is often used to draw three-dimensional model objects such as walls and pipelines. The following examples are provided in the HT for Web 3D manual, which has already reflected ht. shape can be used as a wall and pipe and can be mapped. We only need to dynamically change the uvOffset parameter to let 3D objects flow.

In this example, we only use an arrow image. You can use uvScale to set the tile effect and set 'front. u': [,] We can change the direction of the arrow, and finally implement the animation just like this line of code offset = 0; setInterval (function () {offset + = 0.1; shape. s ('front. uv. offset ', [offset, 0]}) ;}, 100); you can modify the animation interval or offset each step to control the flow speed, at the same time, we change the 'shape3d. blend': 'red' can dynamically change the rendering color of the arrow image, so that you do not need to provide a variety of images, we can even dynamically change the arrow color based on temperature values and other indicators.

In this example, ht is placed in the lower left corner. graph. the 2D topology of GraphView is bound to ht in 2D and 3D. dataModel's data model allows you to operate graphical components on a 2D topology or a 3D engine at will, and you will find that they are automatically linked, any change will present the change effect on another component in real time. This is also the benefit of the OVM (Object-View mapping) design pattern that all HT components can bind to the same data model:

The following is a video of a 3D streaming example in HT for Web for your reference. The pre-defined HT-based model has many custom effects, you can make full use of your imagination to bring more incredible results to the flow of 3D applications: