In this final chapter, we'll talk a bit about 3D graphics with the Leap, on the Web. Yes, for reals.
We'll take a look at how to make practical use of an HTML 3D graphics standard called WebGL , and a popular compatibility and utility library. Lastly, we'll see how the Leap and Three.js mesh together. The topics we'll take a look at are:
WebGL basics
Three.js abstraction layer and toolkit for 3D
Combining Leap input with 3D objects
Once upon a time there was a software engineer who had a simple desire: he wanted to experiment with crafting a three-dimensional environment, just for the heck of it. Should be simple enough, he thought, after all, there are so many 3D games and widgets out there, it can't be that hard. Everyone uses C++ and OpenGL, right? It's cross-platform, isn't it?
He very quickly began to suspect that things might not go as smoothly as he had imagined at the outset. "It's just #include <GL/gl.h>, right?" he asked. "Oh wait, apparently Mac OS X wants <OpenGL/gl.h>. And what's this about glu.h not being found? The OpenGL tutorial that I found online says to use GLUT, but I don't think that's supported anymore, is it? What's this Linux glx contraption? What on earth is mesa?" he mumbled to himself, getting more desperate with each linker error. "Forget it, I'm joining a monastic order" our hapless developer finally announces, chucking his ThinkPad™ out the window...
Some old-timers may instinctively scoff at the notion of creating a 3D environment in a web browser, using only JavaScript (and maybe some GL shader language). Is it really supported by all modern browsers? Is it accelerated? Does it perform well on mobile devices? Does it have the same capabilities found in a native graphics library that I'd want?
Well, more or less yes. There may be some skeptics out there, especially those who remember the first real attempt at 3D graphics on the web long ago, using virtual reality markup language (VRML). That was an attempt to implement 3D animations with standardized markup rendered via browser plugins, and, quite honestly it was not all that awesome, and we should probably forget it ever existed. Those days are long behind us now, fortunately.
Let's talk about WebGL. It's a well-defined API standard maintained by the Khronos non-profit group, along with other OpenGL-related standards. It is supported by nearly all major browsers, with the usual...
Deciding to use Three.js naturally introduces a dependency into our web client application, but when it comes to 3D programming, it's a very acceptable trade-off. One can think of it as the jQuery for 3D graphics, providing invaluable utilities and shortcuts for common tasks, while greatly enhancing fallback capabilities and smoothing over differences in implementations. LeapJS is naturally pretty useful as well for our purposes.
Let's take a look at combining the two. We can either download the Three.js library and include it locally, or we can link to the latest build hosted by GitHub (or elsewhere). While linking to the latest build is great, because we get the latest optimizations and bug fixes without doing any work at all, downloading the library is usually a better option; development is a tad faster (page reloads are slightly quicker without having to fetch the file from GitHub, especially if you are not geographically proximate to their servers...
Now, we should start animating and rendering things. In a perfect world we could perform our own window.requestAnimationFrame()
calls, fetching the latest Leap data frames with controller.frame() and repainting the Three.js scene, but at present such a setup is impossible to test due to the incomplete state of the LeapJS library.
Our demonstration integration with Three.js and LeapJS will be simplicity itself; we'll rotate our cute lil' unit cube according to the user's hand rotation. When new hand tracking updates come in from the controller, we'll rotate the cube according to the palm normal of the first returned hand.
A normal is like a ray projecting outward from a surface, representing its orientation. The palmNormal property of a Leap.Hand is expressed as a unit vector that points outward from the plane described by the palm of the hand. The use of a palm normal for rotating an object works nicely because we can describe the rotation of the cube based on the normal...
This should hopefully be enough of an introduction for using the controller on the web with 3D graphics to whet your appetite. This combination of technology has the potential to revolutionize everything from data visualization to gaming, and perhaps new applications not even conceived of yet.
Upon first learning the details of the controller, most people ask "what's it for?" There is no specific application; it was designed as a general input device to enhance the way in which users can interact with machines. There is no specific use case that the computer mouse was designed for, and despite the fact that its only use for a while was to enhance fancy word processing capabilities, the software to take advantage of the two-dimensional input evolved along with a general understanding by users of how to use it to manipulate software. If you have an interest in increasing the accessibility of computer-based services, getting creative and exploring novel ways of computer interaction,...
© 2013 Packt Publishing Limited All Rights Reserved
