Improve CAD loading performance with worker-based model parsing

src/hooks/useCadGeometry.ts

@@ -2,10 +2,12 @@ import { useEffect, useState } from "react"
 import {
   detectModelFormat,
   disposeModelObject,
+  fetchModelBuffer,
   parseModelFromBuffer,
   parseModelFromUnknownBuffer,
   parseModelFromUrl,
 } from "../lib/cad"
+import { parseModelFromBufferInWorker } from "../lib/cadWorker"
 import { getCadGeometryIdleMessage } from "../app/utils/modelSourceMessageUtils"
 import type { CadGeometryState, ModelSource } from "../app/types"
 
@@ -58,7 +60,7 @@ export function useCadGeometry(source: ModelSource): CadGeometryState {
 
     const controller = new AbortController()
     const loadGeometry = async () => {
-      if (source.kind === "url" && format) {
+      if (source.kind === "url" && (format === "gltf" || format === "glb")) {
         return {
           model: await parseModelFromUrl(source.value, format, {
             signal: controller.signal,
@@ -81,26 +83,41 @@ export function useCadGeometry(source: ModelSource): CadGeometryState {
       const buffer =
         source.kind === "file"
           ? await source.file.arrayBuffer()
-          : await fetch(source.value, { signal: controller.signal }).then(
-              async (response) => {
-                if (!response.ok) {
-                  throw new Error(`Failed to fetch model (${response.status})`)
+          : await fetchModelBuffer(source.value, {
+              signal: controller.signal,
+              onProgress: ({ loaded, total }) => {
+                if (disposed || controller.signal.aborted) {
+                  return
                 }
-
-                return response.arrayBuffer()
+                setState((current) => ({
+                  ...current,
+                  status: "loading",
+                  message: formatProgressMessage(formatLabel, loaded, total),
+                  progress: total && total > 0 ? loaded / total : null,
+                }))
               },
-            )
+            })
 
       if (format) {
-        if (source.kind === "file") {
+        if (format === "gltf" || format === "glb") {
           setState((current) => ({
             ...current,
             status: "loading",
             message: `Parsing ${formatLabel} model...`,
             progress: null,
           }))
+          return { model: await parseModelFromBuffer(buffer, format), format }
         }
-        return { model: await parseModelFromBuffer(buffer, format), format }
+
+        setState((current) => ({
+          ...current,
+          status: "loading",
+          message: `Parsing ${formatLabel} model off the main thread...`,
+          progress: null,
+        }))
+        return parseModelFromBufferInWorker(buffer, format, {
+          signal: controller.signal,
+        })
       }
 
       setState((current) => ({

src/lib/cad.ts

@@ -302,7 +302,7 @@ function throwIfAborted(signal: AbortSignal | undefined) {
   }
 }
 
-async function fetchModelBuffer(
+export async function fetchModelBuffer(
   url: string,
   { signal, onProgress }: ModelLoadOptions,
 ) {

src/lib/cadWorker.ts

@@ -0,0 +1,91 @@
+import * as THREE from "three"
+import type { LoadedModel, ModelFormat } from "./cad"
+import type {
+  ModelParserRequest,
+  ModelParserResponse,
+  SerializedLoadedModel,
+} from "../workers/modelParserTypes"
+
+interface WorkerParseOptions {
+  signal?: AbortSignal
+}
+
+function createAbortError() {
+  return new DOMException("Model parse aborted.", "AbortError")
+}
+
+function reviveLoadedModel(serialized: SerializedLoadedModel): LoadedModel {
+  const geometry = new THREE.BufferGeometryLoader().parse(
+    serialized.geometryJson,
+  )
+  const object = new THREE.ObjectLoader().parse(serialized.objectJson)
+  geometry.computeBoundingBox()
+  return {
+    geometry,
+    object,
+  }
+}
+
+export function parseModelFromBufferInWorker(
+  content: ArrayBuffer,
+  format: ModelFormat | null,
+  { signal }: WorkerParseOptions = {},
+): Promise<{ model: LoadedModel; format: ModelFormat }> {
+  if (signal?.aborted) {
+    return Promise.reject(createAbortError())
+  }
+
+  return new Promise((resolve, reject) => {
+    const worker = new Worker(
+      new URL("../workers/modelParser.worker.ts", import.meta.url),
+      { type: "module" },
+    )
+    let settled = false
+
+    const cleanup = () => {
+      signal?.removeEventListener("abort", onAbort)
+      worker.terminate()
+    }
+    const finish = (action: () => void) => {
+      if (settled) {
+        return
+      }
+      settled = true
+      cleanup()
+      action()
+    }
+    const onAbort = () => {
+      finish(() => reject(createAbortError()))
+    }
+
+    worker.addEventListener(
+      "message",
+      (event: MessageEvent<ModelParserResponse>) => {
+        const response = event.data
+        if (response.type === "error") {
+          finish(() => reject(new Error(response.message)))
+          return
+        }
+
+        finish(() =>
+          resolve({
+            model: reviveLoadedModel(response.model),
+            format: response.format,
+          }),
+        )
+      },
+    )
+    worker.addEventListener("error", (event) => {
+      finish(() => reject(new Error(event.message)))
+    })
+    signal?.addEventListener("abort", onAbort, { once: true })
+
+    worker.postMessage(
+      {
+        content,
+        format,
+      } satisfies ModelParserRequest,
+      [content],
+    )
+  })
+}

src/workers/modelParser.worker.ts

@@ -0,0 +1,50 @@
+import {
+  disposeModelObject,
+  parseModelFromBuffer,
+  parseModelFromUnknownBuffer,
+} from "../lib/cad"
+import type {
+  ModelParserRequest,
+  ModelParserResponse,
+  SerializedLoadedModel,
+} from "./modelParserTypes"
+
+function serializeLoadedModel(
+  model: Awaited<ReturnType<typeof parseModelFromBuffer>>,
+): SerializedLoadedModel {
+  return {
+    geometryJson: model.geometry.toJSON(),
+    objectJson: model.object.toJSON(),
+  }
+}
+
+self.addEventListener(
+  "message",
+  async (event: MessageEvent<ModelParserRequest>) => {
+    try {
+      const { content, format } = event.data
+      const result = format
+        ? {
+            model: await parseModelFromBuffer(content, format),
+            format,
+          }
+        : await parseModelFromUnknownBuffer(content)
+      const serialized = serializeLoadedModel(result.model)
+
+      result.model.geometry.dispose()
+      disposeModelObject(result.model.object)
+
+      self.postMessage({
+        type: "success",
+        format: result.format,
+        model: serialized,
+      } satisfies ModelParserResponse)
+    } catch (error: unknown) {
+      self.postMessage({
+        type: "error",
+        message:
+          error instanceof Error ? error.message : "Failed to parse model.",
+      } satisfies ModelParserResponse)
+    }
+  },
+)

src/workers/modelParserTypes.ts

@@ -0,0 +1,22 @@
+import type { ModelFormat } from "../lib/cad"
+
+export interface SerializedLoadedModel {
+  geometryJson: unknown
+  objectJson: unknown
+}
+
+export interface ModelParserRequest {
+  content: ArrayBuffer
+  format: ModelFormat | null
+}
+
+export type ModelParserResponse =
+  | {
+      type: "success"
+      format: ModelFormat
+      model: SerializedLoadedModel
+    }
+  | {
+      type: "error"
+      message: string
+    }

vite.config.js

@@ -2,6 +2,9 @@ import { defineConfig } from "vite"
 import react from "@vitejs/plugin-react"
 export default defineConfig({
   plugins: [react()],
+  worker: {
+    format: "es",
+  },
   build: {
     rollupOptions: {
       output: {

vite.config.ts

@@ -3,6 +3,9 @@ import react from "@vitejs/plugin-react"
 
 export default defineConfig({
   plugins: [react()],
+  worker: {
+    format: "es",
+  },
   build: {
     rollupOptions: {
       output: {