ThreeJS 上的 Sphere Impostor答案

【问题标题】：Sphere Impostor on ThreeJSThreeJS 上的 Sphere Impostor
【发布时间】：2016-12-18 05:20:45
【问题描述】：

我正在使用 ThreeJS 在 GLSL 上开发球体冒名顶替着色器。我的算法基于 Sigg 等人的出版物。命名为“基于 GPU 的二次曲面光线投射”。

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

目前，我成功开发了着色器，甚至使用 ThreeJS 着色器块来确保完全兼容 ThreeJS。你可以找到一个演示页面here。但是，最后一件事在此实现上不起作用。

当移动场景中的对象时，使用球体冒名顶替的对象与普通网格相比似乎有所延迟。您还可以注意到，有时球体会像 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 来获得它的逆。但是modelViewMatrix只在WebGLRenderer的渲染调用过程中更新，所以帧延迟可能来自那里。如何更新依赖于其他制服的制服并使它们在 ThreeJS 上保持同步？

【问题讨论】：

标签： three.js shader

【解决方案1】：

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

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

【讨论】：