如何在不修改WebGL中的网格结构的情况下在对象中创建孔？

Question

我是WebGL的新手，对于一项任务，我试图编写一个以对象为参数的函数，让我们说＆＃34; objectA＆＃34;。 ObjectA不会被渲染，但如果它与场景中的另一个对象重叠，让我们说“objectB”，objectB内部的objectB部分将消失。因此效果是ObjectB中有一个洞而不修改其网格结构。 我已经设法让它在我自己的渲染引擎上运行，基于光线跟踪，这会产生以下效果：

图像初始场景：

删除了objectA的图片：

在第一张图片中，绿色球体是＆＃34; objectA＆＃34;蓝色立方体是＆＃34;对象B＆＃34;。 所以现在我试图用WebGL编程，但我有点卡住了。因为WebGL基于光栅化而不是光线跟踪，所以必须以另一种方式计算。可能的情况是修改Z缓冲区算法，其中具有位于objectA内的z值的片段将被忽略。

我想到的算法的工作原理如下：通常只有具有最小z值的片段才会存储在包含颜色和z值的特定像素中。第一种修改是在特定像素处，保持属于该像素的所有片段的列表。不会丢弃任何碎片。其次，每个片段存储一个包含其所属对象的额外参数。接下来，根据它们的z值以递增的顺序对片段进行分类。

然后，如果第一个片段属于objectA，它将被忽略。如果下一个属于objectB，它也将被忽略。如果第三个属于objectA而第四个属于objectB，则将选择第四个因为它位于objectA之外。 因此，将选择属于objectB的第一个片段，其约束条件是属于objectA的先前片段的数量是偶数。如果它不均匀，则片段将位于objectA内，并将被忽略。

这在WebGL中是否可行？我也试图通过模板缓冲区实现它，基于这个博客： WebGL : How do make part of an object transparent? 但这是为OpenGL编写的。我将代码指令转换为WebGL代码指令，但它根本不起作用。但是我不确定它是否适用于3D对象而不是2D三角形。

提前多多感谢！

Answer 1

为什么不在片段着色器（也就是像素着色器）中写入光线跟踪器？

因此，您需要渲染全屏四边形（两个三角形），然后片段着色器将负责光线跟踪。有很多资源可以阅读/学习。

此链接可能有用：

• Distance functions - by iq
• How shadertoy works
• Simple webgl raytracer