Awesome
<a href="http://twitter.com/goxtk" target="_blank"><img src="http://xtk.github.io/twitter3.png"></a>
The X Toolkit: <i>WebGL™ for Scientific Visualization</i>
- <b>XTK is <i>easy</i>, <i>lightweight</i> and <i>fast</i> !</b>
- Native reading of a <i><b>variety of scientific file formats</b></i> (see <a href="https://github.com/xtk/X/wiki/X:Fileformats">File formats</a>)<br>
- <i><b>Volume rendering, thresholding and cross-sectional slicing</b></i> of 3d image data<br>
- <i><b>Label maps, color tables and surface overlays</b></i> are supported, as well as <i><a href="http://evanw.github.com/csg.js/" target="_blank">Constructive Solid Geometry</a></i><br>
- CDash + Google Closure driven <a href="http://cdash.goxtk.com/index.php?project=XTK" target="_blank"><i>build and test system</i></a>
CS460 at the University of Massachusetts Boston
<a href="https://cs460.org"><img src="https://cs460.org/gfx/cs460.png" title="Click me!" width=200></a>
XTK is being taught as part of the CS460 Computer Graphics course at UMass Boston. All lectures and videos are available at https://cs460.org ! This is part of the BostonGFX (==Graphics for Everybody, #GFX4ALL) initiative.
Demos
<table> <tr> <td valign="middle" width="100"><a href="http://demos.goxtk.com/knee_atlas/"><img src="http://xtk.github.io/demosgfx/knee_atlas/minicaption.png" alt="lesson00" title="Click me!"></a><br><sup><b><a href="http://demos.goxtk.com/knee_atlas/">KneeAtlas</a></b></sup></td> <td valign="middle" width="100"><a href="http://demos.goxtk.com/brainfibers/"><img src="http://xtk.github.io/demosgfx/brainfibers/minicaption.png" alt="lesson00" title="Click me!"></a><br><sup><b><a href="http://demos.goxtk.com/brainfibers/">FiberAtlas</a></b></sup></td> <td valign="middle" width="100"><a href="http://ecm2.mathcs.emory.edu/aneurisk/"><img src="http://xtk.github.io/demosgfx/aneurysm/minicaption.png" alt="lesson00" title="Click me!"></a><br><sup><b><a href="http://ecm2.mathcs.emory.edu/aneurisk/">Aneuriskweb</a></b></sup></td> <td valign="middle" width="100"><a href="http://demos.goxtk.com/brain_atlas/"><img src="http://xtk.github.io/demosgfx/brain_atlas/minicaption.png" alt="lesson00" title="Click me!"></a><br><sup><b><a href="http://demos.goxtk.com/brain_atlas/">BrainAtlas</a></b></sup></td> <td valign="middle" width="100"><img src="http://xtk.github.io/demosgfx/mindboggle/minicaption.png" alt="lesson00" title="Click me!"><br><sup><b><a href="">Mindboggle</a></b></sup></td> <td valign="middle" width="100"><a href="http://slicedrop.com/"><img src="http://xtk.github.io/demosgfx/slicedrop/minicaption.png" alt="lesson00" title="Click me!"></a><br><sup><b><a href="http://slicedrop.com/">Slice:Drop</a></b></sup></td> </tr> </table>Lessons
<table> <tr> <td valign="middle" width="100"><a href="http://lessons.goxtk.com/00/"><img src="http://xtk.github.io/lessonsgfx/00/minicaption.png" alt="lesson00" title="Click me!"></a><a href='http://jsfiddle.net/gh/get/xtk/edge/xtk/lessons/tree/master/00/#run' target=_blank><img src="http://xtk.github.io/fiddlelogo_small2.png"></a></td> <td valign="top" width="326"><a href="http://lessons.goxtk.com/00/"><b>Lesson 00: Hello cube!</b></a><br>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.io/lessonsgfx/01/minicaption.png" alt="lesson01" title="Click me!"></a><a href='http://jsfiddle.net/gh/get/xtk/edge/xtk/lessons/tree/master/01/#run' target=_blank><img src="http://xtk.github.io/fiddlelogo_small2.png"></a></td> <td valign="top" width="326"><a href="http://lessons.goxtk.com/01/"><b>Lesson 01: Skin the cube and rotate it!</b></a><br>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.io/lessonsgfx/02/minicaption.png" alt="lesson02" title="Click me!"></a><a href='http://jsfiddle.net/gh/get/xtk/edge/xtk/lessons/tree/master/02/#run' target=_blank><img src="http://xtk.github.io/fiddlelogo_small2.png"></a></td> <td valign="top"><a href="http://lessons.goxtk.com/02/"><b>Lesson 02: Constructive Solid Geometry is fun!</b></a><br>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.io/lessonsgfx/03/minicaption.png" alt="lesson03" title="Click me!"></a><a href='http://jsfiddle.net/gh/get/xtk/edge/xtk/lessons/tree/master/03/#run' target=_blank><img src="http://xtk.github.io/fiddlelogo_small2.png"></a></td> <td valign="top"><a href="http://lessons.goxtk.com/03/"><b>Lesson 03: We need more cubes!</b></a><br>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.io/lessonsgfx/04/minicaption.png" alt="lesson04" title="Click me!"></a><a href='http://jsfiddle.net/gh/get/xtk/edge/xtk/lessons/tree/master/04/#run' target=_blank><img src="http://xtk.github.io/fiddlelogo_small2.png"></a></td> <td valign="top"><a href="http://lessons.goxtk.com/04/"><b>Lesson 04: The magic Porsche!</b></a><br>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.io/lessonsgfx/05/minicaption.png" alt="lesson05" title="Click me!"></a><a href='http://jsfiddle.net/gh/get/xtk/edge/xtk/lessons/tree/master/05/#run' target=_blank><img src="http://xtk.github.io/fiddlelogo_small2.png"></a></td> <td valign="top"><a href="http://lessons.goxtk.com/05/"><b>Lesson 05: Rotate the skull!</b></a><br>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.io/lessonsgfx/06/minicaption.png" alt="lesson06" title="Click me!"></a><a href='http://jsfiddle.net/gh/get/xtk/edge/xtk/lessons/tree/master/06/#run' target=_blank><img src="http://xtk.github.io/fiddlelogo_small2.png"></a></td> <td valign="top"><a href="http://lessons.goxtk.com/06/"><b>Lesson 06: Connectivity!</b></a><br>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.io/lessonsgfx/07/minicaption.png" alt="lesson07" title="Click me!"></a><a href='http://jsfiddle.net/gh/get/xtk/edge/xtk/lessons/tree/master/07/#run' target=_blank><img src="http://xtk.github.io/fiddlelogo_small2.png"></a></td> <td valign="top"><a href="http://lessons.goxtk.com/07/"><b>Lesson 07: One renderer is not enough!</b></a><br>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.io/lessonsgfx/08/minicaption.png" alt="lesson08" title="Click me!"></a><a href='http://jsfiddle.net/gh/get/xtk/edge/xtk/lessons/tree/master/08/#run' target=_blank><img src="http://xtk.github.io/fiddlelogo_small2.png"></a></td> <td valign="top"><a href="http://lessons.goxtk.com/08/"><b>Lesson 08: Surf free!</b></a><br>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.io/lessonsgfx/09/minicaption.png" alt="lesson09" title="Click me!"></a><a href='http://jsfiddle.net/gh/get/xtk/edge/xtk/lessons/tree/master/09/#run' target=_blank><img src="http://xtk.github.io/fiddlelogo_small2.png"></a></td> <td valign="top"><a href="http://lessons.goxtk.com/09/"><b>Lesson 09: Points to Spheres!</b></a><br>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.io/lessonsgfx/10/minicaption.png" alt="lesson10" title="Click me!"></a><a href='http://jsfiddle.net/gh/get/xtk/edge/xtk/lessons/tree/master/10/#run' target=_blank><img src="http://xtk.github.io/fiddlelogo_small2.png"></a></td> <td valign="top"><a href="http://lessons.goxtk.com/10/"><b>Lesson 10: Slice it!</b></a><br>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.io/lessonsgfx/11/minicaption.png" alt="lesson11" title="Click me!"></a><a href='http://jsfiddle.net/gh/get/xtk/edge/xtk/lessons/tree/master/11/#run' target=_blank><img src="http://xtk.github.io/fiddlelogo_small2.png"></a></td> <td valign="top"><a href="http://lessons.goxtk.com/11/"><b>Lesson 11: Slice it with colors!</b></a><br>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.io/lessonsgfx/12/minicaption.png" alt="lesson12" title="Click me!"></a><a href='http://jsfiddle.net/gh/get/xtk/edge/xtk/lessons/tree/master/12/#run' target=_blank><img src="http://xtk.github.io/fiddlelogo_small2.png"></a></td> <td valign="top"><a href="http://lessons.goxtk.com/12/"><b>Lesson 12: Curvature!</b></a><br>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.io/lessonsgfx/13/minicaption.png" alt="lesson13" title="Click me!"></a><a href='http://jsfiddle.net/gh/get/xtk/edge/xtk/lessons/tree/master/13/#run' target=_blank><img src="http://xtk.github.io/fiddlelogo_small2.png"></a></td> <td valign="top"><a href="http://lessons.goxtk.com/13/"><b>Lesson 13: I want 2D!</b></a><br>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.io/lessonsgfx/14/minicaption.png" alt="lesson14" title="Click me!"></a><a href='http://jsfiddle.net/gh/get/xtk/edge/xtk/lessons/tree/master/14/#run' target=_blank><img src="http://xtk.github.io/fiddlelogo_small2.png"></a></td> <td valign="top"><a href="http://lessons.goxtk.com/14/"><b>Lesson 14: Is it a cube?</b></a><br>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.io/lessonsgfx/15/minicaption.png" alt="lesson15" title="Click me!"></a><a href='http://jsfiddle.net/gh/get/xtk/edge/xtk/lessons/tree/master/15/#run' target=_blank><img src="http://xtk.github.io/fiddlelogo_small2.png"></a></td> <td valign="top"><a href="http://lessons.goxtk.com/15/"><b>Lesson 15: D-I-C-O-M!</b></a><br>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.io/lessonsgfx/16/minicaption.png" alt="lesson16" title="Click me!"></a><a href='http://jsfiddle.net/gh/get/xtk/edge/xtk/lessons/tree/master/16/#run' target=_blank><img src="http://xtk.github.io/fiddlelogo_small2.png"></a></td> <td valign="top"><a href="http://lessons.goxtk.com/16/"><b>Lesson 16: 10 PRINT 3D</b></a><br>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.io/lessonsgfx/17/minicaption.png" alt="lesson17" title="(RE)Slice it!"></a><a href='http://jsfiddle.net/gh/get/xtk/edge/xtk/lessons/tree/master/17/#run' target=_blank><img src="http://xtk.github.io/fiddlelogo_small2.png"></a></td> <td valign="top"><a href="http://lessons.goxtk.com/17/"><b>Lesson 17: (RE)Slice it!</b></a><br>New arbitrary reslicing capabilities. Everything is happening in Real Time!<br>Leap Motion Ready!</td> </tr> </table>Download
<a href="https://get.goXTK.com/xtk_edge.js"><img src="http://xtk.github.io/xtkfile.png"></a><br> Get it right here: <b><a href="https://get.goXTK.com/xtk_edge.js">xtk.js</a></b> or include it like this:
<script type="text/javascript" src="https://get.goXTK.com/xtk_edge.js"></script>
Example Usage
// 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"><b>Project X</b></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 (<b>[xtk]</b>) 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: <b>Neuroimaging in the Browser using the X Toolkit</b>. 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.io/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.io/hms_logo.png" alt="Harvard Medical School" title="Harvard Medical School"></a>
<a href="https://www.umb.edu"><img src="https://www.umb.edu/assets/images/UMASSB0STON_ID_blue.png?1560890493" ></a>