NA-MICNational Alliance for Medical Image Computing http://www.na-mic.org

WebGL Export

Nicolas Rannou, Daniel Haehn

Boston Children's Hospitalnicolas.rannou@childrens.harvard.edu (857-218-5140)

NA-MIC Tutorial Contest: Summer 2012

© 2011, All Rights Reserved

National Alliance for Medical Image Computing http://www.na-mic.org

Learning Objective

Export data from Slicer to visualize it in a web browser

Audience: End-users

© 2011, All Rights Reserved

National Alliance for Medical Image Computing http://www.na-mic.org

Motivation

© 2011, All Rights Reserved

Many times researchers want to share the data they generate from Slicer.

The “WebGL Export” module allows researchers to bring their data to the web.

It opens new perspectives and will impact research in the following aspects:

Collaboration/Sharing data

Publication/Grant Application

Access your data from anywhere with your smart phone or tablet

National Alliance for Medical Image Computing http://www.na-mic.org

Pre-requisite

© 2011, All Rights Reserved

Slicer4 Data Loading and 3D Visualization

The Data loading and 3D visualization course guides through the basics of loading and viewing volumes and 3D models in Slicer4 .

Author: Sonia Pujol, Ph.D.

http://www.slicer.org/slicerWiki/index.php/Documentation/4.0/Training#Slicer4_Data_Loading_and_3D_Visualization

Slicer4 Data Loading and 3D Visualization

The Data loading and 3D visualization course guides through the basics of loading and viewing volumes and 3D models in Slicer4 .

Author: Sonia Pujol, Ph.D.

http://www.slicer.org/slicerWiki/index.php/Documentation/4.0/Training#Slicer4_Data_Loading_and_3D_Visualization

National Alliance for Medical Image Computing http://www.na-mic.org

This tutorial requires the installation of the Slicer4.1release and the tutorial dataset. They are available at the following locations:

Slicer download pagehttp://www.slicer.org/pages/Downloads/

Tutorial dataset: NAC brain atlashttp://www.spl.harvard.edu/publications/bitstream/download/5276

Courtesy of Halle M., Talos I-F., Jakab M., Farough S., Meier D., Wald L., Fischl B., Kikinis R. (http://www.spl.harvard.edu/publications/item/view/2037)

x

Material

© 2011, All Rights Reserved

National Alliance for Medical Image Computing http://www.na-mic.org

This tutorial has been tested on:

Linux:

Ubuntu 12.04 x86_64

Mac OSX:

Lion

Windows:

XP x64

Platforms

© 2011, All Rights Reserved

National Alliance for Medical Image Computing http://www.na-mic.org

• Load data

• Modify data

• Export data

• Share data

Overview

© 2011, All Rights Reserved

National Alliance for Medical Image Computing http://www.na-mic.org

Load data

© 2011, All Rights Reserved

• Load data

• Modify data

• Export data

• Share data

National Alliance for Medical Image Computing http://www.na-mic.org

Load data

© 2011, All Rights Reserved

Load the scene

National Alliance for Medical Image Computing http://www.na-mic.org

Load data

© 2011, All Rights Reserved

Look in the directory containing thetutorial dataset

Select brain-atlas-hierarchy.mrml

Open it

National Alliance for Medical Image Computing http://www.na-mic.org

Load data

© 2011, All Rights Reserved

The NAC brain atlas opens...The NAC brain atlas opens...

National Alliance for Medical Image Computing http://www.na-mic.org

Modify data

© 2011, All Rights Reserved

• Load data

• Modify data

• Export data

• Share data

National Alliance for Medical Image Computing http://www.na-mic.org

Modify data - Visibility

© 2011, All Rights Reserved

Open the “Models” module

Select “left cerebral hemisphere”

Click on the “eye” to hide the model

National Alliance for Medical Image Computing http://www.na-mic.org

Modify data - Color

© 2011, All Rights Reserved

Select “corpus callosum” label

Click on the color button

Modify the color to white

National Alliance for Medical Image Computing http://www.na-mic.org

Modify data - Opacity

© 2011, All Rights Reserved

Select “left cerebellar cortex” label

Modify the opacity

National Alliance for Medical Image Computing http://www.na-mic.org

Modify data - Background

© 2011, All Rights Reserved

Click on the “pin”

Click on the “eye”

Select “Black background”

National Alliance for Medical Image Computing http://www.na-mic.org

Export data

© 2011, All Rights Reserved

• Load data

• Modify data

• Export data

• Share data

National Alliance for Medical Image Computing http://www.na-mic.org

Export data

© 2011, All Rights Reserved

Open “WebGL Export” module

Work in Progress

National Alliance for Medical Image Computing http://www.na-mic.org

Export data

© 2011, All Rights Reserved

Select the output directory

Export to WebGL!

National Alliance for Medical Image Computing http://www.na-mic.org

Export data

© 2011, All Rights Reserved

Your default web browser will opena WebGL visualization of the data

Your default web browser will opena WebGL visualization of the data

Et voila!Et voila!

National Alliance for Medical Image Computing http://www.na-mic.org

Export data

© 2011, All Rights Reserved

Same models visibility

Same models color

Same models opacity

Same background color

Same camera orientation

Slicer 4.1 Firefox 12

National Alliance for Medical Image Computing http://www.na-mic.org

Share data

© 2011, All Rights Reserved

• Load data

• Modify data

• Export data

• Share data

National Alliance for Medical Image Computing http://www.na-mic.org

Share data

© 2011, All Rights Reserved

• Output directory structure

index.html

model3.vtk

model5.vtk

model6.vtk

model1.vtk model2.vtk

model4.vtk

...

.

.

. . . .

.

.

National Alliance for Medical Image Computing http://www.na-mic.org

• public directory

• Host on your own web server

Share data

© 2011, All Rights Reserved

National Alliance for Medical Image Computing http://www.na-mic.org

Conclusion

© 2011, All Rights Reserved

• Publishing your research to the web is EASY

• Many use cases including:

• Collaboration/Sharing data

• Publication/Grant Application

• Access your data from anywhere with your smart phone or tablet

• Visit http://goXTK.com for more informations

National Alliance for Medical Image Computing http://www.na-mic.org

National Alliance for Medical Image Computing

NIH U54EB005149

Acknowledgments

© 2011, All Rights Reserved

Daniel Haehn, Rudolph Pienaar, Ellen GrantFetal-Neonatal Neuroimaging & Developmental Science Center,Boston Children's Hospital

Special thanks to Sonia Pujol

Steve Pieper, Ron Kikinis, Slicer developersSurgical Planning Laboratory,Brigham and Women's Hospital