HTMLDialog frame rate issue?

It looks like HTMLDialogs have a really inconsistent frame rate compared to WebDialogs.
Here is a quick test:

htmldlg = UI::HtmlDialog.new({dialog_title:"HTMLDialog"})
htmldlg.set_url("https://www.testufo.com/")
htmldlg.show
webdlg = UI::WebDialog.new("WebDialog")
webdlg.set_url("https://www.testufo.com/")
webdlg.show

On idle, the HTMLDialog reaches a nice 60FPS, but once we open menus the frame rate drops significantly, created annoying stutters.
The WebDialog seems to max out at around 50FPS on my machine. And although it doesn’t seem to have VSync, it feels much more consistent and responsive.

This is something we are experiencing with our new UIs using HTMLDialogs. Despite building nice UIs with modern frameworks, they feel dated and sluggish because of this frame rate issue.

The issue dates back from the introduction of HTMLDialogs in SketchUp 2017 and still occurs in 2020.

I don’t know where this comes from, but it seems to be related to the integration of CEF in SketchUp. When you open https://www.testufo.com/ in regular Chrome or Chromium, there are no stuttering. The same goes for our UIs.
So it looks like something is messing with CEF’s frame rate.

Here is a GIF comparison. On the left is the HTMLDialog in SketchUp 2020, on the right is the exact same version of Chromium (64.0.3282 from 2018).

The GIF is supposed to be 60FPS, but it still doesn’t translate the difference as much as it should. Look at the green charts at the top, you can clearly see the HTMLDialog struggling, especially when scrolling.
The Chromium chart on the right is also affected by the screen recording of the GIF. Here is a screenshot after scrolling on both without screen recording:

htmldialog

Chromium maxes out at 60FPS during animations, the HTMLDialog stays around 10-15FPS.

1 Like

For reference, also posted on the Github tracker: https://github.com/SketchUp/api-issue-tracker/issues/551

1 Like

I wonder how it would compare if you built an app with CEF using something like this?

@Neil_Burkholder it would be better. I have used this in a revit addin I made.
Bummer is: cefsharp is windows only, so you’d better use cef directly.

Another option would be electron and setting up ipc on windows and osx.

I think ChaosGroup did something like that for V-Ray, but window parenting was a nightmare.
It’s mostly working fine now, but getting it to work reliably took several years…

I can imagine.
Maybe SketchUp could have a second look at their implementation. To start with, all other implementations of cef I have seen (or created) (revit, autocad, archicad) allow for response values when calling a function from javascript.

Well you know that when CEF is embedded in an application, that application still has things to do whilst the CEF window is open, so that the app doesn’t go into “not responding” mode.

But than again, AFAIK CEF windows run in their own process? We’d think that maybe they could also run on another core ?

So it does seem that something is wonky. The old WebDialog was implemented on PC using Windows native MSIE web browser control which may have come with better interoperability “out the gate.”

Now, although they run in their own process, they are influenced by the main process. I notice the very same in archicad’s implementation of cef, so it must be something common.

1 Like