The production process of pipeline flow effect

Background Requirements

SuperMap iClient3D for WebGL does not support texture maps in Gif format, so how can we express dynamic effects? Here, taking the water flow of the pipeline as an example, the direction and speed of the water flow are expressed through dynamic textures.

Production process

It is divided into three main parts:

①Generate the model data set and set the static texture through SuperMap iDesktop;
②Publish 3D services through SuperMap iServer;
③Set the movement direction and speed of the texture on SuperMap iClient3D for WebGL;

1. Generate model data set and set static texture through SuperMap iDesktop

1.1 Start SuperMap iDesktop, open the pipeline data, and add the line dataset to the scene.

Figure 1

1.2 Under 3D geographic design-rule modeling, select the "Stakeout" function, and the stakeout window will pop up. to set.

Check "All objects participate in the operation"; click the "Draw" button, and the drawing surface window will pop up: select a circular surface to draw, the default unit is "meter", here change it to decimeter, and draw a diameter of 1 decimeter circle; click the OK button to complete the drawing of the section.

Figure 2

After the section is drawn, click the "Material Settings" button to set the material. The material texture is added through "+", and it is set to a processed picture in jpg or png format, here it is set to a jpg picture with an upward arrow symbol. The repeat mode is set to the actual size, the horizontal size is set to the perimeter of the section (0.314m), and the vertical size is set according to the needs, but pay attention to maintaining the proportion of the texture. After clicking OK, a model dataset with a static texture map is generated.

Figure 3

Figure 4

1.3 Regenerate the normal line and optimize the pipeline display effect

If the surface of the generated pipeline model is not smooth enough, you can recalculate the normal of the model through the "calculate normal" function under the 3D data-model-model tool.

Figure 5

1.4 Generate a cache for the processed model data set

Add the processed model data set to the scene, remove other redundant data sets, save the scene, and generate a cache for the scene. In the pop-up "Generate Scene Cache" window, modify the cache path, and keep other parameters as default.

Figure 6

2. Publish 3D services through SuperMap iServer

Publish the scene data obtained in the previous step as a 3D service through SuperMap iServer.

Figure 7

3. Set the movement direction and speed of the texture on SuperMap iClient3D for WebGL

Open the published scene on SuperMap iClient3D for WebGL, find the layer where the pipeline cache data is located, and set its motion state.

Among them, textureUVSpeed is used to control the motion direction and speed of the texture. In this scene, only the arrow texture needs to move along the pipeline, so the speed in the U direction is set to zero, and only the speed in the V direction needs to be changed. The code setting and final display effect are as follows:

            var promise = scene.open('http://localhost:8090/iserver/services/3D-XuanChuanChangJing/rest/realspace');
            SuperMap3D.when(promise, function(layer){
                var guandao = scene.layers.find("ReComputeNormalResult@管线");
                guandao.textureUVSpeed = new SuperMap3D.Cartesian2(0,-1);
                }
            )

Figure 8