jump to navigation

WebGL Visible Human Project July 30, 2011

Posted by Andor Salga in Open Source, webgl, XB PointStream, point cloud.


A couple of weeks ago it was my turn to demonstrate to the other researchers at the Seneca CDOT lab what I had been working on. I gave them a quick presentation of XB PointStream, a WebGL library for rendering point clouds in web pages.

After watching my presentation, Mike Hoye expressed interest in extracting data from the visible human project video and feeding it into the library—creating an interactive version of the video in 3D. The idea seemed fascinating and I anticipated seeing the results. It wasn’t long before Mike casually mentioned he finished everything. He showed me his demo and I was extremely impressed.

Slider Slicer

After playing around with the demo for a bit I decided it needed at least one change: a slider to slice the subject just like the video. I added a jQuery UI slider which now allows users to create cross sections of the point cloud. I then made some changes to the camera so it always focuses on the section which has been sliced ‘out’.

Something Completely Different

This demo is interesting because it’s different in two ways. First, the point cloud has contents. All my other clouds are actually hollow, while this one has a bunch of ‘meat’ within it.

Second, the file size. Mike mentioned the data set had been scaled down from several gigabytes. This sparked my interest since none of my current point clouds surpass 50MB. If I manage to solve the problem of dynamically loading sections of point cloud files, I could start experimenting with loading the entire 10GB cloud.

Making it Faster

The demo is sluggish right now since it stupidly renders 3.5 million points/frame. However, this can be fixed. Because the user clipping planes work on the Y-axis and because the cloud loads along the Y-axis, it would be possible to do coarse-level culling on sections of the cloud if it was pre-cut along this axis. For example, if I had 5 or so cross section ‘chunks’ of the cloud and one of the clipping planes passed the bounds of a cloud, that section could be culled from rendering entirely. When I have time (ha,ha) I’ll get around to doing that.

Special Thanks

A huge thanks to Mike Hoye who on his own time performed some magic and got the data out of the video. This demo would not have been possible without him. I’m looking forward to some higher fidelity point clouds in the future!


1. John Edgar Congote Calle - July 31, 2011

Hello, very nice demo, I been working with visualization of volumes in WebGL using a Ray-Casting algorithm, as you can check in this webpage:


Our first approach, was volume splatting, or point splatting, which is your method but each point has an alpha value, it’s very good for disperse datasets.

2. Andor Salga - July 31, 2011

Wow, very cool. I think there’s a lot I can learn from what you’ve developed here.

Many Thanks!

3. Reuben Reyes - August 1, 2011

Have to agree with Andor very cool, you may want to try and change the point size dynamically ( use right left arrow keys ) to change point size as in this example:


One other option would be to dynamically chance the near clipping plane and then just have the body of point cloud to swing in and out of the near clipping plane this would not slow your rendering since this is done on the graphics card. Just a thought.


4. Web Intents, put-selector, XB PointStream - August 5, 2011

[…] might appeal to people working with single-page applications.Point Clouds and XB PointStreamIn WebGL Visible Human Project, Andor Salga writes about a WebGL point cloud renderer for medical data. The Visible Human demo […]

5. WebGL around the net, 25 August 2011 | Learning WebGL - August 25, 2011

[…] a bit gruesome, but… Andor Salga has blogged about Mike Hoye’s port of the Visible Human project’s data to XB […]

6. anon - September 8, 2011

what has science done

7. Andor Salga - September 9, 2011

I’ve seen worse.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s


Get every new post delivered to your Inbox.

%d bloggers like this: