High CPU% with video rendering in Canvas using webgl on Electron Windows

I have been exploring the electron framework in Windows 10 platform to render the binary YUV data (video frames) on the canvas using webgl.
I developed a c++ based node addon which can provide the video stream to the JS rendering webgl layer. Then these YUV frames are converted to RGB frames using the fragment shader and rendered in the callback which is tied to requestAnimationFrame

And I observed that the CPU % when displaying binary streams in electron is atleast twice compared to rendering the streams using a native WPF app.

Currently, I render data using a canvas which exposes Webgl context. And just the following rendering logic takes bulk of the CPU%:


Just to add more information, while fetching the webgl context from canvas, I had disabled preserveDrawingBuffer, alpha, depth, stencil and antialias to have the best performance setting. But still the CPU% was still 2x more than that of a WPF app. Is this performance expected on rendering the canvas content in windows? Or is there another way to render the binary streams in electron app which is more CPU efficient than the webgl based canvas rendering?

Did you find any solution??

Reviving this question as it’s not been answered. I am wondering the same thing.

I’m just struggling with a glitch in the canvas. every 10 secs it freezes for a bit.
It also did it with the distribution exe… and then I right clicked on the exe, and chose to run it with Nvidia’s card. no glitch.

How do we force the Electron app to choose the better card?
I tried to add the app.commandLine.appendSwitch(“force_high_performance_gpu”);
And it didn’t make any difference…