Showcase

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.

2D Fluid Simulation example screenshot
2D Flu­id Sim­u­la­tion Ex­am­ple we­bgl2 physics ui
2D flu­id sim­u­la­tion us­ing the APIC method.
3D Fluid Simulation example screenshot
3D Flu­id Sim­u­la­tion Ex­am­ple we­bgl2 physics ui
SPH flu­id sim­u­la­tion with a dy­nam­ic bound­ary.
Ray Tracing example screenshot
Ray Trac­ing we­bgl1
Sim­ple it­er­a­tive CPU ray trac­ing.
Octree example screenshot
Oc­tree we­bgl1 physics in­stanc­ing
Loose oc­tree for ac­cel­er­at­ing col­li­sion de­tec­tion
Magnum Player screenshot
Mag­num Play­er 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 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 we­bgl1 physics in­stanc­ing
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 we­bgl1 physics in­stanc­ing
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 we­bgl2
Show­cas­es us­age of mul­ti­ple frame­buffer at­tach­ments to im­ple­ment ob­ject pick­ing.
WebXR example screenshot
We­bXR Ex­am­ple we­bgl1 we­bxr
A ba­sic demon­stra­tion of how to use the Em­scripten We­bXR li­brary with Mag­num.
Dear ImGui example screenshot
Dear ImGui Ex­am­ple we­bgl1 ui
HiD­PI-en­abled im­me­di­ate-mode GUI ren­der­ing us­ing the Dear ImGui li­brary.
Audio example screenshot
Au­dio Ex­am­ple we­bgl1 au­dio
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 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 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 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 we­bgl2
Blender-in­spired depth-aware pan­ning, zoom­ing and ro­ta­tion for easy scene nav­i­ga­tion.
Arc Ball example screenshot
Ar­cBall Cam­era Ex­am­ple we­bgl2
Im­ple­men­ta­tion of Ken Shoe­make’s ar­cball cam­era with smooth nav­i­ga­tion fea­ture.
Triangle example screenshot
Tri­an­gle Ex­am­ple asm.js fall­back 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 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 asm.js fall­back 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
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.