I have a setup that uses post processing and I have about 10 passes. The passes are pretty well optimsed, not requiring swap for the most part. I switched, based on a recommendation I saw in another thread, to using the Postprocessing from pmndrs, which made a big difference to the time it takes to render a frame (from 5ms to sum 1ms), but doesn’t affect the dropped frames.
I seem to have outlying tasks in the compositor, just called ‘Task’ and they are measured in the μs. The main task is sub 1ms, but these outliers are causing a frame drop.
I feel like am missing a piece that will help me diagnose what’s going on here. Does anyone have any pointers?
This is on Ubuntu in Chrome running the latest version of Chrome.
I think the compositor is more for stuff outside the canvas… like layering the HTML elements in front/behind the canvas.
Do you by chance have some html UI in html on top of your threejs?
There is a widget you can enable in the chrome console/rendering tab that highlights the screen components that are getting lots of redrawing… “Paint flashing”
That can help isolate which components might be causing excessive overdrawing… or if a component is rendering inefficiently:
The “Frame rendering stats” and “Scrolling performance issues” can be useful too…
Did you manage to solve the issue? I faced the same one. When the canvas isn’t covered by anything it works perfectly, but it starts lagging when I add a react component on top of it. (PS: I am not using react-fiber and I have no such plans).
Compositing is expensive when there is fancy stuff happening in the overlay. Especially things with blending like drop shadows, or animating components. Probably just avoid doing complex visuals in DOM overlay. Also… dom doesn’t work in VR.
