MRI Image Viewer画像断面回転・Resize機能の組み込み

[itutu-tienday]

MRI Image Viewer で画像断面回転機能を有効とする件について、 現在時点、以下の内容ですすめる方針とする。

• 対応方針

  • Bran Browser に、画像断面回転機能を組み込む（カスタマイズする）。

  • 補足

  • OHIF Viewerは、画像断面回転機能 等、必要な機能を有しているが、実際に組み込むにあたっては課題も多いため、対象外を想定。

    • 15

  • ここまでの情報調査で、Bran Browser が 比較的 機能を有しており、カスタマイズ が対応可能そうであることから、Bran Browserを対象とする。

• 対応内容

  • Bran Browser へ、画像の回転機能を実装する。
  • 単純な画像の回転（Rorate）ではなく、「断面の回転」の処理となる。（一定 複雑な処理）
  • OHIF Viewerの同機能が、参考となる。
  • まずは、実現可否性の調査から、実施する。
  • Bran Browser 以外でも、対応案や参考情報があれば、共有いただきたい。

• スケジュール

  • まずは 以下の画面実装を優先し、その後 当件をすすめる。

    • 56

  • 対応期日は 5/9～5/23 となる見込み。

[emuemuJP]

こちらのtransformのパラメータがResizeのパラメータに当たる様です transform[0][0] transform[1][1] transform[2][2] https://github.com/aces/brainbrowser/blob/fe0ce114c6cd8e317a6bdd9b7ef97cbf1c38309d/src/brainbrowser/volume-viewer/volume-loaders/nifti1.js#L297

[emuemuJP]

現在の仕様だとResizeの値によっては最大Zoomでも画面からはみ出してしまうので別途対応が必要

[emuemuJP]

こちらが各軸の次元数を表しています https://github.com/aces/brainbrowser/blob/fe0ce114c6cd8e317a6bdd9b7ef97cbf1c38309d/src/brainbrowser/volume-viewer/volume-loaders/nifti1.js#L299-L301

[emuemuJP]

こちらの関数でOriginと回転の設定をおこなっているようです この関数を元にUIで新たな値を設定した際に新たな関数を呼び出すのが良さそうです。 変換はアフィン行列で行われています。 https://github.com/aces/brainbrowser/blob/fe0ce114c6cd8e317a6bdd9b7ef97cbf1c38309d/src/brainbrowser/volume-viewer/volume-loaders/minc.js#L201

[Reactplus-Hao]

Tích hợp tính năng xoay nghiêng mặt cắt ảnh・Tính năng Resize trên MRI Image Viewer Thời điểm hiện tại, sẽ tiến thành các nội dung dưới đây:

• Hướng xử lý:

  • Tích hợp tính năng xoay nghiêng mặt cắt ảnh vào trong BrainBrowser（Sẽ cần customize）
  • Bổ sung
    • Trong thư viện OHIF Viewer có sẵn tính năng xoay nghiêng ảnh rồi. Tuy nhiên, do có nhiều vấn đề khi tích hợp thực tế, nên sẽ không dùng thư viện OHIF Viewer nữa
      • https://github.com/arayabrain/MRIAnalysisStudioforMouse/issues/15
    • Vì vậy sẽ customize thư viện Brainbrowser để có thể xử lý được các tính năng đó

• Nội dung xử lý

  • Implement tích hợp tính năng xoay nghiêng ảnh vào Brainbrowser
    • Sẽ không phải là thao tác xoay nghiêng ảnh đơn thuần (Rorate), mà sẽ là xử lý xoay nghiêng mặt cắt (Có nhiều xử lý phức tạp)
    • Tham khảo tính năng xoay nghiêng của OHIF Viewer
  • Trước hết, hãy điều tra xem có thể thực hiện để active tính năng xoay nghiêng được không
  • Nếu có các thông tin hướng dẫn xử lý active xoay nghiêng ngoài thư viện Brainbrowser, thì hãy share cho KH biết

• Schedule

  • Trước hết, ưu tiên task dưới đây. Sau đó sẽ làm task này
    • https://github.com/arayabrain/MRIAnalysisStudioforMouse/issues/56
  • Deadline của task này: 5/9～5/23

[Reactplus-Hao]

@sanglevinh

• KH điều tra thì có vẻ như paramater transform dưới đây chính tương ứng với parameter Resize transform[0][0] transform[1][1] transform[2][2] https://github.com/aces/brainbrowser/blob/fe0ce114c6cd8e317a6bdd9b7ef97cbf1c38309d/src/brainbrowser/volume-viewer/volume-loaders/nifti1.js#L297

• Theo spec hiện tại, tuỳ thuộc vào giá trị của Resize thì ngay cả khi Zoom tối đa lại đang bị nhô ra khỏi màn hình, nên sẽ cần xử lý để customize lại sau

  

• Phần code dưới đây thể hiện số lượng chiều của các trục https://github.com/aces/brainbrowser/blob/fe0ce114c6cd8e317a6bdd9b7ef97cbf1c38309d/src/brainbrowser/volume-viewer/volume-loaders/nifti1.js#L299-L301

• Có vẻ như bằng hàm số dưới đây, thì sẽ có thể setting xoay nghiêng so với Origin Nên họ nghĩ dựa vào hàm số, có vẻ tốt để call hàm số mới khi đã setting giá trị mới vào trong UI --> Việc convert được thực hiện bằng ma trận Affine https://github.com/aces/brainbrowser/blob/fe0ce114c6cd8e317a6bdd9b7ef97cbf1c38309d/src/brainbrowser/volume-viewer/volume-loaders/minc.js#L201

[Reactplus-Hao]

@emuemuJP @itutu-tienday 画像断面回転機能について、

• volume-loaders/nifti1.jsファイルのniftiQuaternToMat44関数で回転を設定できるようです。

  • 現在、この関数の行列を変更したら、回転できることを確認できましたが（下記の添付画像）、
  • 念のため、この関数を使用するのは、問題がないか、ご確認お願い出来ますでしょうか。

• また、確認するには、parseNifti1Header関数を下記の画像のように修正する必要があります。

  

• 行列のパラメータを取得するには、計算が不要で、THREEを利用することができます。

  const m = new THREE.Matrix4(); 
  m.set(0,0, 0, 0,  0, 0, 0, 0, 0, 0, 0, 0,  0, 0, 0, 1 );
  m.makeRotationX(0.5);
  //m.makeRotationZ(0.5);
  //m.makeRotationY(0.5);
  console.log(“matrix”, m)

[itutu-tienday]

以下、確認コメント

• ざっとの確認では、ご記載の様に、対象の関数（niftiQuaternToMat44）で、回転操作は行えるように見受けられる。
• なおこちらで仮に適当な値を与え挙動を確認したところ、回転はするが（90度での回転を確認）、細かな角度での回転を確認できていない。
  • 周辺の処理を踏まえた、調整が必要なのかもしれない。

引き続き、検証をお願いします。

[Reactplus-Hao]

• KH check qua thì thấy đúng như bên mình đã tìm hiểu, hàm số niftiQuaternToMat44 có thể thao tác xoay nghiêng được.
• Ngoài ra, khi họ check thử hoạt động với 1 giá trị phù hợp nào đó, thì thấy với góc 90 độ thì xoay nghiêng được, nhưng hiện tại đang không thấy xoay nghiêng được với 1 góc cụ thể nào đó.
  • Nhờ bên mình tiếp tục điều tra và điều chỉnh để xoay nghiêng được với 1 góc cụ thể nào đó giúp họ.

[Reactplus-Hao]

@emuemuJP @itutu-tienday

• 断面回転の機能について、マウス操作での反映の対応が完了して、デモ動画を下記にて共有させて頂きます。 このような動作で問題や調整点があれば、ご指示ください。
  • https://drive.google.com/file/d/1e3ywNXqBFobp3zWWd-PkZXvm3sH6w4ob/view?usp=sharing
• この回転機能は、単純な画像の回転（Rorate）ではなく、軸を回転するたびに、Radian角度を計算して、行列を変更して、再度画像を表示する形です。
  • Radian角度の定義は下の資料をご参考にしてください。（180度＝3.14radian)
    • https://vi.wikipedia.org/wiki/Radian
• テキストボックスからの入力値がViewerに反映するのは、これから対応させて頂きますので、完了次第、連絡致します。

[Reactplus-Hao]

@emuemuJP @itutu-tienday 細かな角度での回転機能について、現時点までの調査と対応を下記のデモ動画にてご確認お願い出来ますでしょうか。 この動作で問題や調整点があれば、ご指示お願い致します。 https://drive.google.com/file/d/1J6CxfoCu3nPvFaguXzHAgM5fEU-EvgYS/view?usp=sharing

[Reactplus-Hao]

NiFTIファイルで断面回転ができるかの調査について、下記にて報告させて頂きます。

• 先週のミーティングで相談した通りに、OHIF Viewerと同様な回転機能であれば、必ずにDICOM形式が必要となります。
• さらにDICOM形式とNiFTI形式を調査したところ、結果は下記の通りです。
  • 調査使用の参考資料：https://discovery.ucl.ac.uk/id/eprint/10146893/1/geometry_medim.pdf
    • 「2. DICOM」と 「3. NIfTI」の項目をご確認ください。
  • OHIF Viewer（DICOM形式）の回転では、R、A、Hの軸（下記の画像）を回転することです。Brainbrowser (NiFTI形式）にR、A、Hがないですが、I、J、Kのパラメータと該当している様です。

• そのため、OHIF Viewer（DICOM形式）の回転の動作は、Brainbrowser　(NiFTI形式）のI、J、KのCrosshairの回転動作と同じと思います。
  • Iは右左の方向
  • Jは上下の方向
  • Kは前後の方向
    • 下記の動画をご参考にしてください。

https://github.com/arayabrain/MRIAnalysisStudioforMouse/assets/87292605/d73b1a0a-1319-4d3d-85b0-9e1db87739be

ご確認お願い致します。

[itutu-tienday]

調査と報告について、ありがとうございます。 なおDICOMとNiFTIでフォーマットが異なることから、回転操作へのアプローチが異なるらしい点は、認識しました。

なお以下は情報共有ですが、NiFTI形式でも、おそらく断面（軸）の回転に対応しているアプリケーションを、幾つか確認しています。

• アプリケーション例

  • ITK-SNAP
  • https://www.youtube.com/watch?v=uOmBfM3J_Lk
  • 3D Slicer
  • https://www.youtube.com/watch?v=GkPHEsB9rOI
    • Transform? 機能で、軸（orientation）を調整している模様
  • ImageJ
  • https://imagej.nih.gov/ij/index.html
    • メニューの「Plugins > 3D > Volume Viewer」で表示される画面で、断面（軸）の傾きを行える？

• （参考）NiFTIフォーマット情報

  • https://brainder.org/2012/09/23/the-nifti-file-format/

上記の各アプリケーションの実装方法は不明ですが、内部で 断面/軸/orientation を傾ける操作が行われているようです。

[Reactplus-Hao]

KH cảm ơn bên mình đã điều tra và report cho họ biết. Ngoài ra, họ cũng đã biết do format trong DICOM và file NiFTI khác nhau, nên việc tiếp cận để thao tác xoay nghiêng cũng khác nhau rồi.

Ngoài ra, họ có chia sẻ 1 số thông tin họ tìm hiểu được. Có một vài app ngay cả với format NiFTI thì cũng hỗ trợ xoay nghiêng mặt cắt (trục) được.

• Ví dụ về app
  • ITK-SNAP
    • https://www.youtube.com/watch?v=uOmBfM3J_Lk
  • 3D Slicer
    • https://www.youtube.com/watch?v=GkPHEsB9rOI
      • Có vẻ như trong app này đang điều chỉnh trục （orientation）bằng function Transform?
  • ImageJ
    • https://imagej.nih.gov/ij/index.html
      • Nhờ bên mình check xem có thể tiến hành nghiêng mặt cắt (trục) trên màn hình đang được hiển thị bằng cách chọn 「Plugins > 3D > Volume Viewer」trên menu?
• （Tham khảo）Thông tin về format NiFTI
  • https://brainder.org/2012/09/23/the-nifti-file-format/

Họ cũng không rõ về cách thực hiện trong các app trên, nhưng có vẻ như có thể tiến hành thao tác nghiêng mặt cắt/ trục/ orientation trong app đó.

[itutu-tienday]

当件（画像断面回転）はアプリケーション初期リリース時点では、機能未搭載でのリリースとなる見込み。 ステータスをペンディングとする。