如何强制WebGL立即渲染到FrameBuffer?

时间:2019-01-16 03:08:59

标签: javascript opengl-es webgl textures framebuffer

背景-我正在研究一个类似于After Effects或Photoshop的项目-您可以操纵各种视觉层,最终将它们组合在一起。我对直接在WebGL中可用的混合模式不满意,因此我一直在使用着色器和多遍渲染方案实现新的混合模式。基本上,我将每一层渲染到一个帧缓冲区中,然后在渲染下一层时立即将帧缓冲区用作源纹理。

我的问题-由于片段着色器并行运行,因此图层无法顺序渲染。浏览器尝试并行渲染所有图层,然后将它们合成在一起,这意味着在执行着色器时,给定图层的父图层的源纹理为空。结果,无法合并来自前一层的数据。可以说,绑定和渲染在广义上是可行的,因为我能够在所有内容渲染后保留合成纹理并在后续帧中使用它,但这不是我想要的。

我的问题-如何强制WebGL光栅化给定的帧缓冲区,以便立即将其用作纹理?

2 个答案:

答案 0 :(得分:1)

WebGL并非如此。

从JavaScript和WebGL的角度来看,没有并行运行。无论您看到什么错误,都可能是代码中的错误所致,而不是与并行运行WebGL有关。

根据规格:

  

命令始终按照接收顺序进行处理,尽管在命令生效之前可能会有不确定的延迟   实现。例如,这意味着必须完全绘制一个图元   在任何后续影响帧缓冲之前。这也意味着查询   像素读取操作返回的状态与所有内容的完整执行一致   先前调用的GL命令... GL命令对GL模式或帧缓冲区的影响必须完整,然后任何后续命令才能产生此类影响

不存在渲染到帧缓冲区并且没有准备好在绘制调用中使用结果的情况。

您在评论中声称,调用gl.finish可以修复您的错误,但这很可能与您的错误实际上是偶然的。

如果您认为自己已经查看过其他内容,则发布回购协议,因为这可能是浏览器中的错误,应该报告。您提到纹理为空。听起来更像是您在尝试渲染画布的内容,并且这些内容已被清除,这是规范的一部分。没有看到您的代码,我们无法告诉您真正的问题是什么,但是您在问题中写的内容不太可能。

答案 1 :(得分:-1)

我认为您可以使用的仅有的两个API是冲洗和完成。据我所知,它们在浏览器中无法完全正常工作。但是您可以尝试一下。

WebGLRenderingContext.flush

  

WebGL API的WebGLRenderingContext.flush()方法为空   不同的缓冲区命令,导致所有命令都以   尽快。

WebGLRenderingContext.finish

  

WebGL API块的WebGLRenderingContext.finish()方法   执行,直到所有先前调用的命令完成。

编辑:如果这些操作没有达到您的期望,则可以进行最少的readPixels调用,以等待管道完成。