Kinect Fusion powered 3D with WebGL, BabylonJS
- Posted: Jan 23, 2014 at 6:00 AM
- 9,846 Views
Today's project from Andy Beaulieu isn't really about the Kinect, but is using it in a very cool way, using a feature I don't see mentioned too often, let alone in a "real world" case.
In this post, I’ll show how to optimize and display color 3D scans in any WebGL-enabled browser using BabylonJS. I’ll be using Kinect for Windows for my 3D Scan, but you should be able to use these steps using other 3D Scanners as well.
The idea of using the Kinect for creating 3D Scans has been around for a while, and there are commercial packages such as ReconstructMe and Skanect which provide an easy interface for 3D Scanning. However, these packages have limitations and costs associated with them.
Step 1: Get the Tools
In this post, we’ll be using a few free tools and libraries:
Kinect for Windows SDK (and Developer Toolkit)
Download the latest SDK and Developer Toolkit to enable scanning using Kinect Fusion.
We’ll use Blender, a free 3D Design tool, to optimize our mesh scans and prepare them for Web sharing
BabylonJS / Blender Export Plug-in
This plugin for Blender allows you to export a Blender 3D Scene to Babylon format. Download the plug-in and read the install instructions from the link to make it available in Blender.
Step 2: 3D Scan using Kinect Fusion ...
Step 3: Optimize the Mesh using Blender ...
Step 4: Load and Display with BabylonJS ...
Once again, you can see samples of this process a here and a here. As you can see, it is a bit of work to optimize a mesh for display using WebGL, but by mastering these steps we have ultimate control over the size and detail of our meshes. And using WebGL and BabylonJS, we have a cross-platform solution which works in IE11, Firefox, Chrome, and even some mobile browsers.
Project Information URL: http://www.andybeaulieu.com/Home/tabid/67/EntryID/236/Default.aspx