WebView2 blocks UI when showing WebGL (ThreeJS) from OpenGL App

General JUCE discussion
1

Hello,
I’m working on a 3d point cloud manipulation app that hosts a webserver showing a 3d view of the manipulated point clouds using ThreeJS.
The app works well and the viewer is working just fine in a browser, but when trying to integrate the view of this webpage inside the app itself, as soon as the webgl part of the page is loaded, the app doesn’t not respond to any interaction, it’s not frozen but the UI is just “blocked”.

I’m currently using OpenGL to render the UI in JUCE, using

openGLContext.reset(new OpenGLContext());
openGLContext->setComponentPaintingEnabled(true);
openGLContext->setContinuousRepainting(false);
openGLContext->attachTo(*this);

I tried commenting out those lines, and it is working fine inside the app.
I guess there is something to do with passing the same context to the WebView2 and the main windows’ one

Does anybody know if there is a way to pass another context, or more generally have a way to use both GL rendering for JUCE components and WebView2 with ThreeJS (or other webGL stuff) ?

Thank you !

3

Sounds familar, probably related to this:

If the juce OpenGLContext stalls the pipeline by claiming the context too much, it could potentially freeze/lock other GL pipelines.

Do you have a minimal working example that reproduces the error, which you can share? If so, I could check out if the listed fixes resolve the UI blocking.

4

Sorry for the late response, I had to go forward with the project…
I think it’s pretty straightforward to just include a WebView2 component in the example OpenGL app and check that it’s pretty much broken.
I can confirm that just removing the OpenGL as renderer makes it work as expected, on 7.0.2

5

Hi Ben! I’m looking at using a ThreeJS based visualiser in my Juce plugin using the WebBrowserComponent or the OpenGLAppComponent, did you get this working in the end? Just wondering how do-able this is / what issues I might run into.

1 Like
6

Hello, doesn’t seem to have been updated since. My app is actually keeping quite update on the JUCE develop branch so I’d notice if the OpenGL + WebView was working now :slight_smile:

Anybody from JUCE has some insight here ?

7

You would have to wait until JUCE 8 will be released so the OpenGL/Metal/WebGL/WebGPU interoperability will be ironed out in all platforms, webviews and graphics stacks.

8

Waw that’s a very nice surprise ^^
Any idea on an approximate release date ?
Thank you :slight_smile:

9

I’m unable to reproduce this issue with the current JUCE develop branch.

Adding either OpenGL to the WebBrowserDemo or a WebView2 instance to the OpenGL demo seems to work when opening one of the three.js demo pages in the WebBrowserComponent.

Can you share a minimal repro of your issue?

10

Hello, thanks for the reply sorry for the delay…
The problem occurs when reloading or switching context. In some cases it’s able to recover by reloading but when I have the component in a detached windows and I attach it to the main window, it’s then showing some bad content (like random memory)

11

Update :
it seems to have to do with unloading and reloading the component.
My software loads different layouts when loading files, when loading a layout, the components are removed and recreated again.
Depending on the order (especially if a window was created before the initialisation of opengl), then it may or may not show good.
The interesting thing is once it’s actually created ok, it will be quite stable. If it was not okay on start, then it will stay bad even if I close and recreated a new component with a webview inside

12

So if the component is created too early (I guess before the window is shown), then it won’t be working for the whole lifetime of the software…