3D monitoring application flow effect based on HTML5

The flow effect in the 3D field has a wide range of applications, such as the Chinese medicine field can be seen through the flow of 3D intuitive observation of human blood flow, gas field can be used to monitor the flow of liquid or gas flows in the pipeline, flow rate and temperature indicators.

Http://www.hightopo.com/guide/guide/core/lighting/examples/example_flowing.html

Today's enterprise data center room is generally facing the problem of equipment cooling, the use of hot and cold channel program can greatly improve the cooling capacity of the data center, fully and effectively utilize the space of the cabinet and room, so in the telecommunications of the 3D room monitoring area, also often need to rely on the flow of the effect of the engine room hot and cold channel system monitoring.

Hightopo HT for web as a 3D client rendering solution, the focus of today's presentation is not to capture these metrics, but to apply HT's predetermined 3D elements to achieve the flow effect. In the "The essence of animation easing function through WebGL 3D" This article introduces the HT for Web-based animation, which is implemented by changing the position direction of the model, and the scheme of this article is to keep the model position direction fixed, Instead, by controlling the mapping parameters of the model Uvscale and Uvoffset to achieve the flow of control, the benefits of this implementation is not to add too much 3D model, while the use of 2D images can be fused to the surface of the rendering, after all, the artist changed the 2D picture, or the programmer in memory to dynamically change the 2D picture, is easier and lighter than changing 3D models dynamically.

This example mainly applies ht. A shape type object that renders the effect of a polygon in Ht.graph.GraphView, which is often used in Ht.graph3d.Graph3dView to draw three-dimensional model objects such as walls, pipes, and so on in the HT for Web 3D manual The following example, in fact, has already manifested ht. Shape can be used as a wall and pipe and can map the effect, we only need to dynamically change the Uvoffset parameters to let 3D objects flow up.

The whole example we just used an arrow image, through Uvscale can set the effect of tiling, by setting ' Front.uv ': [0, 1, 1, 1, 1, 0, 0,0] We can change the direction of the arrow, the last realization animation is just such a 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, This can control the speed of the flow, while we change the ' shape3d.blend ': ' Red ' can dynamically change the color of the arrow image rendering, so that there is no need for artists to provide a variety of images, we can even change the color of the arrows according to the temperature values and other indicators.

The example in the lower left corner of the Ht.graph.GraphView 2D topology map, 2D and 3D co-bind Ht.datamodel data model, so you can freely manipulate the 2D topology or 3D engine graphics components, you will find that they will automatically linkage, any change will be in the other component real-time rendering change effect , which 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 the 3D flow example in the HT for Web, which is based on a pre-defined model of HT, and there are many custom effects that you can imagine to make the 3D flow effect more incredible application effects:http://v.youku.com/v_ Show/id_xnziymjqyntg0.html

3D monitoring application flow effect based on HTML5