WebGPU实现Ray Packet

大家好~本文在如何用WebGPU流畅渲染百万级2D物体？基础上进行优化，使用WebGPU实现了Ray Packet，也就是将8*8=64条射线作为一个Packet一起去访问BVH的节点。这样做的好处是整个Packet只需要一个维护BVH节点的Stack，节省了GPU Shared Memory；坏处是一个Packet的64条射线是并行计算的，需要实现同步逻辑，并且针对GPU的架构进行并行优化

相关文章如下：

如何用WebGPU流畅渲染百万级2D物体？

目录

• 成果
• 算法实现
• 并行计算的优化点
• 为什么没有提升FPS？
• 为什么不使用改进的Ranged traversal算法？
• 具体案例分析
• 参考资料

成果

我们渲染1百万个圆环，对比优化前的Demo：

性能指标：

• FPS基本上没有变化
• GPU Shared Memory的占用减少为1/5
  
  在FPS不变的情况下，Stack的大小可以从之前的最大值20提升到最大值100

硬件：

• Mac OS Big Sur 11.4操作系统
• Canary浏览器
• Intel Iris Pro 1536 MB集成显卡

算法实现

每条射线使用一个局部单位，所以一个Packet共使用8*8=64个局部单位

这里将射线与相机近平面的交点变换到了屏幕坐标系下，变量名为pointInScreen（之前的Demo中的交点是在世界坐标系下）

整个算法的相关实现代码如下所示：

var<workgroup>stackContainer: array<TopLevel, 20>;
var<workgroup>rayPacketAABBData: array<f32, 4>;
var<workgroup>isRayPacketAABBIntersectWithTopLevelNode: bool;
var<workgroup>rayPacketRingIntersectLayer: array<u32, 64>;
var<workgroup>stackSize: u32;
var<workgroup>isAddChild1: bool;
var<workgroup>isAddChild2: bool;

...

fn _intersectScene(ray: Ray, LocalInvocationIndex : u32) -> RingIntersect {
  var intersectResult: RingIntersect;

  intersectResult.isClosestHit = false;
  intersectResult.layer = 0;

  var rootNode = topLevel.topLevels[0];

  var pointInScreen = ray.rayTarget;

  // 用两个局部单位并行创建Packet的AABB
  if (LocalInvocationIndex == 0) {
    rayPacketAABBData[0] = pointInScreen.x;
    rayPacketAABBData[1] = pointInScreen.y;
  }
  if (LocalInvocationIndex == 63) {
    rayPacketAABBData[2] = pointInScreen.x;
    rayPacketAABBData[3] = pointInScreen.y;
  }

  //用一个局部单位并行初始化共享变量
  if (LocalInvocationIndex == 1) {
    stackSize = 1;

    stackContainer[0] = rootNode;
  }

  workgroupBarrier();

  //遍历BVH节点
  while (stackSize > 0) {
    //在循环开始的时候要同步下（暂时不清楚原因，反正是因为stackSize是共享变量造成的）
    workgroupBarrier();

    if (LocalInvocationIndex == 0) {
      stackSize -= 1;
    }

    workgroupBarrier();

    var currentNode = stackContainer[stackSize];
    var leafInstanceCountAndMaxLayer = u32(currentNode.leafInstanceCountAndMaxLayer);

    var leafInstanceCount = _getLeafInstanceCount(leafInstanceCountAndMaxLayer);

    //如果是叶节点，则Packet中所有射线都与该节点进行相交检测
    if (_isLeafNode(leafInstanceCount)) {
      //判断射线是否与节点的AABB相交
      if (_isPointIntersectWithTopLevelNode(pointInScreen, currentNode)) {
        var leafInstanceOffset = u32(currentNode.leafInstanceOffset);

        var maxLayer = _getMaxLayer(u32(currentNode.leafInstanceCountAndMaxLayer));

        //判断射线是否与节点包含的所有圆环相交
        while (leafInstanceCount > 0) {
          var bottomLevel = bottomLevel.bottomLevels[leafInstanceOffset];
          //判断射线是否与圆环的AABB相交
          if (_isPointIntersectWithAABB(pointInScreen, bottomLevel.screenMin, bottomLevel.screenMax)) {
            var instance: Instance = sceneInstanceData.instances[u32(bottomLevel.instanceIndex)];
            var geometry: Geometry = sceneGeometryData.geometrys[u32(instance.geometryIndex)];

            //判断射线是否与圆环相交
            if (_isIntersectWithRing(pointInScreen, instance, geometry)) {
              var layer = u32(bottomLevel.layer);

              if (!intersectResult.isClosestHit || layer > intersectResult.layer) {
                intersectResult.isClosestHit = true;
                intersectResult.layer = layer;
                intersectResult.instanceIndex = bottomLevel.instanceIndex;
              }
            }
          }

          leafInstanceCount = leafInstanceCount - 1;
          leafInstanceOffset = leafInstanceOffset + 1;
        }
      }
    }
    //如果不是叶节点，则通过剔除检测后加入两个子节点
    else {
      // 一个非叶节点必有两个子节点
      var child1Node = topLevel.topLevels[u32(currentNode.child1Index)];
      var child2Node = topLevel.topLevels[u32(currentNode.child2Index)];

      var child1NodeMaxLayer = _getMaxLayer(u32(child1Node.leafInstanceCountAndMaxLayer));
      var child2NodeMaxLayer = _getMaxLayer(u32(child2Node.leafInstanceCountAndMaxLayer));

      //并行计算Packet中所有射线的最小layer

      rayPacketRingIntersectLayer[LocalInvocationIndex] = intersectResult.layer;

      workgroupBarrier();

      if (LocalInvocationIndex < 32) {
        _minForRayPacketRingIntersectLayer(LocalInvocationIndex, LocalInvocationIndex + 32);
      }
      workgroupBarrier();
      if (LocalInvocationIndex < 16) {
        _minForRayPacketRingIntersectLayer(LocalInvocationIndex, LocalInvocationIndex + 16);
      }
      workgroupBarrier();
      if (LocalInvocationIndex < 8) {
        _minForRayPacketRingIntersectLayer(LocalInvocationIndex, LocalInvocationIndex + 8);
      }
      workgroupBarrier();
      if (LocalInvocationIndex < 4) {
        _minForRayPacketRingIntersectLayer(LocalInvocationIndex, LocalInvocationIndex + 4);
      }
      workgroupBarrier();
      if (LocalInvocationIndex < 2) {
        _minForRayPacketRingIntersectLayer(LocalInvocationIndex, LocalInvocationIndex + 2);
      }
      workgroupBarrier();

      //用两个局部单位并行判断子节点是否在Packet的前面以及Packet的AABB是否与子节点相交

      if (LocalInvocationIndex == 0) {
        isAddChild1 = child1NodeMaxLayer > rayPacketRingIntersectLayer[0] && _isRayPacketAABBIntersectWithTopLevelNode(rayPacketAABBData, child1Node);
      }
      if (LocalInvocationIndex == 1) {
        isAddChild2 = child2NodeMaxLayer > rayPacketRingIntersectLayer[0] && _isRayPacketAABBIntersectWithTopLevelNode(rayPacketAABBData, child2Node);
      }

      workgroupBarrier();

      // 加入两个子节点到stack中
      if (LocalInvocationIndex == 0) {
        if (isAddChild1) {
          stackContainer[stackSize] = child1Node;

          stackSize += 1;
        }

        if (isAddChild2) {
          stackContainer[stackSize] = child2Node;

          stackSize += 1;
        }
      }
    }

    workgroupBarrier();
  }

  return intersectResult;
}

“创建Packet的AABB”代码说明

如上图所示，红色方块为Packet的2D AABB，由64个射线的pointInScreen组成

图中蓝色方块为一个pointInScreen，从中心点开始

pointInScreen对应的局部单位序号是从红色方块左下角开始，朝着右上方增加。

部分局部单位序号在图中用数字标注了出来

所以Packet的2D AABB的min即为0号局部单位对应的pointInScreen，而max则为63号局部单位对应的pointInScreen

创建Packet的AABB的相关代码如下：

  var pointInScreen = ray.rayTarget;

  // 用两个局部单位并行创建Packet的AABB
  if (LocalInvocationIndex == 0) {
    rayPacketAABBData[0] = pointInScreen.x;
    rayPacketAABBData[1] = pointInScreen.y;
  }
  if (LocalInvocationIndex == 63) {
    rayPacketAABBData[2] = pointInScreen.x;
    rayPacketAABBData[3] = pointInScreen.y;
  }

并行计算的优化点

因为现在需要对一个Packet中64条射线并行计算，所以需要了解GPU的架构和特点，从而进行相应的优化

GPU是以warp为单位，每个wrap包含32个线程。所以我们这里的一个Packet应该使用了两个wrap，其中一个wrap中的一个线程对应一个局部单位

并行计算的优化点为：

• 只有当整个wrap中所有线程都不执行某个操作时，这个wrap才不会被执行，从而FPS会提高。只要wrap中至少有一个线程要执行某个操作，那么即使其它所有线程不执行该操作，它们也会在执行"workgroupBarrier()"时等待）

• GPU中Memory IO是个瓶颈，所以应该减少内存读写操作
  
  GPU内存类型分为寄存器、共享、局部、常量、纹理、全局，读写速度依次递减
  
  内存模型如下图所示：
  
  
  
  内存特性如下图所示：
  
  

应该减少速度慢的局部、常量、纹理、全局内存的读写

• 减少bank conflict
  
  共享内存是由多个bank组成，对于同一个bank的不同地址的读写会造成bank conflict
  
  因此尽量读写共享内存的连续地址

• 减少wrap diverse
  
  应该减少一个Packet中不同的局部单位进入不同的if分支的情况(这会造成局部单位阻塞)

为什么没有提升FPS？

之前的Demo使用串行算法，而现在的Demo使用并行算法

如果都不使用traverse order优化（即判断节点如果在射线的后面，则不遍历它），则FPS提升了50%；

如果都使用traverse order优化，则FPS没有变化；

这说明traverse order优化对于串行算法的提升更大。这是因为对于并行算法而言，只有当节点在一个Packet的所有射线的后面时，才不会遍历节点（可以参考之前的提到的优化点1）；

而对于串行算法而言，只要当节点在一条射线的后面，就不会遍历节点

为什么不使用改进的Ranged traversal算法？

通过Large Ray Packets for Real-time Whitted Ray Tracing论文，得知现在的并行算法属于文中提到的“Masked traversal”算法

文中还介绍了改进版的Ranged traversal算法，具体就是指一个Packet增加first active和last active标志，从而使一个Packet中只有first到last之间的射线进行相交检测，减少了相交检测的射线数量

但是这个算法应用到本文的并行算法中并不会提高FPS！因为本文的并行算法中的一个Packet至少会有一条射线会与叶节点进行相交检测，所以根据之前提到的优化点1可知FPS不会提高

具体案例分析

现在我们对代码进行一些具体的分析：

寄存器、共享、局部、全局内存分析

参考代码与存储的映射关系：

以及参考gpu cpu 共享内存 提高传输速度_GPU编程3--GPU内存深入了解，我们来分析下本文部分代码中的内存使用情况：

fn _intersectScene(ray: Ray, LocalInvocationIndex : u32) -> RingIntersect {
    //intersectResult是较大结构体，应该位于局部内存
    var intersectResult: RingIntersect;

    intersectResult.isClosestHit = false;
    intersectResult.layer = 0;

    //topLevel.topLevels是storage buffer数据，位于全局内存

    //rootNode是较大结构体，应该位于局部内存
    var rootNode = topLevel.topLevels[0];

    //pointInScreen位于寄存器
    var pointInScreen = ray.rayTarget;

    if (LocalInvocationIndex == 0) {
        //rayPacketAABBData位于共享内存
        rayPacketAABBData[0] = pointInScreen.x;
        rayPacketAABBData[1] = pointInScreen.y;
    }
    if (LocalInvocationIndex == 63) {
        rayPacketAABBData[2] = pointInScreen.x;
        rayPacketAABBData[3] = pointInScreen.y;
    }

    ...
}

GPU Memory IO优化

根据之前提到的优化点2，我们知道应该减少GPU内存的读写，特别是全局内存的读写

我们来对照代码分析一下全局内存读写的优化，看下面的代码：

var rootNode = topLevel.topLevels[0];

...

if (LocalInvocationIndex == 1) {
    stackSize = 1;

    stackContainer[0] = rootNode;
}

这里一个Packet中所有局部单位都从全局内存中读取第一个元素为rootNode，写到本地内存中（这里进行了64次全局内存读操作）；

然后在1号局部单位中，从本地内存中读取rootNode，写到共享内存中

如果将代码改为：

if (LocalInvocationIndex == 1) {
    stackSize = 1;

    stackContainer[0] = topLevel.topLevels[0];
}

那么就应该只进行1次全局内存读操作，从而提高FPS

但是实际上却降低了10%左右FPS，这是为什么呢？

这是因为GPU会将对全局内存同一地址或者相邻地址的读操作合并为一次操作（写操作也是一样），所以修改前后的代码对全局内存的读操作都是1次。

那么FPS应该不变，但为什么下降了呢？

这是因为在进行内存操作时，需要加上事务（进行锁之类的同步操作）。如果一个wrap中的所有线程同时对全局内存的一个地址进行读，则合并后的该次操作只需要一个事务；而如果是一个wrap中的部分线程进行读，则合并后的该次操作需要更多的事务（如4个），从而需要更多时间开销，降低了FPS

参考资料：

Nvidia GPU simultaneous access to a single location in global memory

初识事务内存（Transactional Memory）

我们再看下面的代码：

    else {
      var child1Node = topLevel.topLevels[u32(currentNode.child1Index)];
      var child2Node = topLevel.topLevels[u32(currentNode.child2Index)];

      var child1NodeMaxLayer = _getMaxLayer(u32(child1Node.leafInstanceCountAndMaxLayer));
      var child2NodeMaxLayer = _getMaxLayer(u32(child2Node.leafInstanceCountAndMaxLayer));

这里只需要一次合并后的读操作，从全局内存中读出child1Node、child2Node

如果代码改为：

    else {
      var child1Node = topLevel.topLevels[u32(currentNode.child1Index)];
      var child1NodeMaxLayer = _getMaxLayer(u32(child1Node.leafInstanceCountAndMaxLayer));

      var child2Node = topLevel.topLevels[u32(currentNode.child2Index)];
      var child2NodeMaxLayer = _getMaxLayer(u32(child2Node.leafInstanceCountAndMaxLayer));

因为要切换内存（全局和局部内存之间切换），所以就不能合并了，而需要二次全局内存的读操作，分别读出child1Node和child2Node，所以FPS会下降10%左右

parallel reduction优化并没有提高FPS

下面的代码使用了parallel reduction的优化版本来并行计算Packet中所有射线的最小layer：

      if (LocalInvocationIndex < 32) {
        _minForRayPacketRingIntersectLayer(LocalInvocationIndex, LocalInvocationIndex + 32);
      }
      workgroupBarrier();
      if (LocalInvocationIndex < 16) {
        _minForRayPacketRingIntersectLayer(LocalInvocationIndex, LocalInvocationIndex + 16);
      }
      workgroupBarrier();
      if (LocalInvocationIndex < 8) {
        _minForRayPacketRingIntersectLayer(LocalInvocationIndex, LocalInvocationIndex + 8);
      }
      workgroupBarrier();
      if (LocalInvocationIndex < 4) {
        _minForRayPacketRingIntersectLayer(LocalInvocationIndex, LocalInvocationIndex + 4);
      }
      workgroupBarrier();
      if (LocalInvocationIndex < 2) {
        _minForRayPacketRingIntersectLayer(LocalInvocationIndex, LocalInvocationIndex + 2);
      }
      workgroupBarrier();

关于parallel reduction优化可以参考啥是Parallel Reduction

优化后的代码并不比下面的原始版本的代码快:

for (var s: u32 = 1; s < 64; s = s * 2) {
  if (LocalInvocationIndex % (2 * s) == 0) {
    _minForRayPacketRingIntersectLayer(LocalInvocationIndex, LocalInvocationIndex + s);
  }
  workgroupBarrier();
}

估计是GPU帮我们优化了

wrap diverse优化

在之前使用串行算法的Demo代码中，我们在遍历叶节点包含的所有圆环时，加入了“如果找到了最前面的相交圆环，则退出叶节点的遍历”的优化，相关代码为：

      if (_isLeafNode(leafInstanceCount)) {
        ...
        while (leafInstanceCount > 0) {
          ...
          if (_isPointIntersectWithAABB(point, bottomLevel.worldMin, bottomLevel.worldMax)) {
            ...
            if (_isIntersectWithRing(point, instance, geometry)) {
              if (!intersectResult.isClosestHit || layer > intersectResult.layer) {
                ...

                if(layer == maxLayer){
                  break;
                }
              }
            }
          }

          ...
        }

而在本文的使用并行算法的代码，却删除了这个优化，FPS反而提升了10%。这是因为Packet中只有部分的局部单位会退出遍历，造成其它局部单位阻塞等待

注：如果并行算法的代码要加入这个优化，那也不能直接break，而是改为设置isBreak=true，在if中判断isBreak，这样才不会有同步的问题

bank conflict优化

现代显卡实现了broadcast机制，从而对同一个bank的相同地址的读写不会造成bank conflict。但由于我的测试显卡是老显卡，还没有该机制，所以在这种情况下会造成bank conflict

如下面代码所示：

      if (LocalInvocationIndex == 0) {
        isAddChild1 = _isRayPacketAABBIntersectWithTopLevelNode(rayPacketAABBData, child1Node);
      }
      if (LocalInvocationIndex == 1) {
        isAddChild2 = _isRayPacketAABBIntersectWithTopLevelNode(rayPacketAABBData, child2Node);
      }

两个局部单位同时读共享变量rayPacketAABBData，从而造成bank conflict，FPS下降5%左右

参考资料

如何用WebGPU流畅渲染百万级2D物体？

WebGPU的计算着色器实现冒泡排序

啥是Parallel Reduction

Ray Tracing学习之Traversal

Real-time Ray Tracing

Fast Ray Tracing

Large Ray Packets for Real-time Whitted Ray Tracing

Realtime Ray Tracing on GPU with BVH-based Packet Traversal

Getting Rid of Packets

is early exit of loops on GPU worth doing?

issue while using break statement in cuda kernel

CUDA——SM中warp调度器调度机制&&访存延迟隐藏

GPU 硬件层次和调度方式

What's the mechanism of the warps and the banks in CUDA?

CUDA之Shared memory bank conflicts详解

gpu cpu 共享内存 提高传输速度_GPU编程3--GPU内存深入了解