www.xbdev.net
xbdev - software development
Friday February 21, 2025
Home | Contact | Support | 3D File Formats The bits and bytes...
<<
 

Books
Simulations take your GPU on the web to a whole new level! Don't just think about pixels and graphics! Your GPU can simulate thousand of interacting rigid bodies, ragdolls, fluid simulations and more! Learn about simulation wiht the WebGPU and WGSL. If you're more interested in learning how to make games instead of playing them! Then this book is your sweet ticket! Games on the web are evolving - and so are the technologies. Get your teeth into the latest API - and API with `teeth'! Breaks the mould and is a pioneer - including a new shader language known as the WebGPU Shader Language (WGSL). WebGPU (Graphics and Compute) API is a powerful web-based resource that exposes the GPU hardware capabilities without the use of external libraries or plug-ins. This incredible API is part of a new standard that will be integrated into modern browsers - allowing GPU accelerated graphics such as ray-tracing. Real time ray-tracing has always been the holy grail of rendering. Delivering physically-accurate results by simulating how light rays bounce off and refract through objects in a scene. Ray-tracing has historically been slow, taking minutes or hours to render a single frame, so being able to get results in 'real time' due to advancements in hardware accelerations and the WebGPU API promises to have a huge impact on web-based graphics.
Amazon



 
     
 

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.



MD2 File Format Tutorials (DirectX/C/C++)


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!
Download Source Code (550k) Download Executable (641k)



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.md2544.35 KBLINKamy.png323.66 KBLINK
bean.md2294.73 KBLINKbean.png187.73 KBLINK
blaze.md2526.60 KBLINKblaze.png152.28 KBLINK
buzz.md2157.98 KBLINKbuzz.png5.33 KBLINK
car-kklonoa.md2124.19 KBLINKcar-kklonoa.png44.30 KBLINK
ccom.md2114.45 KBLINKccom.png4.43 KBLINK
crawlahoncho.md2197.55 KBLINKcrawlahoncho.png8.37 KBLINK
cream-cream.md21.16 MBLINKcream-cream.png61.63 KBLINK
cream.md2572.58 KBLINKcream-cream.png61.63 KBLINK
detn.md235.01 KBLINKdetn.png1.37 KBLINK
eggm.md2489.33 KBLINKeggm.png280.60 KBLINK
eggn.md2403.03 KBLINKeggn.png463.96 KBLINK
eggo.md2426.15 KBLINKeggo.png473.35 KBLINK
emerl.md2539.30 KBLINKemerl.png48.98 KBLINK
emerl-ridr.md2306.26 KBLINKemerl-ridr.png59.94 KBLINK
espio.md2402.98 KBLINKespio.png28.76 KBLINK
fourest-fourest.md2488.22 KBLINKfourest-fourest.png19.07 KBLINK
flare.md2480.71 KBLINKemerlflare.png47.77 KBLINK
gsnp.md2152.91 KBLINKgsnp.png11.69 KBLINK
gemerl.md2555.04 KBLINKgemerl.png43.82 KBLINK
hinote.md2522.71 KBLINKhinote.png104.92 KBLINK
jetb.md232.77 KBLINKjetb.png3.06 KBLINK
jetg.md259.76 KBLINKjetg.png2.99 KBLINK
knuckles-race-suit-knuckles.md2340.95 KBLINKknuckles-race-suit-knuckles.png84.67 KBLINK
knuckles.md2340.95 KBLINKemerl-knuckles.png49.43 KBLINK
knuckles.md2399.41 KBLINKemerl-knuckles.png49.43 KBLINK
knuckles-&-tails-fly.md2409.05 KBLINKknuckles-&-tails-fly.png26.32 KBLINK
knuckles-&-tails-gluide.md2409.05 KBLINKknuckles-&-tails-gluide.png26.32 KBLINK
knuckles-shuffle.md2191.17 KBLINKknuckles-shuffle.png5.40 KBLINK
mario-mario.md2191.11 KBLINKmario-mario.png45.05 KBLINK
mario.md2349.20 KBLINKmario-mario.png45.05 KBLINK
metal-knuckles.md2427.23 KBLINKmetal-knuckles.png397.52 KBLINK
metal-tails.md2337.45 KBLINKmetal-tails.png50.35 KBLINK
metalknux.md2465.96 KBLINKmetalknux.png239.80 KBLINK
metal_sonic.md2450.95 KBLINKmetal_sonic.png344.72 KBLINK
mighty.md2513.00 KBLINKmighty.png171.66 KBLINK
metal-sonic.md2681.31 KBLINKmetal-sonic.png1.75 MBLINK
mighty.md2476.66 KBLINKmighty.png171.66 KBLINK
poss.md266.13 KBLINKposs.png25.43 KBLINK
rbuz.md2157.98 KBLINKrbuz.png5.25 KBLINK
ring.md229.13 KBLINKring.png14.84 KBLINK
rosy.md2546.49 KBLINKrosy.png216.50 KBLINK
shadow-shadow.md2433.48 KBLINKshadow-shadow.png46.21 KBLINK
shrp.md2137.55 KBLINKshrp.png11.52 KBLINK
sign.md23.32 KBLINKsign.png1.23 KBLINK
silver-silver.md2537.95 KBLINKsilver-silver.png112.72 KBLINK
silver.md2592.12 KBLINKsilver-silver.png112.72 KBLINK
skim.md211.78 KBLINKskim.png1.54 KBLINK
sonic-costums-adventure-1-power-ups.md2645.09 KBLINKsonic-costums-adventure-1-power-ups.png313.13 KBLINK
sonic-costums-ice-suit.md2645.16 KBLINKsonic-costums-ice-suit.png325.76 KBLINK
sonic-costums-race-suit.md2645.16 KBLINKsonic-costums-race-suit.png321.34 KBLINK
sonic-sonicre.md2645.09 KBLINKsonic-sonicre.png301.83 KBLINK
sonic-sim.md2530.02 KBLINKsonic-sim.png116.66 KBLINK
sonic.md2804.18 KBLINKemerl-sonic.png48.39 KBLINK
spos.md266.13 KBLINKspos.png24.37 KBLINK
srbb.md281.55 KBLINKsrbb.png2.33 KBLINK
shadow.md2577.55 KBLINKemerl-shadow.png51.30 KBLINK
shuffle-sonic.md2313.91 KBLINKshuffle-sonic.png17.26 KBLINK
shuffle-tails.md2219.49 KBLINKshuffle-tails.png21.39 KBLINK
sonic-&-knuckles.md2411.84 KBLINKsonic-&-knuckles.png24.16 KBLINK
sonic-&-tails.md2422.36 KBLINKsonic-&-tails.png38.21 KBLINK
sonic-gl-armer.md2530.02 KBLINKsonic-gl-armer.png119.89 KBLINK
tails-tails5.md2459.45 KBLINKtails-tails5.png114.39 KBLINK
tails-tailsre.md2459.45 KBLINKtails-tailsre.png114.39 KBLINK
tails.md2561.35 KBLINKemerl-tails.png51.66 KBLINK
turr.md222.18 KBLINKturr.png1.19 KBLINK
toon-link-engineer.md2463.46 KBLINKtoon-link-engineer.png738.50 KBLINK
toon-link-fourth-shield.md2463.46 KBLINKtoon-link-fourth-shield.png708.70 KBLINK
toon-link-onset.md2463.46 KBLINKtoon-link-onset.png680.14 KBLINK
toon-link.md2463.46 KBLINKtoon-link.png751.55 KBLINK
toon-link-phantom.md2463.46 KBLINKtoon-link-phantom.png696.88 KBLINK
toon-link-second-shield.md2463.46 KBLINKtoon-link-second-shield.png670.46 KBLINK
toon-link-third-shield.md2463.46 KBLINKtoon-link-third-shield.png736.20 KBLINK
unkown.md2446.79 KBLINKunkown.png1.05 MBLINK
yoshi.md2157.41 KBLINKyoshi.png287.38 KBLINK
pac3d.md2195.55 KBLINKpac3d.bmp65.05 KBLINK
yoshi.md2343.53 KBLINKyoshi.png287.38 KBLINK
















Ray-Tracing with WebGPU kenwright WebGPU Development Cookbook - coding recipes for all your webgpu needs! WebGPU by Example: Fractals, Image Effects, Ray-Tracing, Procedural Geometry, 2D/3D, Particles, Simulations WebGPU Games WGSL 2d 3d interactive web-based fun learning WebGPU Compute WebGPU API - Owners WebGPU & WGSL Essentials: A Hands-On Approach to Interactive Graphics, Games, 2D Interfaces, 3D Meshes, Animation, Security and Production Kenwright graphics and animations using the webgpu api 12 week course kenwright learn webgpu api kenwright programming compute and graphics applications with html5 and webgpu api kenwright real-time 3d graphics with webgpu kenwright webgpu for dummies kenwright webgpu api develompent a quick start guide kenwright webgpu by example 2022 kenwright webgpu gems kenwright webgpu interactive compute and graphics visualization cookbook kenwright wgsl webgpu shading language cookbook kenwright WebGPU Shader Language Development: Vertex, Fragment, Compute Shaders for Programmers Kenwright wgsl webgpugems shading language cookbook kenwright WGSL Fundamentals book kenwright WebGPU Data Visualization Cookbook kenwright Special Effects Programming with WebGPU kenwright WebGPU Programming Guide: Interactive Graphics and Compute Programming with WebGPU & WGSL kenwright



 
Advert (Support Website)

 
 Visitor:
Copyright (c) 2002-2025 xbdev.net - All rights reserved.
Designated articles, tutorials and software are the property of their respective owners.