Simulating a large crowd has always been a challenging task. It is especially true for browsers using WebGL, for harnessing the full, native power of CPU is still impossible. It is therefore imperative that an effective automatic Level-of-Detail (LOD) system, Frustum Culling, Skinned Instancing must all be implemented to reduce unnecessary communication between GPU and CPU and boost performance.

Even after all that, animators are still facing the challenges on how to move each instance to create seemingly nature movement of a crowd. In this series of tutorial, we will take on this challenge. First off, how to guide instances to a set of predetermined points in space?

Readers can access this tutorial at any time at https://www.otakhi.com/petridish?load=15856​ and see how it is done.

Behind the scene, a figure-8 path animation is added to a cockroach which also has a Walk skeletal animation. The skeletal animation is baked into a texture which is then used to drive its material in real time.

We generate many copies of the same cockroaches using skinned instancing technique. Our automatic Level-of-Detail system will make sure distance cockroaches has fewer vertices than the near ones.

On start-up, each cockroach is randomly placed and made to follow the figure-8 path at a random starting point. This gives the crowd a random walk appearance. On mouse click, each instance is steered toward a fixed point in space. A direction-blending technique will make sure no sudden change of direction happens. A callback function added to each instance will notify us when that cockroach has arrived at the final destination.

Another callback function installed on each instance is called after each update. This gives us another opportunity to control each instance's movement… such as global repulsion and attraction force.

We will use this callback to add obstacle avoidance and other neat features in next episode.