Remove parallelization to retain layer order

app/three/SceneView.ts

@@ -400,7 +400,7 @@ export class SceneView extends EventTarget {
       this._resetClippingBox();
     }
 
-    for (let i = 1; i < this._model.children.length; i++) {
+    for (let i = 0; i < this._model.children.length; i++) {
       const mesh = this._model.children[i];
 
       if (explode) {
@@ -452,12 +452,14 @@ async function init(container: HTMLElement, modelId = MODEL_ID) {
 
   const { renderer, scene, camera, controls } = buildScene(container, extent);
 
+  // Start render loop
+  renderer.setAnimationLoop(animate(() => {}));
+
   // Build the 3D model
-  const meshes = await buildMeshes(mappedFeatures);
   const model = new Group();
-  model.add(...meshes);
   model.name = "geologic-model";
   scene.add(model);
+  await buildMeshes(mappedFeatures, model);
 
   // Add a coordinate grid to the scene
   const { gridHelper, annotations } = buildCoordinateGrid(extent);
@@ -489,14 +491,11 @@ async function init(container: HTMLElement, modelId = MODEL_ID) {
   map.visible = false;
   scene.add(map);
 
+  // Update render loop to include topography
   const topography = scene.getObjectByName("Topography") as Mesh;
-  if (topography) {
+  renderer.setAnimationLoop(
-    renderer.setAnimationLoop(
+    animate(rendererCallback(camera, renderer, scene, map, extent, topography))
-      animate(
+  );
-        rendererCallback(camera, renderer, scene, map, extent, topography)
-      )
-    );
-  }
 
   return {
     scene,
@@ -514,10 +513,10 @@ function rendererCallback(
   scene: Scene,
   map: MapView,
   extent: Extent,
-  topography: Mesh
+  topography: Mesh | undefined
 ) {
   return () => {
-    if (topography.visible) {
+    if (topography && topography.visible) {
       map.lod.updateLOD(map, camera, renderer, scene);
       const tiles: TileData[] = [];
       traverse(map.root, extent, tiles);

app/three/utils/build-meshes.ts

@@ -2,6 +2,7 @@ import {
   BufferAttribute,
   BufferGeometry,
   DoubleSide,
+  Group,
   Mesh,
   MeshStandardMaterial,
 } from "three";
@@ -17,18 +18,18 @@ interface MappedFeature {
   preview: { legend_color: string; legend_text: string };
 }
 
-export async function buildMeshes(mappedFeatures: MappedFeature[]) {
+export async function buildMeshes(
-  const meshes = [];
+  mappedFeatures: MappedFeature[],
-  for (let i = 0; i < mappedFeatures.length; i++) {
+  model: Group
-    const layerData = mappedFeatures[i];
+) {
-    const mesh = await buildMesh(layerData);
+  for (const mappedFeature of mappedFeatures) {
-    if (layerData.name === "Topography") {
+    const mesh = await buildMesh(mappedFeature);
+    if (mappedFeature.name === "Topography") {
       mesh.visible = false;
     }
-    meshes.push(mesh);
-  }
 
-  return meshes;
+    model.add(mesh);
+  }
 }
 
 async function buildMesh(layerData: MappedFeature) {