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

Question

我想在移动和静态对象之间实现碰撞检测器。我想这样做的方法是每次检查移动物体的任何顶点是否与静态物体的位置相交时检查顶点着色器。

通过执行上述操作，我会在顶点着色器中获得碰撞点，但我想在js文件中使用该变量进行渲染。 有没有办法做到这一点。

Answer 1

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

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

读取其内容

在WebGL2中，您还可以执行遮挡查询，这意味着您可以尝试绘制某些内容并测试它是否实际绘制，或者深度缓冲区是否阻止它被绘制。