WebGL中的多个canvas能否共用一份渲染资源

webgl不允许在多个context之间share资源。我的建议是用个全屏的canvas,然后用viewport来限定几个绘制范围。
■网友
正确的做法是,把要渲染的内容画到一个FBO上,如果你想要画出多种效果的话还可以使用MRT,就是绑定多个renderbuffer到FBO上。 最后在render to canvas 的时候,把之前渲染的结果作为texture就可以了。 这里涉及到多个webgl context share resource的问题。 由于webgl没有share context的概念,因此无法直接share texture. 这里webGL开发者列表中也有人建议实现这一机制,但到目前为止,还没有出现在具体的spec中,仅仅还是proposal而已。
作为walk around, 我们可以采用EGLImage来做共享。 Chromium中WebGL是通过offscreen的framebuffer渲染到texture中的, 在GPU线程的context中会在创建texture时为其绑定一个唯一的mailbox名字,还会调用eglCreateImageKHR为这个texture id创建一个可以被其他context共享的EGLImage. 当Android View在另一个context进行渲染时,通过mailbox的名字便可以知道对应的EGLImage. 将其绑定到新的texture上,便可以实现共享了。 希望对你有帮助。

■网友
context是指绘制上下文,它只能在同一个canvas中有效。一个context中的资源id肯定是不能在别的context中使用的。不过你的需求是有办法实现的。可以用一个canvas储存需要的资源或图片,假设canvas3。然后用这个canvas来创建canvas1和canvas2的纹理。当然最好是直接用canvas3渲染到canvas1或canvas2上。对于浏览器来说canvas的存储也是一张纹理。
■网友
不是很理解你说的具体需求,如果是想让一处webgl绘制的复杂场景在多处展示的话可以只绘制一处div内的场景,然后其它地方可以利用canvas 2d的drawImage API把那个webgl绘制的canvas当做纹理在其它地方绘制出来。这样可以在一定程度上减少CPU和GPU的渲染消耗。
■网友
规范里好像是有的,但目前为止貌似还没有浏览器实现,估计以后也不会实现了
【WebGL中的多个canvas能否共用一份渲染资源】 SharedResouces - WebGL Public Wiki


    推荐阅读