|
|
|
|
 |
3D File Formats
The bits and bytes... |
|
|
|
MD2 Format - [Quake 2 File Format]
Author bkenwright@xbdev.net
Have you heard of the game quake?... well the quake file format version 2 will be covered here...its one of the simplest and easiest to understand 3D formats around. It contains a lot of power and allows you to create animated characters.
Well I decided the best way to introduce you to the file format, is to give you it in main parts, first we'll describe how to extract a single static 3D part of the .md2 file, then show you how the animated data is stored. Then to top it all off, how to create classes which can be re-used over and over again... first a simple class which is independent of DirectX and a efficient DirectX3D class as well.
 | MD2 Quick Review File Specs.. |  |
File Format Layout
Quick Sketch of the MD2 File Format.
Static MD2.
Animated MD2
CMd2 Class
CMd2 DirectX3D Class
| MD2 Demo (DirectX) | |
|
Many Characters MD2 Demo
Using the simple md2.h/.cpp class we can easily put together simple demos
that have multiple characters. I thought it would look good to do a
little army of men on the screen at the same time for fun. You can
drag the mouse button to rotate around and zoom, so you can see a suround
view of your army. The demo only loads two models and renders them in
lots of different positions and loops through the different animations - but
you could extend the demo even further, and have lots of different models
loaded and have them explore and fight, each its own person! |
 |
|
|
| MD2 & WebGPU | |
These few tutorials/demos continue with the md2 format - however, we're going to take advantage of the WebGPU API. This lets us take advantage of the GPU in the web-browser so you can do all the graphics/animation stuff in real-time. The beauty of this is there is no need to install anything - and you can run/test and learn about the MD2 file format anywhere on any machine! (Well any machine that supports the latest web-browsers/API).
It's crazy just haw much you can do on a web-page - on your local machine. For example, the following shows you how to load and draw 50,000 animated instances of a character or load/view md2 files from your local machine (visualization).
Rendering 50 Thousand Animated Characters!
Yes! 50,000 animated characters! Each character is playing it's own animation and is located at its own world position. And it runs in a web-browser! The code is avilable in the webgpulab - so you can view the code on the left and see the result on the right side. You can tinker with the code or go through what's happening without having to download and do anything. You can interact/learn with a real live md2 loader/renderer.
The secret behind getting 50,000 animated models on screen in the browser - is it uses WebGPU API - so it's doing all the work on the GPU! Next, you're taking advantage of instancing so that means if it can draw 1 it can draw lots and lots more - as everythign is loaded and ready to go on the GPU - you just set the instance number and off you go.
LINK 50K Animated MD2 Models Code/Implementation
Things to Try
• Take it further - nothing stopping you going beyond 50,000 - see how far your GPU/Computer/Browser can go before you crash/slowdown. You can go much higher! I can put it to 100,000 (hundred-thousand characters - but the frame rate drops and they move slow instead of their jumpy action type speed as you'd expect).
• Load other characters - try one of the other examples below for testing
• Try loading multiple characters and place them on screen
• Give each 'instance' a data value - so it has a position, scale, direction, ...
• Add a 'compute' shader so you can update/move each character around with a simple brain - including selecting animation, walking and avoiding other characters, ...
• Mix in 'swarm' control algorithm - so you can have groups of characters move around using swam/flocking concepts (see a Flocking Example using WebGPU here: Flocking WebGPU Code Demo
MD2 Loader/Viewer
Simple self contained web-based loader - load md2 files from your local machine and view the mesh/texture. It doesn't do the animation - just views the first frame - but you can add in the extra code if you need. Code is mostly about learning/viewing md2 files. Great starting point!!
LINK MD2 Viewer Code/Implementation
Things to Try
• Try adding other features to view other information (wireframe/flat shading)
• Adding in the animations (loops through animations) - example webgpulab MD2 Animation
• Scroll bar to select/move through animation one frame at a time
• View stats page - size file, num frames, ...
| MD2 Test Files | |
Few cool .md2 files you can use to help you on your journey to learning about the md2 file format - you can use the following to experiment through trial-and-error to work out what goes where and why!
| amy.md2 | 544.35 KB | LINK | amy.png | 323.66 KB | LINK |
| bean.md2 | 294.73 KB | LINK | bean.png | 187.73 KB | LINK |
| blaze.md2 | 526.60 KB | LINK | blaze.png | 152.28 KB | LINK |
| buzz.md2 | 157.98 KB | LINK | buzz.png | 5.33 KB | LINK |
| car-kklonoa.md2 | 124.19 KB | LINK | car-kklonoa.png | 44.30 KB | LINK |
| ccom.md2 | 114.45 KB | LINK | ccom.png | 4.43 KB | LINK |
| crawlahoncho.md2 | 197.55 KB | LINK | crawlahoncho.png | 8.37 KB | LINK |
| cream-cream.md2 | 1.16 MB | LINK | cream-cream.png | 61.63 KB | LINK |
| cream.md2 | 572.58 KB | LINK | cream-cream.png | 61.63 KB | LINK |
| detn.md2 | 35.01 KB | LINK | detn.png | 1.37 KB | LINK |
| eggm.md2 | 489.33 KB | LINK | eggm.png | 280.60 KB | LINK |
| eggn.md2 | 403.03 KB | LINK | eggn.png | 463.96 KB | LINK |
| eggo.md2 | 426.15 KB | LINK | eggo.png | 473.35 KB | LINK |
| emerl.md2 | 539.30 KB | LINK | emerl.png | 48.98 KB | LINK |
| emerl-ridr.md2 | 306.26 KB | LINK | emerl-ridr.png | 59.94 KB | LINK |
| espio.md2 | 402.98 KB | LINK | espio.png | 28.76 KB | LINK |
| fourest-fourest.md2 | 488.22 KB | LINK | fourest-fourest.png | 19.07 KB | LINK |
| flare.md2 | 480.71 KB | LINK | emerlflare.png | 47.77 KB | LINK |
| gsnp.md2 | 152.91 KB | LINK | gsnp.png | 11.69 KB | LINK |
| gemerl.md2 | 555.04 KB | LINK | gemerl.png | 43.82 KB | LINK |
| hinote.md2 | 522.71 KB | LINK | hinote.png | 104.92 KB | LINK |
| jetb.md2 | 32.77 KB | LINK | jetb.png | 3.06 KB | LINK |
| jetg.md2 | 59.76 KB | LINK | jetg.png | 2.99 KB | LINK |
| knuckles-race-suit-knuckles.md2 | 340.95 KB | LINK | knuckles-race-suit-knuckles.png | 84.67 KB | LINK |
| knuckles.md2 | 340.95 KB | LINK | emerl-knuckles.png | 49.43 KB | LINK |
| knuckles.md2 | 399.41 KB | LINK | emerl-knuckles.png | 49.43 KB | LINK |
| knuckles-&-tails-fly.md2 | 409.05 KB | LINK | knuckles-&-tails-fly.png | 26.32 KB | LINK |
| knuckles-&-tails-gluide.md2 | 409.05 KB | LINK | knuckles-&-tails-gluide.png | 26.32 KB | LINK |
| knuckles-shuffle.md2 | 191.17 KB | LINK | knuckles-shuffle.png | 5.40 KB | LINK |
| mario-mario.md2 | 191.11 KB | LINK | mario-mario.png | 45.05 KB | LINK |
| mario.md2 | 349.20 KB | LINK | mario-mario.png | 45.05 KB | LINK |
| metal-knuckles.md2 | 427.23 KB | LINK | metal-knuckles.png | 397.52 KB | LINK |
| metal-tails.md2 | 337.45 KB | LINK | metal-tails.png | 50.35 KB | LINK |
| metalknux.md2 | 465.96 KB | LINK | metalknux.png | 239.80 KB | LINK |
| metal_sonic.md2 | 450.95 KB | LINK | metal_sonic.png | 344.72 KB | LINK |
| mighty.md2 | 513.00 KB | LINK | mighty.png | 171.66 KB | LINK |
| metal-sonic.md2 | 681.31 KB | LINK | metal-sonic.png | 1.75 MB | LINK |
| mighty.md2 | 476.66 KB | LINK | mighty.png | 171.66 KB | LINK |
| poss.md2 | 66.13 KB | LINK | poss.png | 25.43 KB | LINK |
| rbuz.md2 | 157.98 KB | LINK | rbuz.png | 5.25 KB | LINK |
| ring.md2 | 29.13 KB | LINK | ring.png | 14.84 KB | LINK |
| rosy.md2 | 546.49 KB | LINK | rosy.png | 216.50 KB | LINK |
| shadow-shadow.md2 | 433.48 KB | LINK | shadow-shadow.png | 46.21 KB | LINK |
| shrp.md2 | 137.55 KB | LINK | shrp.png | 11.52 KB | LINK |
| sign.md2 | 3.32 KB | LINK | sign.png | 1.23 KB | LINK |
| silver-silver.md2 | 537.95 KB | LINK | silver-silver.png | 112.72 KB | LINK |
| silver.md2 | 592.12 KB | LINK | silver-silver.png | 112.72 KB | LINK |
| skim.md2 | 11.78 KB | LINK | skim.png | 1.54 KB | LINK |
| sonic-costums-adventure-1-power-ups.md2 | 645.09 KB | LINK | sonic-costums-adventure-1-power-ups.png | 313.13 KB | LINK |
| sonic-costums-ice-suit.md2 | 645.16 KB | LINK | sonic-costums-ice-suit.png | 325.76 KB | LINK |
| sonic-costums-race-suit.md2 | 645.16 KB | LINK | sonic-costums-race-suit.png | 321.34 KB | LINK |
| sonic-sonicre.md2 | 645.09 KB | LINK | sonic-sonicre.png | 301.83 KB | LINK |
| sonic-sim.md2 | 530.02 KB | LINK | sonic-sim.png | 116.66 KB | LINK |
| sonic.md2 | 804.18 KB | LINK | emerl-sonic.png | 48.39 KB | LINK |
| spos.md2 | 66.13 KB | LINK | spos.png | 24.37 KB | LINK |
| srbb.md2 | 81.55 KB | LINK | srbb.png | 2.33 KB | LINK |
| shadow.md2 | 577.55 KB | LINK | emerl-shadow.png | 51.30 KB | LINK |
| shuffle-sonic.md2 | 313.91 KB | LINK | shuffle-sonic.png | 17.26 KB | LINK |
| shuffle-tails.md2 | 219.49 KB | LINK | shuffle-tails.png | 21.39 KB | LINK |
| sonic-&-knuckles.md2 | 411.84 KB | LINK | sonic-&-knuckles.png | 24.16 KB | LINK |
| sonic-&-tails.md2 | 422.36 KB | LINK | sonic-&-tails.png | 38.21 KB | LINK |
| sonic-gl-armer.md2 | 530.02 KB | LINK | sonic-gl-armer.png | 119.89 KB | LINK |
| tails-tails5.md2 | 459.45 KB | LINK | tails-tails5.png | 114.39 KB | LINK |
| tails-tailsre.md2 | 459.45 KB | LINK | tails-tailsre.png | 114.39 KB | LINK |
| tails.md2 | 561.35 KB | LINK | emerl-tails.png | 51.66 KB | LINK |
| turr.md2 | 22.18 KB | LINK | turr.png | 1.19 KB | LINK |
| toon-link-engineer.md2 | 463.46 KB | LINK | toon-link-engineer.png | 738.50 KB | LINK |
| toon-link-fourth-shield.md2 | 463.46 KB | LINK | toon-link-fourth-shield.png | 708.70 KB | LINK |
| toon-link-onset.md2 | 463.46 KB | LINK | toon-link-onset.png | 680.14 KB | LINK |
| toon-link.md2 | 463.46 KB | LINK | toon-link.png | 751.55 KB | LINK |
| toon-link-phantom.md2 | 463.46 KB | LINK | toon-link-phantom.png | 696.88 KB | LINK |
| toon-link-second-shield.md2 | 463.46 KB | LINK | toon-link-second-shield.png | 670.46 KB | LINK |
| toon-link-third-shield.md2 | 463.46 KB | LINK | toon-link-third-shield.png | 736.20 KB | LINK |
| unkown.md2 | 446.79 KB | LINK | unkown.png | 1.05 MB | LINK |
| yoshi.md2 | 157.41 KB | LINK | yoshi.png | 287.38 KB | LINK |
| pac3d.md2 | 195.55 KB | LINK | pac3d.bmp | 65.05 KB | LINK |
| yoshi.md2 | 343.53 KB | LINK | yoshi.png | 287.38 KB | LINK |
|
|
|
|
|
|
|
|
