50 thousand animated characters all jumping and moving in real-time on the screen in a web-browser using instancing with the WebGPU API.
The .md2 format is a bit old now, but it does the job, it stores the vertices for each frame - and is interpolated (morphed) to create the animation effect.
The full md2 mesh loading code is included below - simple and sweet! Essentially, it's just a header section whilc include offsets to the mesh data (e.g., vertices, faces, texture coordinates etc).
Once the data is read in and the vertex/index buffers are setup for the WebGPU API! You're ready to go! Render a single instance! If you can render 1, you can render as many as you want.
To manage the instances - so they aren't all drawn on top of one another - you can use the
@builtin(instance_index)
variable in the WGSL shader - so that each instance is drawn at a differnet location and the frame number for the animation is offset (so they each animate/move differently).
Model Loader/Parser
The following code loads the 3d model data from the md2 file - while the md2 file is a bit old - it's also very compact and easy to implement. Essentially each animation frame stores all the vertices.
Then for each frame the previous and next vertex values (for the position) are interpolated. Typically, the md2 file contains 192ish animation frame - which form idling, walking, jumping and so on.
<script type='module'> // Function to load a binary file function loadBinaryFile(url) { return fetch(url) .then(response => response.arrayBuffer()); }
// Function to parse the MD2 file function parseMD2(buffer) { const dataView = new DataView(buffer);
// Example usage // xbdev.net let buffer2 = await loadBinaryFile('https://webgpulab.xbdev.net/var/resources/pac3D.md2'); const model = parseMD2(buffer2);
• Try loading in other md2 models (see the resources links)
• Plot number instances vs render time on a chart (see how it changes) - it should be pretty 'flat' - until a threshold is reached and the frame rate suddenly just drops (won't crash - just goes slow)
• Display multiple different animated characters (not all the same ones)
• Add a compute shader pass - each character has a simple logic and walks around and avoids bumping into other characters
• Explore implementing a swarm/flocking - see Flocking demo LINK • Do 'post-processing' screen-space rendering (add ambient occlusion lighting/effects - without the performance hit - even with hundreds of thousands of characters - see SSAO demo LINK • Add terrain - use a height map algorithm on the GPU to calculate the height - so it doesn't cost anything to do collisions with the terrain for the characters - see height map demo LINK • Explore other animation formats - with rigid skeletons/skinning - demo show how skinning works LINK
