Three.js: editor freezes for a moment after *every* change in it.

[jazznazz]

Description of the problem

I drag'n'drop a 3.2 mb FBX (created in 3ds max 2016), plus some 30 jpg textures with 256-2048 resolution. Every single time when I make a change in the scene, the editor freezes for several(tens of) seconds. The heavier the scene, the longer the freeze.

Browser

• [ ] All of them
• [x] Chrome
• [x] Firefox
• [ ] Internet Explorer

OS

• [ ] All of them
• [x] Windows
• [ ] macOS
• [ ] Linux
• [ ] Android
• [ ] iOS

Hardware Requirements (graphics card, VR Device, ...)

[mrdoob]

That's because autosave is on. The current autosave feature is not optimal (it serialises the whole scene graph).

[jazznazz]

Thanks for the fast replies !
Confirmed, it is the autosave . Maybe the default setting should be autosave = off for now?

[Usnul]

My 2 cents:

I used to have JSON serialization in my game engine, which was fine up to around 10Mb states, beyond that it started to really harm user experience when game was.. you guessed it: autosaving. I'm currently using a custom binary serialization scheme, which works 2 orders of magnitude faster and uses less space, which is a nice bonus. Not that editor is the most important part of three.js project, but it might be worth investigating some binary serialization schemes, like, say, avro.

I also found that writing a custom JSON -> string serializer helped a ton, if you can build a string incrementally as you go - it turned out about 3x faster, I don't really know why though.

Another avenue if to have record discrete changes and update save state incrementally.

Yet one more is do some heavy lifting in a Worker thread.

@jazznazz for your case, I'm guessing that texture serialization takes the most time.