javascript - 使用 WebGL 的多尺度巨大 3D 体积渲染

Question

我正在使用 WebGL 渲染一个巨大的 3D 体积，并且光线投射算法在着色器（glsl）中实现。该卷是从生物图像堆栈创建的。我想要做的是在渲染这个 3D 体积时保持平滑的放大和缩小。但是图像堆栈是高分辨率的，为了获得实时性能，我需要使用八叉树。您对我如何实施它有什么建议吗？

Answer 1

我认为您不会仅使用 WebGL 在 GPU 上获得八叉树 - 它仅支持 OpenGL ES 2.0，因此实现一些像样的八叉树可能太少了。

但是，有一些技巧可能有助于解决您的问题。通常，您希望在缩放/移动期间加快渲染速度，但尽可能保持目标质量。您可以实现一些“低清晰度”质量并在相机移动期间使用它。最简单的方法是使用更大的光线投射步骤，您也可以准备一些较低分辨率的图像版本。

然后，当您看到用户开始移动/缩放视图时，您可以打开“低分辨率”渲染以获得更多 fps。在此移动过程中，用户不会注意到移动图像的质量损失很大，当他停止更换相机时，您会再次渲染场景 - 但会以您的目标质量。

假设您的典型渲染需要 1 秒，而“低分辨率”需要 0.1 秒。使用这种方法，您可以获得约 10fps 的交互式相机移动，当您停止移动时，您会在 1 秒后获得最终图像。

我知道这并不理想，但可能会很好地为您服务，我看到很少有更大的 gfx 应用程序使用该技巧。

一些略有不同但相似的方法是在交互移动期间渲染每个 X 像素之一。在某些 3D 建模应用程序中，当您更改视图/移动某些对象并启用光线跟踪预览时，您可能会注意到它仅渲染所有像素的一部分，保持交互性。当您停止移动时，它会渲染其余的像素。