2

デモ #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: bec[0].c[Math.floor(...)] は未定義です

何が間違っているのでしょうか？このようなエラーをデバッグするにはどうすればよいですか?

4

1 に答える 1

3

このような Javascript ライブラリは、通常、本番対応バージョン用に縮小されています。縮小された JavaScript コードをデバッグすることはほとんど不可能ですが、callstack 内のメソッド名の 1 つが .parse であることがわかります。これは、labelmap ファイルの解析で問題が発生していることをすぐに示しています。

ほとんどの JavaScript ライブラリには、縮小されていない -debug バージョンも含まれます。xtk 用のものを見つけることができないようですが、自分用のデバッグ バージョンを作成するプロセスは次のとおりです。

  1. 最新の xtk プロジェクトを複製します。

    git クローンhttps://github.com/xtk/X.git

  2. Google の閉鎖を更新します (ソースは含まれていません):

    cd X/lib/
    git clone https://github.com/google/closure-library
    mv クロージャー ライブラリ google クロージャー ライブラリ

  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)

ここから、問題を突き止めることができるはずです。テクスチャが欠けているようです。

于 2014-07-01T21:26:08.033 に答える