Showcase

Demos and ex­amples on this page re­quire WebAssembly-en­abled browser with at least WebGL 1 work­ing. All re­cent ver­sions of ma­jor browsers should work, see the in­tro­duct­ory blog post for more in­form­a­tion. You can also use the Mag­num GL Info util­ity to see if your browser is cap­able of run­ning the demos; if you are un­lucky and your browser isn’t cap­able, you can at least try the asm.js ver­sion of the Tri­angle ex­ample.

2D Fluid Simulation example screenshot
2D Flu­id Sim­u­la­tion Ex­ample webgl2 phys­ics ui
2D flu­id sim­u­la­tion us­ing the APIC meth­od.
3D Fluid Simulation example screenshot
3D Flu­id Sim­u­la­tion Ex­ample webgl2 phys­ics ui
SPH flu­id sim­u­la­tion with a dy­nam­ic bound­ary.
Ray Tracing example screenshot
Ray Tra­cing webgl1
Simple it­er­at­ive CPU ray tra­cing.
Octree example screenshot
Octree webgl1 phys­ics in­stan­cing
Loose octree for ac­cel­er­at­ing col­li­sion de­tec­tion
Magnum Player screenshot
Mag­num Play­er webgl2
A view­er and play­er for an­im­ated glTF scenes. Drag&drop a file to load it.
Magnum::Ui Gallery screenshot
Mag­num::Ui Gal­lery webgl2 ui
A gal­lery of vari­ous wid­gets (but­tons, la­bels, in­puts, mod­als) provided by the Mag­num::Ui lib­rary.
Box2D example screenshot
Box2D Ex­ample webgl1 phys­ics in­stan­cing
Builds a pyr­am­id out of cubes and al­lows you to des­troy it after.
Bullet Physics example screenshot
Bul­let Phys­ics Ex­ample webgl1 phys­ics in­stan­cing
Shows a ro­tat­ing table full of cubes that you can shoot down.
Object picking example screenshot
Ob­ject Pick­ing Ex­ample webgl2
Show­cases us­age of mul­tiple frame­buf­fer at­tach­ments to im­ple­ment ob­ject pick­ing.
Area Lights example screenshot
Area Lights Ex­ample webgl2 ui
A ba­sic im­ple­ment­a­tion of Real-Time Poly­gon­al-Light Shad­ing with Lin­early Trans­formed Co­sines.
WebXR example screenshot
WebXR Ex­ample webgl1 webxr
A ba­sic demon­stra­tion of how to use the Em­scripten WebXR lib­rary with Mag­num.
Dear ImGui example screenshot
Dear ImGui Ex­ample webgl1 ui
HiDPI-en­abled im­me­di­ate-mode GUI ren­der­ing us­ing the Dear ImGui lib­rary.
Audio example screenshot
Au­dio Ex­ample webgl1 au­dio
Loads an OGG file and shows how to play spa­tial­ized au­dio with the Mag­num Au­dio lib­rary.
Viewer example screenshot
View­er Ex­ample webgl1
Uses scene im­port­er plu­gins to load a 3D scene for in­ter­act­ive view­ing.
Primitives example screenshot
Prim­it­ives Ex­ample webgl1
Shows how to use built­in prim­it­ives and how to do simple in­put hand­ling. Dis­plays an in­ter­act­ive cube.
Text example screenshot
Text Ex­ample webgl1
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­ample webgl2
Blender-in­spired depth-aware pan­ning, zoom­ing and ro­ta­tion for easy scene nav­ig­a­tion.
Arc Ball example screenshot
Ar­cBall Cam­era Ex­ample webgl2
Im­ple­ment­a­tion of Ken Shoe­make’s ar­cball cam­era with smooth nav­ig­a­tion fea­ture.
Triangle example screenshot
Tri­angle Ex­ample asm.js fall­back webgl1
Dis­plays simple tri­angle with in­ter­pol­ated col­ors. For the un­lucky, an asm.js ver­sion that doesn’t re­quire WebAssembly-cap­able browser is also avail­able.
Textured triangle example screenshot
Tex­tured Tri­angle Ex­ample webgl1
Slightly ex­ten­ded ver­sion of the tri­angle ex­ample; uses TGA im­port­er plu­gin to load a stone im­age and dis­plays a tri­angle with colored tex­ture on it.
Magnum GL Info screenshot
Mag­num GL Info asm.js fall­back webgl1 webgl2
Text util­ity print­ing info about Mag­num OpenGL cap­ab­il­it­ies. Ver­sions for WebGL 1, asm.js WebGL 1 and WebGL 2.
Magnum AL Info screenshot
Mag­num AL Info
Text util­ity print­ing out vari­ous in­form­a­tion about Mag­num and the Open­AL im­ple­ment­a­tion it’s run­ning on.

Look­ing for more? Not all demos are por­ted to HTM­L5 yet. See Ex­amples and Tu­tori­als and Util­it­ies in the doc­u­ment­a­tion — there’s an Oculus VR demo, shad­ow map­ping, shader ef­fects, vari­ous tools and apps and more.