Xtk：無法顯示標籤貼圖

Question

我稍微更改了演示＃11來加載我的圖像，而不是演示的。

我可以加載我的MRI圖像就好了，請參閱Demo。如果我將我的標籤貼圖加載爲主卷，它也可以工作。

window.onload = function() { 
    // create and initialize a 3D renderer 
    var r = new X.renderer3D(); 
    r.init(); 

    // create a X.volume 
    var volume = new X.volume(); 

    // 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 = '1123_N3.nii.gz'; 

    // we also attach a label map to show segmentations on a slice-by-slice base 
    // volume.labelmap.file = '1123_seg.nii.gz'; 

    // add the volume 
    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) 
     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'); 

     // configure the volume rendering opacity 
     var opacityController = volumegui.add(volume, 'opacity', 0, 1).listen(); 

     // and the threshold in the min..max range 
     var lowerThresholdController = volumegui.add(volume, 'lowerThreshold', volume.min, volume.max); 
     var upperThresholdController = volumegui.add(volume, 'upperThreshold', volume.min, volume.max); 

     // the indexX,Y,Z are the currently displayed slice indices in the range [0 - (dimensions-1)] 
     var sliceXController = volumegui.add(volume, 'indexX', 0, volume.range[0] - 1); 
     var sliceYController = volumegui.add(volume, 'indexY', 0, volume.range[1] - 1); 
     var sliceZController = volumegui.add(volume, 'indexZ', 0, volume.range[2] - 1); 
     volumegui.open(); 

     // and this configures the gui for interacting with the label map overlay 
     var labelmapgui = gui.addFolder('Label Map'); 
     var labelMapVisibleController = labelmapgui.add(volume.labelmap, 'visible'); 
     var labelMapOpacityController = labelmapgui.add(volume.labelmap, 'opacity', 0, 1); 
     labelmapgui.open(); 

    }; 

    // adjust the camera position a little bit, just for visualization purposes 
    r.camera.position = [120, 80, 160]; 

    // showtime! this triggers the loading of the volume and executes r.onShowtime() once done 
    r.render(); 
}; 

但是如果我的標籤映射添加到我的音量，volume.labelmap.file = '1123_seg.nii.gz';，加載失敗，體積從不顯示，看Broken Demo。控制檯中唯一的錯誤如下：

TypeError: b.e.c[0].c[Math.floor(...)] is undefined

任何想法可能是什麼錯？我該如何調試這樣的錯誤？

Answer 1

像這樣的Javascript庫通常會縮小到生產就緒版本。調試縮小的JavaScript代碼幾乎是不可能的，但是您可以看到callstack中的一個方法名稱是.parse，它立即表明解析標籤文件時存在問題。

大多數JavaScript庫還將包含未縮小的-debug版本。我似乎無法找到一個XTK，但這裏是創建自己的調試版本的過程：

1. 克隆最新XTK項目：

   混帳克隆https://github.com/xtk/X.git

2. 更新谷歌封閉件（不包括源）：

   CD X/LIB/
   GIT中克隆https://github.com/google/closure-library
   MV closure-谷歌庫閉庫

3. 我創建的X目錄demo.html文件，但你也許可以把它放在任何地方，並設置它像：

   <script src="lib/google-closure-library/closure/goog/base.js"></script> <script src="xtk-deps.js"></script>
<script> goog.require("X"); goog.require("X.renderer3D"); </script>
<script type="text/javascript" src="demo.js"></script>

現在你可以調試了，你應該看到你的錯誤：

Uncaught TypeError: Cannot read property '_texture' of undefined parser.js:1205 
X.parser.reslice parser.js:1205 
X.parserNII.parse parserNII.js:258 
(anonymous function) 

從這裏你應該能夠追捕你的問題。看起來像一個紋理缺失。