Hello, I’ve been working on a Three.js project for a few years now and I’m having a performance issue as of late. Currently in my scene I have about 100 geometries that are static. Then I have a dynamic geometry and it’s vertices are updated every animation frame. I’ve spent the past 8 hours pouring through chrome console testing the performance and have narrowed down the cause of the problem to one function. copyVector3sArray() For about the first 1700 versions of copyVector3sArray the total ms needed to complete the task ( copying 156000 vectors ) takes about 3ms. After about 20 seconds and by about the 1750ith version of BufferAttributes does the total ms needed to copy the same number of vectors( 156000 ) skyrocket to over 30ms. As a consequence my fps drop below 30. I should mention that I don’t have any BufferGeometry in my scene, but rather I believe the BufferAttributes is being called by the renderer during each animation frame.
So to recap, I get great fps for about 20 seconds, then the function copyVector3sArray slows right down doing the same thing it was doing for the previous 20 seconds and the frame rate drops below 30.
I’m using the latest version of Chrome and three.js version 87.
I don’t think I can unfortunately. not simple at least.
So what I’ve created is a world made up of 68 unique geometries, all fit together to make a planet. Then on the planet I have 1000 copies of the same geometry of a man randomly scattered across the planet. However all the copies are merged into one large mesh and the vertices of that mesh are updated to reflect the individual movement of each man. Now two months ago I could run this program with 5000 copies of the same man and run it for an extended period of time and have no performance loss. Each man moving along it’s own path. However, I don’t know if it was a chrome update, or me updating my threejs or what, but now ( a couple month later ) the performance dies fast. I can’t even run it with 200 copies of the man anymore. I’m at a complete loss.
if I comment out mesh.geometry.verticesNeedUpdate = true then the men no longer move and I have no performance issues. But once I include the code the code runs fine for about 20 seconds and then spikes.
I know it’ probably really hard on your end to try and answer my question without a working example. I have no idea what to do. All I can think of is image a large geometry made of 100,000 faces and each vertices is being updated each animation frame. For the first 1700 iterations of the code the update takes place smoothly, then it dies. Could it be my laptop? I notice that when the performance drop my laptop begins working harder.
In this next photo I actually capture the exact frame when it all goes downhill. you see the better performance of the left and then the poor performance on the right. Minor GC (garbage collection I assume) takes place right before the performance drops.
Yeah I went back to version 84 and tested it. The problem is still there. I think it’s a chrome update. Unfortunately when I look at the timeline and see were all the performance lagging takes place it’s all in functions that I didn’t create myself, so I’m at a loss. And if every time google updates this project just runs risks of no longer working properly then I’ve got things to think about. Unless there is something I’m overlooking, like a flag or something… no idea.
I’ve even went into threejs 87 and added my own window.performance.now() function call within the copyVector3sArray to monitor how long the function takes to execute, and it will literally take 30 ms, odd.
EDIT: o.k, I now know it is a browser issue. When I load up the content of the page on a new tab and let it run it will begin to experience performance issues after about 20 seconds. However, if I then refresh the page instead of closing and reopening a tab, then let the page load the issue goes away. wtf?
I mean have you tested the performance issue that you think is a Chrome bug in other browsers? If it’s just happening in Chrome then you should open a Chromium bug report, but if it’s happening in multiple browsers then the issue is probably either with three.js or your app.
Try on earlier versions of Chrome. They made some significant changes to the Javscript implementation - some that actually broke the system ( I found a reproducible error in Array.prototype.map).
