What can you make with a Leap Motion Controller, some plexiglass, and the magic of WebGL? Over the course of three weeks, a team of students at Stockholm’s Hyper Island created a haunting interactive illusion – where people could reach out and command virtual objects sealed in glass. They named it Calderan.

Calderan was inspired by the sunken craters left after volcanic eruptions. Click To TweetHyper Island is a school where digital media professionals can sharpen their talents. One of 15 student-created showpieces presented at last year’s Distortional Evolution exhibit, Calderan combines cutting-edge web technology, simple materials, and a classic magic trick – with Leap Motion technology bringing the whole experience into the audience’s hands.

Building Calderan


The medium: a plexiglass pyramid

Pepper’s ghost is a classic stage and magic trick that creates illusions by projecting images onto panes of glass – creating ghosts to haunt stage plays and theme park rides. Rather than using one screen for a reflection, the Hyper Island team decided to create a 3D hologram with a pyramid. Plexiglass was chosen for its clear and sharp reflective properties; plus its strength compared to glass allowed them to build a thin, large structure.

The light: a 55” LCD television

Through a plexiglass, darkly – Calderan is a haunting interactive illusion built with #WebGL. Click To TweetWhile the team originally considered using projectors, they soon discovered that this would require a complicated setup, and the light would be far too bright without a filter or redirection. “Using a TV screen allowed us to keep the four different reflections in sync, and ensure the hologram was sharp,” says Ellinor Pettersson, one of the showpiece’s creators.

“We could also change the brightness of the screen, and by using a black background with the perfect brightness we could make it look as if the object was just hovering freely inside the pyramid.”

The illusion: WebGL

Originally, the models created for Calderan were designed in a 3D CAD program. However, the team quickly found that the fully rendered 3D model wouldn’t allow for real-time manipulation. Any lag would instantly shatter the illusion. By placing the model into WebGL, they were able to create different viewpoints on four sides of the model – so that the Leap Motion interaction would change the viewpoints rather than the object itself.


For more about the artistic process behind Calderan, check out blog.leapmotion.com »

Of course, there were challenges along the way. Without getting the angles on all four viewpoints just right, the 3D illusion would be broken – especially since Calderan was designed to be seen from all sides. “Most of these issues were solved by late nights coding and heaps of coffee, but taking on WebGL and creating viewpoints rather than controlling the objects through the original software was both a great solution and a huge new challenge.”
Want to create your own magic pyramid? The source code for Calderan is available for anyone to download and try. Learn more about the project at calderan.se.