In many three-dimensional scene applications, a large number of individuals of the same type need to be drawn simultaneously, such as trees, weeds, etc. In smart city management applications, there is often a need to draw a large number of moving vehicles in real time. To solve this problem, the WebGL drawing technology used is called instance drawing (Instance Draw). That is to say, for models with similar appearance, WebGL can realize millions of them being drawn simultaneously, and each individual can have a different posture, position, size, color and even texture. You can click on the following link to experience the example drawing effect of ThreeJS:
https://threejs.org/examples/#webgl_instancing_performance
WebGL's instance drawing capabilities are also used in Cesium, encapsulated into Cesium.ModelInstanceCollection, and the class interface implements instance drawing. If you need to draw a large number of buses on the road, you can use the following code to create bus instances.
Among them, busInstance is constructed like this:
In this way, to draw dynamic vehicles in real time, you only need to change the vehicle's transformation matrix cyclically at each frame. As follows:
The vehicle's transformation matrix can be calculated based on its lane line position and driving target point.
The final vehicle dynamic rendering effect is as follows:
(I still don’t know how to upload animated pictures and videos. If you are interested, please comment or send a private message)