从顶点着色器读取变量以在 webgl 中进行渲染

Question

我想在移动和静态对象之间实现碰撞检测器。我正在考虑这样做的方式是，如果移动对象的任何顶点与静态对象的位置相交，则每次检查顶点着色器。

通过上述操作，我将在顶点着色器中获得碰撞点，但我想在 js 文件中使用该变量进行渲染。 有什么办法吗。

Answer 1

在 WebGL 1 中，您不能直接从顶点着色器中读取任何数据。您可以做的最好的事情是使用顶点着色器来影响在片段着色器中渲染的像素。因此，您可以例如设置gl_Position，因此如果测试失败，则不会渲染任何内容，如果测试通过，则会渲染单个像素。或者您可以设置一些变量，根据您的测试结果设置某些颜色。然后您可以使用gl.readPixels 读取像素，或者您可以将写入的纹理传递给不同的绘制调用中的另一个着色器。

在 WebGL2 中，您可以使用变换反馈来允许顶点着色器将其变量写入缓冲区。然后，您可以在其他绘图调用中使用该缓冲区或使用 gl.getSubBuffer 读取其内容

在 WebGL2 中，您还可以进行遮挡查询，这意味着您可以尝试绘制一些东西并测试它是否真的被绘制了，或者深度缓冲区是否阻止了它被绘制。