Neuroimaging in the Browser Using the X Toolkit Daniel Hähn1, 3, Nicolas Rannou1, 3, Banu Ahtam1, 3, P

Neuroimaging in the Browser using the X Toolkit Daniel Hähn1, 3, Nicolas Rannou1, 3, Banu Ahtam1, 3, P. Ellen Grant1, 2, 3, Rudolph Pienaar1, 2, 3 1 Fetal-Neonatal Neuroimaging and Developmental Science Center, Boston Children’s Hospital 2 A. Martinos Center for Biomedical Imaging, Massachusetts General Hospital 3 Harvard Medical School

Technologies *

JavaScript ✓ Scientiﬁc Visualization in 2D/3D ✓ Easy-to-use API HTML 5 ✓ Demos, Lessons, Documentation ✓ Fully tested ✓ Open Source (MIT License) WebGL The X Toolkit } (XTK) Features Volume Slices in 2D and 3D Volume Rendering Label Map Overlays Mesh Fiber Bundles + Scalar Overlays

Performance Chrome Firefox Rendering File Parsing

57 FPS 751 ms Mesh Mesh 58 FPS 1391 ms

55 FPS 1179 ms Fibers Fibers 64 FPS 1500 ms Example Usage 57 FPS 3265 ms Volume Volume 58 FPS 3628 ms // create a new 3d renderer 0 FPS 20 FPS 40 FPS 60 FPS 80 FPS 0 ms 1000 ms 2000 ms 3000 ms 4000 ms var r = new X.renderer3D(); r.init(); Type File Size Objects Vertices Voxels Triangles Lines 2D Textures Mesh 6.38 MB 1 810457 n/a 270152 n/a n/a // load a .NII volume Fibers 6.89 MB 1 1124727 n/a n/a 20843 n/a var head = new X.volume(); Volume 19.7 MB 1308 9161 9843123 1308 2617 654 head.file = 'head.nii'; Characteristics of the used data sets averaged over 10 for each type. Not applicable measures are marked as ‘n/a’. // activate volume rendering head.volumeRendering = true; head.lowerThreshold = 20; File Formats // add the volume • DICOM • VTK PolyData • TrackVis r.add(head); • NIfTI • Freesurfer Meshes • MGH/MGZ • STL // .. and render it r.render(); • NRRD * Browser Support: r.onRender = function() { // spin the head http://goXTK.com ✓ Google Chrome r.camera.rotate([1,0]); Mozilla Firefox } http://slicedrop.com ✓ ✓ Safari Browser Ponies from References http://paulirish.deviantart.com/ [1] WebGL Speciﬁcation, Khronos Group 2012, http://www.khronos.org/webgl favourites/51528712 [2] Ginsburg D. et al., Realtime Visualization of the Connectome in the Browser using WebGL. 4th INCF Congress of Neuroinformatics 2011. doi: 10.3389/conf.fninf.2011.08.00095 ✓ Opera Next [3] Kelc R., Zygote Body: A New Interactive 3-Dimensional Didactical Tool for Teaching Anatomy. WebmedCentral ANATOMY 2012;3(1):WMC002903 [4] WebGL Frameworks, Khronos Group 2012, http://www.khronos.org/webgl/wiki/User_Contributions#Frameworks