Three.js obj model loading freezes the Canvas until load is complete

Questions
,
1

Hi all. Here’s a simple code snippet:

                var manager = new THREE.LoadingManager();
				manager.onStart = function ( url, itemsLoaded, itemsTotal ) {

					console.log( 'Started loading file: ' + url + '.\nLoaded ' + itemsLoaded + ' of ' + itemsTotal + ' files.' );

				};

				manager.onLoad = function ( ) {

					console.log( 'Loading complete!');

				};


				manager.onProgress = function ( url, itemsLoaded, itemsTotal ) {

					console.log( 'Loading file: ' + url + '.\nLoaded ' + itemsLoaded + ' of ' + itemsTotal + ' files.' );

				};

				manager.onError = function ( url ) {

					console.log( 'There was an error loading ' + url );

				};

				var loader = new THREE.OBJLoader( manager );
				loader.load( PATH_TO_MY_OBJ, function ( object ) {

					console.log("ADD IT");

				} );

During the loading phase, the entire canvas freezes. This is a really big problem as I am loading models in on the fly – which locks up and makes the client lag.

How do I fix? I tried promises, they also didn’t work… HELP!

See for reference:

You can see the problem here: three.js webgl - OBJLoader2 usage options – if you load the page and try scrolling as the models load, you will notice a small lag – how to solve? Actually this could be the answer… there is a small 0.1 second lag… which is awful.

https://kaisalmen.de/proto/test/wwparallels/main.src.html

This is a more advanced version… Still suffers the same problem.

2

Using glTF instead of OBJ will eliminate a considerable amount of the parsing time. But even if you reduce the parsing overhead via glTF, there are other factors which influence the mentioned delay when rendering an asset for the first time. Especially the texture upload and the shader program compilation will cause overhead and thus large frame times. You can mitigate this overhead in various ways. The usage of ImageBitmap or texture compression is one option to speed up the texture upload.

However, I recommend you start with glTF and see how satisfying the performance will be.

BTW: Using promises does not help to unblock the main thread. It’s just a more elegant option for asynchronous programming.

1 Like
3

Ughhhh this sucks, I have 600+ models I JUST spent a month building as obj.

So I will need to convert them now… Why is there no warning that “OBJ is very slow, use X or Y instead”.

Frig.

Update: My mistake, ThreeJS recommends it fully: https://threejs.org/docs/#manual/en/introduction/FAQ

Update2: Ughhh need to use GLTF version two? https://discourse.threejs.org/t/uncaught-typeerror-cannot-read-property-extracturlbase-of-undefined-at-gltfloader-load/2922

Update 3: Okay, I have GLTF version 2 loading in models, there is the same problem – it lags.

image

After about a full minute, loading in 100 models, it renders…

image

                var gltfLoader = new THREE.GLTF2Loader();

				gltfLoader.load(websiteUrl() + object.assetPath + object.assetObj, (gltf) => {
					
					var object_sprite = gltf.scene;
					
					if(object.type=="ships"){
                    	object_sprite.position.z = 1005;
					}

					if(object.type=="planets"){
                    	object_sprite.position.z = object.z;
						object_sprite.scale.z = 100;
					}

					if(object.type=="cities" ){
						object_sprite.rotation.y = 90;
					}

					if(object.type=="asteroids"){
						object_sprite.rotation.x = Math.floor(Math.random() * 360) + 1;
						object_sprite.rotation.y = Math.floor(Math.random() * 360) + 1;
						object_sprite.rotation.z = Math.floor(Math.random() * 360) + 1;
					}

                    object_sprite.position.y = Number(object.x);
                    object_sprite.position.x = Number(object.y);

                    object_sprite.name = theIdOrArray;

					scene.add(object_sprite);
					scene_objects.push( object_sprite );

				});

Update 4: There is a problem loading multiple models in the library, remove console.time to fix: https://discourse.threejs.org/t/gltfloader-timer-warning-on-multiple-models/2327/2

Update 5: WOW I THINK ITS WORKING? The load time is super fast, but my models aren’t showing up – I need to rebuild some code…

1 Like
4

PROBLEM SOLVED

Much thanks to @donmccurdy on this thread: https://discourse.threejs.org/t/gltfloader-oop-pattern/4147/9 and a few others

My game now loads damn near instantly with HUNDREDS of models. This is absolutely amazing.

Don – that object caching thing you did… mind blowing in it’s power in simplicity. Thank you a thousand times over.

image

2 Likes