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.


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.

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

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


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:



Contact Information:

The Discussion

Conversation locked

This conversation has been locked by the site admins. No new comments can be made.