javascript - 如何使用 WebGL 着色器切割对象？

Question

我想在 WebGL (fragment shaders/vertex shaders) 中剪切一个对象(一个盒子)而不使用 bool 运算(并集) 、差异等)。

我想使用着色器来隐藏对象的某些部分(因此它并不是真正的“真正的削减”，因为它只是隐藏了对象)。

编辑

Answer 1

首先，确保顶点着色器将世界空间中的位置传递给片段着色器(或者更确切地说，您希望裁剪相对于哪个坐标空间固定)。示例(凭内存编写，未经测试):

varying vec3 positionForClip;
...
void main(void) {
    ...
    vec4 worldPos = modelMatrix * vertexPosition;
    positionForClip = worldPos.xyz / worldPos.w;  // don't need homogeneous coordinates, so do the divide early
    gl_Position = viewMatrix * worldPos;
}

然后在您的片段着色器中，您可以根据任意平面或您想要的任何其他类型的测试进行丢弃:

varying vec3 positionForClip;
uniform vec3 planeNormal;
uniform float planeDistance;
...
void main(void) {
    if (dot(positionForClip, planeNormal) > planeDistance) {
        // or if (positionForClip.x > 10.0), or whatever
        discard;
    }
    ...
    gl_FragColor = ...;
}

请注意，使用 discard 可能会导致性能下降，因为 GPU 无法基于知道所有片段都将被写入来进行优化。

免责声明:我自己没有对此进行研究，只是根据“显而易见的解决方案”写下了一种可能的方法。可能有更好的方法我还没有听说过。

---

关于您关于多个对象的问题:有许多不同的方法可以处理这个问题——最终都是自定义代码。但是您当然可以对场景中的不同对象使用不同的着色器，只要它们位于不同的顶点数组中即可。

    gl.useProgram(programWhichCuts);
    gl.drawArrays();
    gl.useProgram(programWhichDoesNotCut);
    gl.drawArrays();

如果您是使用多个程序的新手，它与使用一个程序非常相似，只是您一次完成所有设置(编译、附加、链接)。需要注意的主要事情是每个程序都有自己的制服，因此您必须分别为每个程序初始化制服。