Question

我正在使用ThreeJS在GLSL上开发一个球体冒名顶替器。我的算法基于Sigg等人的出版物。命名＆＃34;基于GPU的二次曲面光线投射＆＃34;。

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

目前，我成功开发了着色器，即使使用ThreeJS着色器块也能确保完整的ThreeJS兼容性。您可以找到演示页面here。但是，最后一件事没有解决这个问题。

在场景中移动物体时，与普通网格物体相比，使用球体冒名顶替者的物体似乎会延迟。您还可以注意到，有些时候，球体被切割了＃34;就像在this picture上一样。

第二个错误使我认为精灵很好地被顶点着色器放置在场景中，但片段着色器计算错误的坐标。我怀疑问题可能是两段代码：

顶点着色器向片段着色器提供的两个变化应该为精灵的每个像素提供相同的值。我不知道如何验证这一点。
```
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来反转它。但是，只有在WebGLRenderer的渲染调用期间才更新modelViewMatrix，因此帧延迟可能来自那里。如何更新依赖于其他制服的制服并在ThreeJS上保持同步？

Answer 1

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

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

ThreeJS上的Sphere Impostor

1 个答案: