Its possible to make scene static without wasting resources after rendering is finished?

Questions
,
1

I try to generate an image art with three.js using PerspectiveCamera…
in my scene i create many objects, let say 10000 meshes. it takes ~15 seconds to render the finished scene.

The problem is when its finished, everything is static, no movement of camera scene or anything else.
if you check the memory usage, it still wasting resources after the renderer is finished (even if i stop the animate function), and its very laggy, taking some 10,000mb of my memory even after renderer is finished (checking it in Task Manager)

Is there anything i can do to take the final scene and make it like “static image” to really reduce the memory usage to ~zero, while still seeing the output in the browser?
Or in other words, take the final output of camera scene as image, dispose of all the memory the program used before (erase everything), and only stay with the output as if its a texture/image.

2

If you want to save the output of the canvas as an image, and display it, you could do something like this:

const url = await new Promise((resolve) => {
  renderer.domElement.toBlob((blob) => resolve(URL.createObjectURL(blob)), 'image/png');
});

const img = document.createElement('img');
img.src = url;
document.body.appendChild(img);

Then you can dispose of the renderer and scene, freeing those resources.

1 Like
3

thanks for the reply, the problem is the memory is stll on high usage, i tried different stuff, the last one was this code provide here :
When to dispose: How to completely clean up a Three.js scene - #11 by trusktr

by trusktr.

it seems like it helps a little bit but still wasting memory -

Screenshot 2022-09-23 144116
Screenshot 2022-09-23 1441161317×468 133 KB

(from 4,000mb to 3,455bm chrome memory usage).

4

If you’re completely done rendering, I don’t think you have to mess with disposing of each geometry and material and texture. You can just dispose of the renderer itself. Delete any references to the scene and its contents, and they’ll be garbage collected after that.

1 Like
5

@Joe1 Yeah, like Don said, if you are completely done with the scene and dispose the renderer (or even just let go of all the references without disposing) everything will eventually be GC’d (garbage collected).

If you happened to look at the memory usage before GC, you may see higher usage up until GC happens.

In your screenshot it looks like you are looking at Chrome usage overall, for all your tabs and processes (18 of them). So this isn’t representative of your specific app. Take a look at your specific app’s memory.

Lastly, make sure your app itself is not holding onto any references after you are done.