Lag when navigating through a moderately large city model

[RobertRoeb]

Hi there and thanks for creating this project,
I am using three_js dart to navigate through a city model that is made of a few thousand triangles and few hundred textures projected unto those triangles (the walls, roofs etc). I am using (and the author of) wxDart, which has two variants, one using Flutter as the backend and one using wxWidgets as the backend (that is relevant for the issue). wxDart has a WxGLContext class for both variants and I have written a ThreeJS renderer to link wxDart's WxGLContext to WxGLCanvas to ThreeJS Dart. This renderer is here https://pub.dev/packages/three_js_wx_renderer
Basically everything works now, but very frequently, the system lags and I get something like 1 frame per second. Currently, I do nothing but changing the camera position. I have originally written the same code in Javascript using ThreeJS r146. It has the same model using the exact same data and additionally has dozens of animated models and flying and walking around. This runs with no lag on a Mac Mini m4 in Chrome. Now running the simpler code (no models, just camera change) with either the Flutter or the Native backend, I get the mentioned lag. This cannot be due to the Flutter Texture widget or the framebuffer code as it happens in wxDart Native using pure OpenGL as well (macOS OpenGL 4.1). I considered that the Dart garbage collector was doing weird stuff, but when only changing the camera position and then calling render() I am not sure if many Dart objects are created at all.
I don't know which version of ThreeJS this Dart port used (as the basis for the fork, basically) but I am not if that is even relevant. So currently, I have no clue what the issue is and would appreciate any suggestions.

[Knightro63]

Hi @RobertRoeb,

I am using version r176 of the webgl part of three.js. I am unsure why it would be lagging. I use mostly macOS, iOS, and web for testing and they also seem to work the best for three_js. I know sometimes due to the conversion from JS to Dart there are some type cast issues or issues with typed data lists that do cause some issues. They are extremely hard to find for fixing. If you have an example send me a link and i will do some bug hunting to find and fix.

[RobertRoeb]

I profiled the code this evening. When looking away from the city, the frustum culling successfully removes most objects and the code only calls gl.bindTexture() on a few textures and calls gl.bindVertexArray() and gl.drawArrays() a few times to draw two houses - and then the frame rate is very high. As soon as I turn towards the city, the visible area (visible means in the view, it could be hidden behind a wall) contains nearly 400 textures and the code calls gl.bindVertexArray() and gl.drawArrays() up to 6000 times. Then, the frame rate sinks to 1/s While it is not surprising that the frame rate sinks with more stuff to draw, the exact same model (and indeed many objects walking around) keep a high frame rate when using pure Javascript ThreeJS in a browser on the same computer. Initially I feared that the code would incorrectly reload textures, but it does not.

[RobertRoeb]

Now I ran the city model with Flutter web, so the Dart code gets translated to Javascript and uses WebGL 2. This was much faster than compiled Dart code using OpenGL 4.1 directly - but much slower than the original Javascript version running in the same browser (using a much older version of ThreeJS).

[Knightro63]

Hi @RobertRoeb,

I have never been able to get three_js on web to run as fast as three.js. I think it has something to do with how it introduces layer upon layer of performance-heavy abstractions to make JavaScript code work inside Flutter's Dart-based ecosystem. I usually run it on wasm to give me more speed. To make it faster I would need to rewrite the web side to run using a js_interop but that would take time and only increase the speed moderately.

Eventually flutter will catch up on the we side to be more efficient.