WebAssembly 和 OpenGL - 单一上下文，多输出（到画布）

Question

（OpenGL / Emscripten 新手）

对于我正在构建的股票交易客户端应用程序，需要 40 多个打开的图表。其中大约 50% 处于某种“自由绘制”状态，这意味着它们显示烛台以及其他线条/箭头/图像等。

在过去几个月尝试了很多选择之后，这就是结果。

• HighCharts：简单但缓慢；
• CanvasJS：更快但还不够快
• WebAssembly + OpenGL：快了很多，但工作量很大（仍然值得）

我引导单个 WebAssembly 应用程序实例，并在其上调用函数以让 C++ 创建带有 OpenGL 的图表，该图表映射到 WebGL(2)。一切正常。

我选择 (WebAssembly + OpenGL) -> Emscripten 的原因是因为有很多数字运算，而且 C++ 也很适合这项工作:)

问题是 WebGL 在 Chrome(59) 中的上下文限制约为 10。因此，拥有 40-100 个 WebGL 上下文（图表）并不是一个聪明的主意，而且我的胆量告诉我，拥有如此多的上下文几乎总是作为静态图像输出是对 OpenGL 资源的浪费，除非您滚动图表等。

有没有人有将单个 OpenGL 上下文渲染到随机画布元素（或任何其他元素，并不重要）的良好经验？

我的想法如下：

1. 在另一个线程中使用屏幕外画布启动 c++ OpenGL， https://github.com/OleksandrChekhovskyi/emscripten-offscreen-canvas-test/blob/master/main.c#L35
2. Javascript 告诉 C++ 渲染图形
3. 通过共享 Uint8Array 与 JS 共享/渲染 OpenGL 后台缓冲区... SharedArrayBuffers 在 JS 工作线程中由 C++ 填充，主（渲染）线程仅读取/转换将图像写入画布/html 元素。

我似乎没有任何其他方式可以不创建许多 OpenGL 上下文。

问题是：这样做的性能如何，并且基本上将 OpenGL 缓冲区复制到 Javascript 等？它离轨道很远吗？

谢谢

ps 底部图形（带有红色波浪线）现在由 WebAssembly 和 OpenGL（GLFW 等）渲染

- - - 更新 - - -

选项 2：始终渲染到同一个画布，并使用 JS 将画布的上下文复制到另一个画布（但如果上下文更新，它可能会被删除..）

Answer 1

因此，在构建更多之后，我找到了一个快速解决方案。

我只使用 1 个上下文 (GLFW) 并通过 JS 触发 C++ 函数来呈现图表，一旦完成，C++ 信号返回给 JS，使用 EM_ASM_ 和相应的图表 ID 将结果（图像）呈现到其目标画布宽度：

chart.el.getContext('2d').drawImage(Module.canvas, 0, 0, width, height, 0, 0, width, height);

我测试了它，它的运行速度非常快，从画布复制图像总是小于 1 毫秒。即使在具有 2K+ 图像的 4K 屏幕上。

当 Chrome 完全支持离屏画布时，我可以在 web worker 中加载 WebAssembly 渲染部分并完全绕过主线程，并且可能即时切换画布上下文以立即渲染到目标画布。使它更快。但还不可能（还有几个月:)）

因此，除非浏览器支持 100 多个 webGL 上下文，否则我猜这将是不久的将来最快的解决方案。