xtk

<a href="http://twitter.com/goxtk" target="_blank"><img src="http://xtk.github.com/twitter3.png"></a> # The X Toolkit: WebGL™ for Scientific Visualization * XTK is easy, lightweight and fast ! * Native reading of a variety of scientific file formats (see <a href="https://github.com/xtk/X/wiki/X:Fileformats">File formats</a>) * Volume rendering, thresholding and cross-sectional slicing of 3d image data * Label maps, color tables and surface overlays are supported, as well as <a href="http://evanw.github.com/csg.js/" target="_blank">Constructive Solid Geometry</a> * CDash + Google Closure driven <a href="http://cdash.goxtk.com/index.php?project=XTK" target="_blank">build and test system</a> ## Demos <table> <tr> <td valign="middle" width="100"><a href="http://demos.goxtk.com/knee_atlas/"><img src="http://xtk.github.com/demosgfx/knee_atlas/minicaption.png" alt="lesson00" title="Click me!"></a>       <a href="http://demos.goxtk.com/knee_atlas/">Knee Atlas</a></td> <td valign="middle" width="100"><a href="http://demos.goxtk.com/brainfibers/"><img src="http://xtk.github.com/demosgfx/brainfibers/minicaption.png" alt="lesson00" title="Click me!"></a>       <a href="http://demos.goxtk.com/brainfibers/">Fiber Atlas</a></td> <td valign="middle" width="100"><a href="http://ecm2.mathcs.emory.edu/aneurisk/"><img src="http://xtk.github.com/demosgfx/aneurysm/minicaption.png" alt="lesson00" title="Click me!"></a>     <a href="http://ecm2.mathcs.emory.edu/aneurisk/">Aneuriskweb</a></td> <td valign="middle" width="100"><a href="http://demos.goxtk.com/brain_atlas/"><img src="http://xtk.github.com/demosgfx/brain_atlas/minicaption.png" alt="lesson00" title="Click me!"></a>       <a href="http://demos.goxtk.com/brain_atlas/">Brain Atlas</a></td> <td valign="middle" width="100"><a href="http://www.mindboggle.info/"><img src="http://xtk.github.com/demosgfx/mindboggle/minicaption.png" alt="lesson00" title="Click me!"></a>       <a href="http://www.mindboggle.info/">Mindboggle</a></td> <td valign="middle" width="100"><a href="http://slicedrop.com/"><img src="http://xtk.github.com/demosgfx/slicedrop/minicaption.png" alt="lesson00" title="Click me!"></a>       <a href="http://slicedrop.com/">Slice:Drop</a></td> </tr> </table> ## Lessons ## <table> <tr> <td valign="middle" width="100"><a href="http://lessons.goxtk.com/00/"><img src="http://xtk.github.com/lessonsgfx/00/minicaption.png" alt="lesson00" title="Click me!"></a><a href='http://jsfiddle.net/gh/get/toolkit/edge/xtk/lessons/tree/master/00/#run' target=_blank><img src="http://xtk.github.com/fiddlelogo_small2.png"></a></td> <td valign="top" width="326"><a href="http://lessons.goxtk.com/00/">Lesson 00: Hello cube!</a> The most simple XTK lesson displays a white cube.</td> <td valign="middle" width="100"><a href="http://lessons.goxtk.com/01/"><img src="http://xtk.github.com/lessonsgfx/01/minicaption.png" alt="lesson01" title="Click me!"></a><a href='http://jsfiddle.net/gh/get/toolkit/edge/xtk/lessons/tree/master/01/#run' target=_blank><img src="http://xtk.github.com/fiddlelogo_small2.png"></a></td> <td valign="top" width="326"><a href="http://lessons.goxtk.com/01/">Lesson 01: Skin the cube and rotate it!</a> This one adds a texture to the cube and activates spinning.</td> </tr> <tr> <td valign="middle" width="100"><a href="http://lessons.goxtk.com/02/"><img src="http://xtk.github.com/lessonsgfx/02/minicaption.png" alt="lesson02" title="Click me!"></a><a href='http://jsfiddle.net/gh/get/toolkit/edge/xtk/lessons/tree/master/02/#run' target=_blank><img src="http://xtk.github.com/fiddlelogo_small2.png"></a></td> <td valign="top"><a href="http://lessons.goxtk.com/02/">Lesson 02: Constructive Solid Geometry is fun!</a> Mesh primitives can be combined using boolean operations.</td> <td valign="middle" width="100"><a href="http://lessons.goxtk.com/03/"><img src="http://xtk.github.com/lessonsgfx/03/minicaption.png" alt="lesson03" title="Click me!"></a><a href='http://jsfiddle.net/gh/get/toolkit/edge/xtk/lessons/tree/master/03/#run' target=_blank><img src="http://xtk.github.com/fiddlelogo_small2.png"></a></td> <td valign="top"><a href="http://lessons.goxtk.com/03/">Lesson 03: We need more cubes!</a> One thousand objects are rendered in a single scene.</td> </tr> <tr> <td valign="middle" width="100"><a href="http://lessons.goxtk.com/04/"><img src="http://xtk.github.com/lessonsgfx/04/minicaption.png" alt="lesson04" title="Click me!"></a><a href='http://jsfiddle.net/gh/get/toolkit/edge/xtk/lessons/tree/master/04/#run' target=_blank><img src="http://xtk.github.com/fiddlelogo_small2.png"></a></td> <td valign="top"><a href="http://lessons.goxtk.com/04/">Lesson 04: The magic Porsche!</a> This lesson loads a mesh from a .STL file and shows off the magic mode.</td> <td valign="middle" width="100"><a href="http://lessons.goxtk.com/05/"><img src="http://xtk.github.com/lessonsgfx/05/minicaption.png" alt="lesson05" title="Click me!"></a><a href='http://jsfiddle.net/gh/get/toolkit/edge/xtk/lessons/tree/master/05/#run' target=_blank><img src="http://xtk.github.com/fiddlelogo_small2.png"></a></td> <td valign="top"><a href="http://lessons.goxtk.com/05/">Lesson 05: Give me skull, baby!</a> A visualization of a mesh loaded from a .VTK file.</td> </tr> <tr> <td valign="middle" width="100"><a href="http://lessons.goxtk.com/06/"><img src="http://xtk.github.com/lessonsgfx/06/minicaption.png" alt="lesson06" title="Click me!"></a><a href='http://jsfiddle.net/gh/get/toolkit/edge/xtk/lessons/tree/master/06/#run' target=_blank><img src="http://xtk.github.com/fiddlelogo_small2.png"></a></td> <td valign="top"><a href="http://lessons.goxtk.com/06/">Lesson 06: Connectivity!</a> Load and render brain fibers from a .TRK file.</td> <td valign="middle" width="100"><a href="http://lessons.goxtk.com/07/"><img src="http://xtk.github.com/lessonsgfx/07/minicaption.png" alt="lesson07" title="Click me!"></a><a href='http://jsfiddle.net/gh/get/toolkit/edge/xtk/lessons/tree/master/07/#run' target=_blank><img src="http://xtk.github.com/fiddlelogo_small2.png"></a></td> <td valign="top"><a href="http://lessons.goxtk.com/07/">Lesson 07: One renderer is not enough!</a> Here multiple 3D renderers are showing the same object with different camera positions.</td> </tr> <tr> <td valign="middle" width="100"><a href="http://lessons.goxtk.com/08/"><img src="http://xtk.github.com/lessonsgfx/08/minicaption.png" alt="lesson08" title="Click me!"></a><a href='http://jsfiddle.net/gh/get/toolkit/edge/xtk/lessons/tree/master/08/#run' target=_blank><img src="http://xtk.github.com/fiddlelogo_small2.png"></a></td> <td valign="top"><a href="http://lessons.goxtk.com/08/">Lesson 08: Surf free!</a> Loading freesurfer meshes and brain fibers at the same time.</td> <td valign="middle" width="100"><a href="http://lessons.goxtk.com/09/"><img src="http://xtk.github.com/lessonsgfx/09/minicaption.png" alt="lesson09" title="Click me!"></a><a href='http://jsfiddle.net/gh/get/toolkit/edge/xtk/lessons/tree/master/09/#run' target=_blank><img src="http://xtk.github.com/fiddlelogo_small2.png"></a></td> <td valign="top"><a href="http://lessons.goxtk.com/09/">Lesson 09: Points to Spheres!</a> Point data is loaded from a .VTK file and each point is displayed as a sphere.</td> </tr> <tr> <td valign="middle" width="100"><a href="http://lessons.goxtk.com/10/"><img src="http://xtk.github.com/lessonsgfx/10/minicaption.png" alt="lesson10" title="Click me!"></a><a href='http://jsfiddle.net/gh/get/toolkit/edge/xtk/lessons/tree/master/10/#run' target=_blank><img src="http://xtk.github.com/fiddlelogo_small2.png"></a></td> <td valign="top"><a href="http://lessons.goxtk.com/10/">Lesson 10: Slice it!</a> Load a .NRRD single-file DICOM volume and a segmentation mesh from a .VTK file.</td> <td valign="middle" width="100"><a href="http://lessons.goxtk.com/11/"><img src="http://xtk.github.com/lessonsgfx/11/minicaption.png" alt="lesson11" title="Click me!"></a><a href='http://jsfiddle.net/gh/get/toolkit/edge/xtk/lessons/tree/master/11/#run' target=_blank><img src="http://xtk.github.com/fiddlelogo_small2.png"></a></td> <td valign="top"><a href="http://lessons.goxtk.com/11/">Lesson 11: Slice it with colors!</a> This one loads a .NRRD single-file DICOM volume and the corresponding segmentation as a label map colorized using a color lookup-table.</td> </tr> <tr> <td valign="middle" width="100"><a href="http://lessons.goxtk.com/12/"><img src="http://xtk.github.com/lessonsgfx/12/minicaption.png" alt="lesson12" title="Click me!"></a><a href='http://jsfiddle.net/gh/get/toolkit/edge/xtk/lessons/tree/master/12/#run' target=_blank><img src="http://xtk.github.com/fiddlelogo_small2.png"></a></td> <td valign="top"><a href="http://lessons.goxtk.com/12/">Lesson 12: Curvature!</a> Here we load a freesurfer mesh (.SMOOTHWM) and different curvature (.CRV) values as an overlay.</td> <td valign="middle" width="100"><a href="http://lessons.goxtk.com/13/"><img src="http://xtk.github.com/lessonsgfx/13/minicaption.png" alt="lesson13" title="Click me!"></a><a href='http://jsfiddle.net/gh/get/toolkit/edge/xtk/lessons/tree/master/13/#run' target=_blank><img src="http://xtk.github.com/fiddlelogo_small2.png"></a></td> <td valign="top"><a href="http://lessons.goxtk.com/13/">Lesson 13: I want 2D!</a> This lesson links three 2D renderers to one 3D renderer and loads a .NRRD single-file DICOM and a label map.</td> </tr> <tr> <td valign="middle" width="100"><a href="http://lessons.goxtk.com/14/"><img src="http://xtk.github.com/lessonsgfx/14/minicaption.png" alt="lesson14" title="Click me!"></a><a href='http://jsfiddle.net/gh/get/toolkit/edge/xtk/lessons/tree/master/14/#run' target=_blank><img src="http://xtk.github.com/fiddlelogo_small2.png"></a></td> <td valign="top"><a href="http://lessons.goxtk.com/14/">Lesson 14: Is it a cube?</a> Zoom in to see the particles and some great effects!</td> <td valign="middle" width="100"><a href="http://lessons.goxtk.com/15/"><img src="http://xtk.github.com/lessonsgfx/15/minicaption.png" alt="lesson15" title="Click me!"></a><a href='http://jsfiddle.net/gh/get/toolkit/edge/xtk/lessons/tree/master/15/#run' target=_blank><img src="http://xtk.github.com/fiddlelogo_small2.png"></a></td> <td valign="top"><a href="http://lessons.goxtk.com/15/">Lesson 15: D-I-C-O-M!</a> Here we visualize a brain MR scan read from DICOM files.</td> </tr> <tr> <td valign="middle" width="100"><a href="http://lessons.goxtk.com/16/"><img src="http://xtk.github.com/lessonsgfx/16/minicaption.png" alt="lesson16" title="Click me!"></a><a href='http://jsfiddle.net/gh/get/toolkit/edge/xtk/lessons/tree/master/16/#run' target=_blank><img src="http://xtk.github.com/fiddlelogo_small2.png"></a></td> <td valign="top"><a href="http://lessons.goxtk.com/16/">Lesson 16: 10 PRINT 3D</a> A 3D version of the excellent <a href='http://10print.org/' target=_blank>10 PRINT</a> pattern showcasing advanced XTK object generation.</td> <td valign="middle" width="100"><a href="http://lessons.goxtk.com/17/"><img src="http://xtk.github.com/lessonsgfx/17/minicaption.png" alt="lesson17" title="(RE)Slice it!"></a><a href='http://jsfiddle.net/gh/get/toolkit/edge/xtk/lessons/tree/master/17/#run' target=_blank><img src="http://xtk.github.com/fiddlelogo_small2.png"></a></td> <td valign="top"><a href="http://lessons.goxtk.com/17/">Lesson 17: (RE)Slice it!</a> New arbitrary reslicing capabilities. Everything is happening in Real Time! Leap Motion Ready!</td> </tr> </table> ## Download        <a href="http://get.goXTK.com/xtk_edge.js"><img src="http://xtk.github.com/xtkfile.png"></a> Get it right here: <a href="http://get.goXTK.com/xtk.js">xtk.js</a> or include it like this: ```html <script type="text/javascript" src="http://get.goXTK.com/xtk.js"></script> ``` ## NPM ```bash npm install xtk # or yarn add xtk ``` ```js import 'xtk'; // window.X is now available ``` ## Example Usage ## ```javascript // create a new 3d renderer var r = new X.renderer3D(); r.init(); // create a mesh from a .vtk file var skull = new X.mesh(); skull.file = 'skull.vtk'; // add the object r.add(skull); // .. and render it r.render(); ``` Check out the <a href="http://lessons.goxtk.com/05/" target="_blank">live version</a>! ## API Documentation ## The full documentation of the API is available <a href="http://api.goXTK.com" target="_blank">here</a>. ## More information... ## ...is available at <a href="http://wiki.goxtk.com" target="_blank">Project X</a>, the X Toolkit wiki system. ## Need help? ## We use <a href="http://stackoverflow.com/questions/tagged/xtk">http://stackoverflow.com/questions/tagged/xtk</a> for user support. Please ask and tag ([xtk]) your question there! ## Contribute? ## Yes, please! See the <a href="https://github.com/xtk/X/wiki/X:DevelopersHeadsUp" target="_blank">Developer's Heads Up</a> and the <a href="https://github.com/xtk/X/wiki/X:Future" target="_blank">X:Future page</a>. ## License ## Copyright (c) 2012 The X Toolkit Developers \<dev@goXTK.com> The X Toolkit (XTK) is licensed under the MIT License: <a href="http://www.opensource.org/licenses/mit-license.php" target="_blank">http://www.opensource.org/licenses/mit-license.php</a> ## Publications ## * Hähn D, Rannou N, Ahtam B, Grant PE, Pienaar R: Neuroimaging in the Browser using the X Toolkit. NeuroInformatics, September 2012. <a href="http://www.neuroinformatics2012.org/abstracts/neuroimaging-in-the-browser-using-the-x-toolkit">Abstract</a> and <a href="http://f1000.com/posters/browse/summary/1092491">Poster</a>. * <a href="https://github.com/xtk/X/wiki/X:publications">more..</a> ## Affiliations and Sponsors ## > <a href="http://childrenshospital.org/FNNDSC"><img src="http://xtk.github.com/chb_logo.png" alt="Boston Children's Hospital Boston" title="Children's Hospital"></a>      > <a href="http://hms.harvard.edu"><img src="http://xtk.github.com/hms_logo.png" alt="Harvard Medical School" title="Harvard Medical School"></a> > <a href="http://bostonbuilt.org"><img src='http://bostonbuilt.org/icon.php?q=built_in_boston_color_fancy.png&u=goxtk.com' width=130></a>