在 ThreeJS / React Three Fiber 中渲染具有 500k+ 单元格的 VTK 非结构化网格

Question

我有一个包含 500k+ 单元格的 VTK 非结构化网格，我想使用 ThreeJS 和 React Three Fiber 以高效的方式进行渲染。

我希望能够查看体积网格的内部元素（将单元格透明度设置为 50%），而不仅仅是提取外表面。

网格主要由六面体、四面体和四边形组成。这是文件格式的简单示例（为简洁起见，这只是 2 个十六进制、2 个四元组和 1 个四元组）：

# vtk DataFile Version 2.0
Two hexahedrons with two tetrahedrons and one quadrilateral face
ASCII
DATASET UNSTRUCTURED_GRID
POINTS 13 float
0 0 0
0 0 0.5
0.5 0 0.5
0.5 0 0
0 0.5 0
0 0.5 0.5
0.5 0.5 0.5
0.5 0.5 0
0 0 1
0.5 0 1
0 0.5 1
0.5 0.5 1
0.5 1 0.5

CELLS 5 33
8 0 1 2 3 4 5 6 7
8 1 8 9 2 5 10 11 6
4 4 5 6 12
4 5 10 6 12
4 0 8 10 4

CELL_TYPES 5
12
12
10
10
9

这里是一个网格被切片/显示内部元素的例子：

我能够提取顶点并将单元格分成四边形、六边形和四边形。

我曾尝试使用基本的 ThreeJS 几何图形渲染网格，但性能并不令人满意。我想知道在 ThreeJS / React Three Fiber 中是否有更高效的方法来渲染如此大量的单元格。

这是着色器的工作吗？着色器能否独立渲染每个单元格以创建体积网格，如果可以的话，到底是怎么做到的？

如果使用 BufferGeometry，有没有办法更改索引数组以考虑四边形、六边形和四边形？

有点丢失，所以任何关于如何实现这一点的帮助、提示或示例将不胜感激。提前致谢！