Parallelize model loading

diff --git a/src/jvmMain/resources/static/init.js b/src/jvmMain/resources/static/init.js
index dda9919fa83fb3668995bed18d055e527b63206c..c1913ef7e39f353d77debe0b9bba10286b460652 100644 (file)
--- a/src/jvmMain/resources/static/init.js
+++ b/src/jvmMain/resources/static/init.js
@@ -219,58 +219,63 @@
                        (async () => {
                                await loadThree();
 
+                               const promises = [];
                                for (const canvas of canvases) {
                                        const modelName = canvas.getAttribute("data-model");
                                        if (modelName == null || modelName === "") continue;
 
-                                       const modelAsync = loadObj(modelName);
+                                       promises.push((async () => {
+                                               const modelAsync = loadObj(modelName);
 
-                                       const camera = new THREE.PerspectiveCamera(69, 1, 0.01, 1000.0);
+                                               const camera = new THREE.PerspectiveCamera(69, 1, 0.01, 1000.0);
 
-                                       const scene = new THREE.Scene();
-                                       scene.add(new THREE.AmbientLight("#555555", 1.0));
+                                               const scene = new THREE.Scene();
+                                               scene.add(new THREE.AmbientLight("#555555", 1.0));
 
-                                       const renderer = new THREE.WebGLRenderer({"canvas": canvas, "antialias": true});
+                                               const renderer = new THREE.WebGLRenderer({"canvas": canvas, "antialias": true});
 
-                                       const controls = new THREE.OrbitControls(camera, canvas);
+                                               const controls = new THREE.OrbitControls(camera, canvas);
 
-                                       function render() {
-                                               controls.update();
-                                               renderer.render(scene, camera);
-                                               window.requestAnimationFrame(render);
-                                       }
+                                               function render() {
+                                                       controls.update();
+                                                       renderer.render(scene, camera);
+                                                       window.requestAnimationFrame(render);
+                                               }
 
-                                       function onResize() {
-                                               const dim = canvas.getBoundingClientRect();
-                                               camera.aspect = dim.width / dim.height;
-                                               camera.updateProjectionMatrix();
-                                               renderer.setSize(dim.width, dim.height, false);
-                                       }
+                                               function onResize() {
+                                                       const dim = canvas.getBoundingClientRect();
+                                                       camera.aspect = dim.width / dim.height;
+                                                       camera.updateProjectionMatrix();
+                                                       renderer.setSize(dim.width, dim.height, false);
+                                               }
 
-                                       window.addEventListener('resize', onResize);
-                                       await frame();
-                                       onResize();
+                                               window.addEventListener('resize', onResize);
+                                               await frame();
+                                               onResize();
 
-                                       const model = await modelAsync;
-                                       scene.add(model);
+                                               const model = await modelAsync;
+                                               scene.add(model);
 
-                                       const bbox = new THREE.Box3().setFromObject(scene);
-                                       bbox.dimensions = {
-                                               x: bbox.max.x - bbox.min.x,
-                                               y: bbox.max.y - bbox.min.y,
-                                               z: bbox.max.z - bbox.min.z
-                                       };
-                                       model.position.sub(new THREE.Vector3(bbox.min.x + bbox.dimensions.x / 2, bbox.min.y + bbox.dimensions.y / 2, bbox.min.z + bbox.dimensions.z / 2));
+                                               const bbox = new THREE.Box3().setFromObject(scene);
+                                               bbox.dimensions = {
+                                                       x: bbox.max.x - bbox.min.x,
+                                                       y: bbox.max.y - bbox.min.y,
+                                                       z: bbox.max.z - bbox.min.z
+                                               };
+                                               model.position.sub(new THREE.Vector3(bbox.min.x + bbox.dimensions.x / 2, bbox.min.y + bbox.dimensions.y / 2, bbox.min.z + bbox.dimensions.z / 2));
 
-                                       camera.position.set(bbox.dimensions.x / 2, bbox.dimensions.y / 2, Math.max(bbox.dimensions.x, bbox.dimensions.y, bbox.dimensions.z));
+                                               camera.position.set(bbox.dimensions.x / 2, bbox.dimensions.y / 2, Math.max(bbox.dimensions.x, bbox.dimensions.y, bbox.dimensions.z));
 
-                                       const light = new THREE.PointLight("#AAAAAA", 1.0);
-                                       scene.add(camera);
-                                       camera.add(light);
-                                       light.position.set(0, 0, 0);
+                                               const light = new THREE.PointLight("#AAAAAA", 1.0);
+                                               scene.add(camera);
+                                               camera.add(light);
+                                               light.position.set(0, 0, 0);
 
-                                       render();
+                                               render();
+                                       })());
                                }
+
+                               await Promise.all(promises);
                        })().catch(reason => {
                                console.error("Error rendering models", reason);
                        });