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

Question

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

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

Answer 1

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

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

在WebGL2你也可以做遮挡查询，这意味着你可以尝试画一些东西，测试，如果它实际上是画，或者如果深度缓冲防止它从被绘制。