takeaway

After reading this article, you will know:

1. Application of animation in Web 3D map

2. How to implement CPU animation and GPU animation

animation

In the map scene, there are usually some perspective switching and data updating. Tween animation can make the view switching more smooth and highlight the changes and relationships of data. There are two ways to realize Web3D map animation, one is CPU animation, the other is GPU animation, and the next part will respectively introduce the realization of these two kinds of animation.

CPU animation

CPU animation means that interpolation of data is performed entirely within the CPU. If too many entities need to be animated, it will take up a lot of CPU resources, resulting in a lag, so CPU animation calculation is suitable for scenarios that require less physical animation.

In Web 3D maps, we mainly use CPU animations for camera animations.

TweenJS introduction

TweenJS is a simple javascript animation engine. It provides a series of interfaces to control animation changes, such as Duration, Delay, onStart, onUpdate, onComplete, and nearly 30 functions to control the trend of animation changes.

Slow function

In Web 3D map, TweenJS is used to realize interpolation calculation of camera animation.

The camera animation

The camera changes to show how the map’s orientation changes, showing how the data is represented from different perspectives.

Flight Angle of view

Changes in map camera animation are similar to changes in aircraft perspective. Map perspective can be expressed by four parameters: pitch (inclination Angle), bearing (rotation Angle), PAN (translation), zoom (level), these four parameters can be converted into the Position, target, rotation transformation of WebGL camera.

Parameter Settings

In addition to the camera’s own transformation parameters, you also need to define the parameters of the animation transformation. The parameters for the animation are Duration, delay, and easing, and applying them to TweenJS generates an interpolated animation for the camera.

The camera focus

GPU animation

For camera animation, there is only one entity involved in animation calculation, with fewer parameters, and CPU animation is very suitable. But for animation entities, more parameters, interpolation calculation of large animation, CPU animation is not suitable, such as a large number of scattered point changes.

Point change animation

The “heat” -like diagram in the “Point change Animation” video is not a real heat map, but a large number of scattered points mapped through the data. Each point’s own animation may have different parameters. If TweenJS is used to control the animation of each point, each point will generate an instance of Tween to transform in the CPU, and each frame will time out, causing the animation to be not smooth. We know that gpus are parallel, and if each point can be animated on the GPU, then performance can be greatly improved. Therefore, we adopt the strategy of space for time to generate attributes for each point to control its own animation parameters, and then control the transformation of these parameters in GPU to control the animation of each point.

Data in the form of animation

Data Layer Example

Data layers can be grouped into the following three categories:

Point, line, surface

Therefore, creating data animation only needs to consider the data mapping properties of point, line and plane. Animation can be divided into entry animation and data change animation.

For the entry animation, point, line and surface all have transparency changes; The radius of the point itself changes, and the height of the column (body) changes. There are incremental changes in the trajectory.

For animated data updates, points, lines, and planes have size, height, color, transparency, and elevation changes.

GPU animation control

To control GPU animation, we must first set relevant parameters. As shown in the following figure, enabled defines whether to enable GPU animation. TransitionKey defines the mapping between old and new data during animation; Like CPU animations, each interpolable attribute has duration, delay, and easing attributes, which are passed into a per-vertex attribute shader that interpolates according to the three animation parameters.

             

Parameters are defined

The animation repeats itself over time. Pass uniform U_time as the time to drive the animation. To know the state of the animation at a certain point in time, you need to calculate the percentage of the current animation position in each animation loop.

The animation sequence

Slow function definition

The animation trend of each point may be different, so you need to define the easing function. TweenJS easing functions are not available in shaders, so you need to translate TweenJS easing code into GLSL code. With the GLSL easing function, you also need to calculate the new percent based on the easing function. Finally, you need to set a number for each of the easing functions. When using the easing function, you simply pass the corresponding number to the shader.

// Transition Animation parameter vec3 float getTransitionPercent(float currentTime, Vec3 transition) {// During the animation length // delay the animation start delay // easing the animation slow function id float during = transition.x; float delay = transition.y; float easing = transition.z; float percent = 0.; if (currentTime >= delay) { percent = easeFunc(easing, (currentTime - delay) / during); percent = clamp(percent, 0., 1.); } return percent; }Copy the code

Data update animation implementation

In the transition configuration above, there is a transition key, which is used to map old data to new data, similar to the enter, update, and exit functions in D3. The old data is equivalent to D3’s selection set, and the new data is equivalent to D3’s data set. TransitionKey only provides the ability to map old and new data; interpolating changes between old and new animations are built in.

When the old data mapping is separated by transitionKey, the update data is interpolated between the old data attributes and the new data attributes. The data of Enter will fade in, so the data of Enter needs to be filled with a corresponding old data with opacity 0. The data in exit will fade out, so a corresponding new data with opacity 0 should be added to the data in exit.

In addition, we have made it a rule that when the transitionKey is null, old data will fade out and new data will fade in when the data on the entire data layer is updated.

Both old and new data need to be passed into the shader via attribute so that the intermediate state of the animation can be computed in the GPU according to Percent:

attribute float a_old_attribute;
attribute float a_new_attribute;


void main () {
  float currentVal = mix(a_old_attribute, a_new_attribute, percent);
}
Copy the code

Problems encountered

If too many animation control parameters are passed in, the number of attributes the shader can pass in is insufficient. Opening the following site can detect restrictions passed by shaders on attributes and so on:

Math.hws.edu/graphicsboo…

Check the maximum limit of an attribute

The maximum number of attributes passed in by a machine shown in the figure above is 16, and errors occur when more than 16 are passed in. Attribute is limited by hardware, so this problem cannot be solved in coding. The only way to solve this problem is to compress the attribute to increase the number of attributes that can be passed in.

Solutions include:

  1. Merge attributes of type float, VEC2, and VEC3 into VEC4;
  2. Compress multiple values into a single value according to the value range; For example, merge r, G, and B into a float and decode it in a shader;

conclusion

CPU animation can control animation simply and flexibly, while GPU animation greatly improves the smoothness of animation with large data volume. The combination of the two can improve the expression ability of spatio-temporal data visualization and enhance the attraction to users.

Review past

  1. Creating a Cool 3D Map Visualization Product for B-end Clients
  2. Data Sources and Stored Computing
  3. Map Interaction and Pose Control
  4. Map Text Rendering
  5. Map Architecture Rendering
  6. Modeling and Output of Map Architecture
  7. Geographic Data Visualization
  8. “Map Cool Effects and Principles Revealed”
  9. Application of WebGL Rendering Pipeline in Web3D Map