Demos and ex­am­ples on this page re­quire We­bAssem­bly-en­abled brows­er with at least We­bGL 1 work­ing. All re­cent ver­sions of ma­jor browsers should work, see the in­tro­duc­to­ry blog post for more in­for­ma­tion. You can al­so use the Mag­num GL In­fo util­i­ty to see if your brows­er is ca­pa­ble of run­ning the demos; if you are un­lucky and your brows­er isn’t ca­pa­ble, you can at least try the asm.js ver­sion of the Tri­an­gle ex­am­ple.

Magnum Player screenshot
Mag­num Play­er wasm we­bgl2
A view­er and play­er for an­i­mat­ed glTF scenes. Drag&drop a file to load it.
Magnum::Ui Gallery screenshot
Mag­num::Ui Gallery wasm we­bgl2 ui
A gallery of var­i­ous wid­gets (but­tons, la­bels, in­puts, modals) pro­vid­ed by the Mag­num::Ui li­brary.
Box2D example screenshot
Box2D Ex­am­ple wasm we­bgl1 physics
Builds a pyra­mid out of cubes and al­lows you to de­stroy it af­ter.
Bullet Physics example screenshot
Bul­let Physics Ex­am­ple wasm we­bgl1 physics
Shows a ro­tat­ing ta­ble full of cubes that you can shoot down.
Object picking example screenshot
Ob­ject Pick­ing Ex­am­ple wasm we­bgl2
Show­cas­es us­age of mul­ti­ple frame­buffer at­tach­ments to im­ple­ment ob­ject pick­ing.
Area Lights example screenshot
Area Lights Ex­am­ple wasm we­bgl2 ui
A ba­sic im­ple­men­ta­tion of Re­al-Time Polyg­o­nal-Light Shad­ing with Lin­ear­ly Trans­formed Cosines.
WebVR example screenshot
We­b­VR Ex­am­ple wasm we­bgl1 we­b­vr
A ba­sic demon­stra­tion of how to use the Em­scripten VR API with Mag­num.
Audio example screenshot
Au­dio Ex­am­ple wasm we­bgl1 sound
Loads an OGG file and shows how to play spa­tial­ized au­dio with the Mag­num Au­dio li­brary.
Viewer example screenshot
View­er Ex­am­ple wasm we­bgl1
Us­es scene im­porter plug­ins to load a 3D scene for in­ter­ac­tive view­ing.
Primitives example screenshot
Prim­i­tives Ex­am­ple wasm we­bgl1
Shows how to use builtin prim­i­tives and how to do sim­ple in­put han­dling. Dis­plays an in­ter­ac­tive cube.
Text example screenshot
Text Ex­am­ple wasm we­bgl1
Show­case of Mag­num text ren­der­ing us­ing signed dis­tance fields. Full UTF-8 sup­port.
Mouse Interaction example screenshot
Mouse In­ter­ac­tion Ex­am­ple wasm we­bgl2
Blender-in­spired depth-aware pan­ning, zoom­ing and ro­ta­tion for easy scene nav­i­ga­tion.
Triangle example screenshot
Tri­an­gle Ex­am­ple wasm asm.js we­bgl1
Dis­plays sim­ple tri­an­gle with in­ter­po­lat­ed col­ors. For the un­lucky, an asm.js ver­sion that doesn’t re­quire We­bAssem­bly-ca­pa­ble brows­er is al­so avail­able.
Textured triangle example screenshot
Tex­tured Tri­an­gle Ex­am­ple wasm we­bgl1
Slight­ly ex­tend­ed ver­sion of the tri­an­gle ex­am­ple; us­es TGA im­porter plug­in to load a stone im­age and dis­plays a tri­an­gle with col­ored tex­ture on it.
Magnum GL Info screenshot
Mag­num GL In­fo wasm asm.js we­bgl1 we­bgl2
Text util­i­ty print­ing in­fo about Mag­num OpenGL ca­pa­bil­i­ties. Ver­sions for We­bGL 1, asm.js We­bGL 1 and We­bGL 2.
Magnum AL Info screenshot
Mag­num AL In­fo wasm
Text util­i­ty print­ing out var­i­ous in­for­ma­tion about Mag­num and the Ope­nAL im­ple­men­ta­tion it’s run­ning on.

Look­ing for more? Not all demos are port­ed to HTM­L5 yet. See Ex­am­ples and Tu­to­ri­als and Util­i­ties in the doc­u­men­ta­tion — there’s an Ocu­lus VR de­mo, shad­ow map­ping, shad­er ef­fects, var­i­ous tools and apps and more.