vasturiano / 3d-force-graph

3D force-directed graph component using ThreeJS/WebGL
https://vasturiano.github.io/3d-force-graph/example/large-graph/
MIT License
4.67k stars 825 forks source link

WebGL context loss #595

Open Mush-A opened 1 year ago

Mush-A commented 1 year ago

Hello @vasturiano!

I sometimes encounter the WebGL context loss issue when rendering big graphs. It might be worth mentioning that the graphs have custom nodes and their `theta segments have been bumped to 16. Also, there is another ring object that is rendered to highlight these nodes (think of Saturn and its rings) in a special manner and they have been smoothed out to have a theta segment of 25. So admittedly there are a lot of segments that are loaded.

This webGL context loss thing occurs on some computers while it does not on others, I was wondering if you know what might be potentially causing this. I am guessing that it's simply because there's so much to render, but my knowledge is limited, and would love to have your opinion.

Thank you.

image

vasturiano commented 1 year ago

@Mush-A this tends to happen when the app you're running runs out of GPU resources and the WebGL crashes.

Depending on the volume/complexity of objects being added to the scene mixed with the hardware capabilities of the machine, it could be a sign of a memory leak if none of those two things seem too unusual or abnormal.

Are you by chance cycling through multiple objects in your custom node method? The resources of no longer used objects might need to be explicitly released if that's the case. If not that might slowly lead to the crash.

Mush-A commented 1 year ago

I actually dispose of the items when loading the next graph.

I checked with the memory snapshot in chrome's dev tools and it works. I load graphs worth 800mb+ and after disposing of them, it's pretty much all gone from the next snapshot.

My browser used to get stuck as memory accumulated from loading graphs upon graphs before disposing of the earlier graphs.

Now the issue seems to be different and I cannot figure out why exactly this occurs. This happens only on my colleague's device. What she described to me was that when she loads a big graph this issue occurs randomly. Funny thing is, I cannot reproduce the same error on the exact same replica of her device. I updated her graphics drivers too.

Does looping over Graph.graphData().nodes possibly cause any issues? I loop over them and check their distance from the camera for a particular feature.

vasturiano commented 1 year ago

I can't imagine that looping over the list of nodes and reading attributes has any effect on this.

Have you tried on a different browser on the same device where this happens?

Mush-A commented 1 year ago

Yeah, with firefox: image

I get this error on that device.

Mush-A commented 1 year ago

Hi @vasturiano. The threeJS version in the application was at r138, I updated it to the latest version and the error seems to be gone. This is undergoing further testing.