从顶点着色器读取变量以在 webgl 中渲染
Reading variable from vertex shader for rendering in webgl
我想在移动物体和静态物体之间实现碰撞检测器。我想这样做的方法是每次检查移动对象的任何顶点是否与静态对象的位置相交时都检查顶点着色器。
通过执行上述操作,我会在顶点着色器中获得碰撞点,但我想在 js 文件中使用该变量进行渲染。
有什么办法吗
在 WebGL 1 中,您无法直接从顶点着色器读取任何数据。您可以做的最好的事情是使用顶点着色器来影响在片段着色器中渲染的像素。因此,您可以设置 gl_Position
,这样如果测试失败则不渲染任何内容,如果测试通过则渲染单个像素。或者您可以设置一些变化,根据您的测试结果设置某些颜色。然后您可以使用 gl.readPixels
读取像素,或者您可以将写入的纹理传递给不同绘制调用中的另一个着色器。
在 WebGL2 中,您可以使用变换反馈来允许顶点着色器将其变量写入缓冲区。然后,您可以在其他绘制调用中使用该缓冲区或使用 gl.getSubBuffer
读取其内容
在 WebGL2 中,您还可以执行遮挡查询,这意味着您可以尝试绘制一些东西并测试它是否实际被绘制,或者深度缓冲区是否阻止它被绘制。
我想在移动物体和静态物体之间实现碰撞检测器。我想这样做的方法是每次检查移动对象的任何顶点是否与静态对象的位置相交时都检查顶点着色器。
通过执行上述操作,我会在顶点着色器中获得碰撞点,但我想在 js 文件中使用该变量进行渲染。 有什么办法吗
在 WebGL 1 中,您无法直接从顶点着色器读取任何数据。您可以做的最好的事情是使用顶点着色器来影响在片段着色器中渲染的像素。因此,您可以设置 gl_Position
,这样如果测试失败则不渲染任何内容,如果测试通过则渲染单个像素。或者您可以设置一些变化,根据您的测试结果设置某些颜色。然后您可以使用 gl.readPixels
读取像素,或者您可以将写入的纹理传递给不同绘制调用中的另一个着色器。
在 WebGL2 中,您可以使用变换反馈来允许顶点着色器将其变量写入缓冲区。然后,您可以在其他绘制调用中使用该缓冲区或使用 gl.getSubBuffer
在 WebGL2 中,您还可以执行遮挡查询,这意味着您可以尝试绘制一些东西并测试它是否实际被绘制,或者深度缓冲区是否阻止它被绘制。