在着色器中为光线跟踪器加载三角形顶点的更好方法

Question

目前我正在尝试在WebGL 2中实现带有三角形网格的光线跟踪器。到目前为止，我在缓冲区纹理中加载数据，然后我将它们解压缩如下：

for (int i = 0; i < vertsCount; i += 3) {

            a = texelFetch(uMeshData, ivec2(i, 0), 0);
            b = texelFetchOffset(uMeshData, ivec2(i, 0), 0, ivec2(1, 0));
            c = texelFetchOffset(uMeshData, ivec2(i, 0), 0, ivec2(2, 0));


            bool isHit = hitTriangleSecond(R_.orig, R_.dir, a.xyz, b.xyz, c.xyz, uvt, triangleNormal, intersect, z);;
            if (isHit) {

                if (z<mindist && z > 0.001) {
                    //weHitsomething    
                }
            }      
        } 

你知道问题所在。当我尝试加载具有许多三角形的网格时，它变得太慢，特别是当我添加反射级别像4次时，因为我必须检查每个三角形，每帧...所以不是最佳的。

我听说过Bounding box技术和一些树存储数据。但我不知道该怎么做。

如果有人提供了一些相关信息，那就太好了。除此之外。

我正在考虑第二个纹理，其中包含有关我加载的每个网格的一些信息，但是当你有索引时，texelfetch与数组不同，所以你知道哪个对象在这个方向上射线命中。

所以我的问题是如何检查光线方向上的“最近”三角形。

Answer 1

在WebGL中实现光线跟踪是一项非常高级的任务。我建议开始简单。例如，使用3D纹理并在其每个单元/像素中存储多达4个三角形索引。 （你必须穿过纹理直到你碰到一个三角形。）一旦你有一个三角形索引，你可以在第二个纹理中查找顶点（在你的代码中称为uMeshData）。

您可以在初始化阶段在Javascript中构建3D纹理数据。 （稍后，您可以通过将三角形渲染到3D纹理的2D切片上，使用深度缓冲区为每个像素选择最接近的三角形，在GPU上实现此功能。）

如果有超过4个三角形与3D纹理单元格/像素重叠，则无法生成正确的结果。它也不是很有效（由于固定步进光线传输的冗余），但至少让你朝着正确的方向前进。完成后，您可以尝试更高级的解决方案（可能涉及树，例如边界卷层次结构。）