XTK Lesson 10

Slice it! author(s): XTK

HTML

<script src="https://get.goXTK.com/xtk_xdat.gui.js"></script>

CSS

html, body { 
  background-color:#000;
  margin: 0;
  padding: 0;
  height: 100%;
  overflow: hidden !important;  
}

JavaScript

window.onload = function() {

  // create and initialize a 3D renderer
  var r = new X.renderer3D();
  r.bgColor = [.62, .62, 1];
  r.init();
  
  // create a X.volume
  var volume = new X.volume();
  // .. and attach the single-file dicom in .NRRD format
  // this works with gzip/gz/raw encoded NRRD files but XTK also supports other
  // formats like MGH/MGZ
  volume.file = 'https://fly.cs.umb.edu/data/X/avf.nrrd';
  
  // the segmentation is a X.mesh
  var mesh = new X.mesh();
  // .. and is loaded from a .VTK file
  mesh.file = 'https://fly.cs.umb.edu/data/X/avf.vtk';
  // we set the color to a lighter red
  mesh.color = [0.7, 0.25, 0.25];
  mesh.opacity = 0.7;
  // and also set the visibility to false, since we add a 'load-on-demand'
  // option for it
  mesh.visible = false;
  
  // only add the volume for now, the mesh gets loaded on request
  r.add(volume);
  
  // the onShowtime method gets executed after all files were fully loaded and
  // just before the first rendering attempt
  r.onShowtime = function() {

    //
    // The GUI panel
    //
    // (we need to create this during onShowtime(..) since we do not know the
    // volume dimensions before the loading was completed)
    
    // indicate if the mesh was loaded
    var meshWasLoaded = false;
    
    var gui = new dat.GUI();
    
    // the following configures the gui for interacting with the X.volume
    var volumegui = gui.addFolder('Volume');
    // now we can configure controllers which..
    // .. switch between slicing and volume rendering
    var vrController = volumegui.add(volume, 'volumeRendering');
    // the min and max color which define the linear gradient mapping
    var minColorController = volumegui.addColor(volume, 'minColor');
    var maxColorController = volumegui.addColor(volume, 'maxColor');
    // .. configure the volume rendering opacity
    var opacityController = volumegui.add(volume, 'opacity', 0, 1).listen();
    // .. and the threshold in the min..max range
   ...