Kinect Fusion powered 3D with WebGL, BabylonJS

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.

Sharing 3D Scans in WebGL using BabylonJS

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.

Click the images below to see a couple of sample 3D scans – a monkey and a fruitbowl.

imageimage

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.

As a free alternative, we can use Kinect Fusion and Blender to create and optimize our 3D Scans. Then, we can share our 3D Scans in any WebGL-enabled browser using BabylonJS – a JavaScript library for 3D display and animation

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.

Blender
We’ll use Blender, a free 3D Design tool, to optimize our mesh scans and prepare them for Web sharing

BabylonJS
This free JavaScript library makes it easy to create 3D scenes and games using WebGL

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 ...

Conclusion

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.

[Read the whole thing]

Project Information URL: http://www.andybeaulieu.com/Home/tabid/67/EntryID/236/Default.aspx

image

image

Contact Information:

Tags:

Follow the Discussion

Comments Closed

Comments have been closed since this content was published more than 30 days ago, but if you'd like to continue the conversation, please create a new thread in our Forums,
or Contact Us and let us know.