与 iframe 和/或弹出窗口共享 WebGL 上下文答案

【问题标题】：Sharing a WebGL context with an iframe and/or window popups与 iframe 和/或弹出窗口共享 WebGL 上下文
【发布时间】：2020-05-29 10:59:01
【问题描述】：

我们正在尝试构建一个允许嵌入内容（DOM 或 iFrame）“浮动”的应用，即。通过window.open()移动到一个单独的窗口。

【问题讨论】：

【解决方案1】：

WebGL 渲染上下文可以在两个窗口之间共享吗？这将防止新窗口必须重建 GPU 上下文：纹理上传、着色器编译等。

WebGL 上下文只能与单个画布一起使用，因此虽然您可以在另一个窗口中使用该上下文（假设它是由同一页面打开的窗口），但它只能呈现到它最初关联的画布上。

额外问题：可以在 iframe 之间共享上下文吗？

同上

双重奖励：对于 Electron 场景，渲染进程之间可以共享上下文吗？

不，您可以在同一进程中跨窗口共享。不能跨进程共享。

您可以使用 canvas 2d 将 WebGL 画布绘制到 2D 画布中，这样您就可以使用一个画布，在该画布中进行渲染，然后将其复制到 iframe。

例如见http://greggman.github.io/doodles/webgl_multiple_windows.html 在左上角单击create new window。每个新窗口都是同一场景的另一个视图。窗口，包括主窗口，都是通过使用 2D 画布和 drawImage 渲染的

您可能可以使用OffscreenCanvas 并通过transferToImageBitmap 跨iframe 渲染到多个画布。

【讨论】：

对于 1 和 2，您确定这些肯定吗？为什么一个窗口不能从另一个窗口访问上下文？ WebGLRenderingContext 接口是否有一个特殊的“同源但我们不让你访问那个对象”的特殊规则？似乎没有：jsfiddle.net/0dwxy4za 你甚至可以将渲染器从一个窗口移动到另一个窗口：jsfiddle.net/0dwxy4za/1
也许我误解了这个问题。您不能跨画布共享上下文，因此您可以跨窗口或 iframe 使用上下文这一事实几乎无关紧要。你最终还是会使用我建议的解决方案，渲染到一个画布，drawImage 到其他画布。
他们谈到了将被“移动”到另一个窗口的内容。他们没有谈论另一幅画布。不，我的小提琴使用单个 HTMLCanvasElement，具有单个 webgl 上下文。
好的。更新了答案。