Search code examples
javascriptopenglemscriptenasm.jswebassembly

WebAssembly & OpenGL - Single context, many output (to canvas)

(New to OpenGL / Emscripten)

For a stock trading client application I'm building there is the need of 40+ open charts. About 50% of them being in some sort of 'Free draw' state, meaning they show candlesticks plus other lines/arrows/images etc.

After trying a lot of options the last few months, here is what it comes down to.

  • HighCharts: Easy but slow;
  • CanvasJS: Faster but not fast enough
  • WebAssembly + OpenGL: A lot faster, but a lot of work (still worth it)

I bootstrap a single WebAssembly app instance, and call functions on it to let C++ create charts with OpenGL, that maps to WebGL(2). It all works fine.

The reason I go for (WebAssembly + OpenGL) -> Emscripten, is because there is a lot of number crunching, and c++ suits that job fine as well :)

Problem is WebGL has a context limit of about 10 in Chrome(59). So having 40-100 WebGL context (Charts) is not a smart idea, also my guts tell me its a waste of OpenGL resources to have so many context that are almost always output as static images, unless you scroll the chart etc.

Does anyone have good experience with rendering a single OpenGL context to a random canvas element (or any other element, doesn't really matter)?

My thought are as follow:

  1. Start c++ OpenGL with an offscreen canvas in another thread, https://github.com/OleksandrChekhovskyi/emscripten-offscreen-canvas-test/blob/master/main.c#L35
  2. Javascript tells c++ to render a graph
  3. share/render the OpenGL backbuffer with JS through shared Uint8Array... SharedArrayBuffers gets filled by C++ in JS Worker thread and the main (render) thread only reads/transpiles to write image to canvas/html element.

I can't seem of any other way to not create many OpenGL contexts.

Question is: How performant will it be to do it like this, and basically copy over the OpenGL buffer to Javascript etc? It it far off track?

Thanks

enter image description here

p.s. bottom graphs (with red wave line) are now rendered by WebAssembly and OpenGL (GLFW etc)

------ UPDATE -----

Option 2: Always render to same Canvas, and use JS to copy context of canvas to another canvas (but it will probably be erased if the context updates..)

Solution

  • So, after building some more I found a fast solution.

    Im using just 1 context (GLFW) and trigger a C++ function through JS to render the chart, once done c++ signals back to JS using EM_ASM_ with the corresponding Chart ID to render the result (image) to its destination canvas width:

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

    I tested it and it works really fast, copying over the image from the canvas is always less than 1ms. Even on a 4K screen with 2K+ images.

    And when Chrome fully supports off-screen canvas, I can load the WebAssembly rendering part in a web worker and bypass the main thread in total, and maybe switch canvas contexts on the fly to render to the destination canvas instantly. making it even faster. But its not possible yet (few more months :))

    So unless Browsers will support 100+ webGL contexts, this will be the fastest solution in the nearby future I guess.