将AMI.js与XTK的体积渲染相结合

Question

我目前正在写关于在浏览器中显示 3D 医疗数据的学士论文。因此，我正在编写一个可以显示 DICOM 图像和网格的应用程序。

据我所知，目前 DICOM 的体积渲染与 XTK 相比 ami.js 效果更好。 ami.js DICOM 中的 3D 渲染被证明不是很有用（仅最大 12 fps）。我尝试像第 6 课体积渲染示例中那样渲染 DICOM。

所以我的问题是：
我如何结合这两个框架，以便我可以将 XTK 的 3D 体积渲染用于 DICOM，但所有其他功能来自 ami.js?
或者我必须如何使用 ami.js 的体积渲染才能正常显示？

Answer 1

Edit: Improvement suggested in (2) has been implemented and is live at https://fnndsc.github.io/ami/#vr_singlepass

AMI 和 XTK 使用不同的体绘制技术：

AMI 支持：

光线投射
MIP

XTK 支持：

Texture-based

我建议只使用 1 个框架，具体取决于您的需要。

您看过 AMI 的体积渲染吗：https://fnndsc.github.io/ami/#vr_singlepass

可以使用许多技术来提高性能：

(1)Only-render镜头移动时的场景
(2) 与场景交互时降低像素比

AMI VR 示例实现 (1)。

实施（2）：

使用 setPixelRatio

初始化三个渲染器

threeD = document.getElementById('r3d');
renderer = new THREE.WebGLRenderer({
  alpha: true,
});
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(threeD.offsetWidth, threeD.offsetHeight);

在一处编辑 onStart()：

// vrHelper.uniforms.uSteps.value = Math.floor(myStack.steps / 2);
// vrHelper.interpolation = 0;
renderer.setPixelRatio(.1 * window.devicePixelRatio);
renderer.setSize(threeD.offsetWidth, threeD.offsetHeight);

在 1 个地方编辑 onEnd()：

// vrHelper.uniforms.uSteps.value = myStack.steps;
// vrHelper.interpolation = myStack.interpolation;
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(threeD.offsetWidth, threeD.offsetHeight);

在 2 个地方编辑 onWheel()：

// vrHelper.uniforms.uSteps.value = Math.floor(myStack.steps / 2);
// vrHelper.interpolation = 0;
renderer.setPixelRatio(.1 * window.devicePixelRatio);
renderer.setSize(threeD.offsetWidth, threeD.offsetHeight);

和

wheelTO = setTimeout(function() {
// vrHelper.uniforms.uSteps.value = myStack.steps;
// vrHelper.interpolation = myStack.interpolation;
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(threeD.offsetWidth, threeD.offsetHeight);

HTH,

将AMI.js与XTK的体积渲染相结合

Combining AMI.js with XTK's volume rendering

xtk

ami.js