three.js - ThreeJS 上的球体冒名顶替者

Question

我正在使用 ThreeJS 在 GLSL 上开发一个球体冒充着色器。我的算法基于 Sigg 等人的出版物。名为“基于 GPU 的二次曲面光线转换”。

当使用经典的几何方法时，您需要数十甚至数百个三角形来表示每个球体。如果您需要显示数千个球体，可能会导致内存过载。球体冒充器允许您仅存储几何体上的位置和半径来显示球体，从而提供比以前的技术更高的性能。

现在，我成功地开发了着色器，甚至通过使用 ThreeJS 着色器 block 来确保完全的 ThreeJS 兼容性。您可以找到演示页面here 。然而，最后一件事在此实现上不起作用。

在场景中移动对象时，使用球体冒名顶替器的对象与普通网格相比似乎会延迟。您还可以注意到，有时，球体会像 this picture 上那样被“切割”。 .

第二个错误让我认为 Sprite 已被顶点着色器很好地放置到场景中，但片段着色器正在计算错误的坐标。我怀疑问题可能出在两段代码上:

• 顶点着色器向片段着色器提供的两个变量应该为 Sprite 的每个像素提供相同的值。我不知道如何验证这一点。

  varying float projMatrix11;
  varying float projMatrix22;
  

• 我不知道更新我的着色器制服是否做得很好

  group.traverse(function(o) {
      if (!o.material) { return; }
  
      var u = o.material.uniforms;
      if (!u) { return; }
  
      modelViewMatrixInverse.getInverse(
          o.modelViewMatrix
      );
  
      if (u.projectionMatrixInverse) {
          u.projectionMatrixInverse.value = projectionMatrixInverse;
      }
  
      if (u.projectionMatrixTranspose) {
          u.projectionMatrixTranspose.value = projectionMatrixTranspose;
      }
  
      if (u.modelViewMatrixInverse) {
          u.modelViewMatrixInverse.value = modelViewMatrixInverse;
      }
  
      if (u.viewport) {
          u.viewport.value = viewport;
      }
  });
  

我无法调试这个问题，希望有人比我更了解 ThreeJS 可以给我一些关于它的线索。

我真的希望我们能够解决这个问题，这样我们就可以向 ThreeJS 的整个社区推荐这个功能;)

注意:为了方便调试，我延迟了 requestAnimationFrame 的调用

编辑:经过更多挖掘后，问题可能出在我更新自定义制服的方式上。其中之一使用 modelViewMatrix 来获取其逆矩阵。但是 modelViewMatrix 仅在 WebGLRenderer 的渲染调用期间更新，因此帧延迟可能来自那里。如何更新依赖于其他制服的制服并使它们在 ThreeJS 上保持同步？

Answer 1

单独找到答案，如果有人遇到同样的问题我会在这里解释。

问题是我正在使用 ThreeJS 提供的 modelViewMatrix 更新 modelViewMatrixInverse 制服。此制服仅在调用 WebGLRenderer 的 render() 方法期间更新，而我的 modelViewMatrixInverse 在每次渲染调用时晚了一帧。这就是为什么我的自定义着色器每次都比 ThreeJS 原生着色器晚一帧。