feat: use Web Worker for OBJ loading to prevent UI blocking #7846
Conversation
jtydhr88
requested review from
a team,
KarryCharon,
Yorha4D and
shinshin86
as code owners
dosubot
bot
added
the
size:M
📝 WalkthroughWalkthroughIntroduces asynchronous 3D model loading via worker-based OBJ parsing and implements client-side file size validation. Adds wwobjloader2 dependency and replaces the synchronous OBJLoader with OBJLoader2Parallel to prevent UI blocking during large file processing. Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant Client
participant Validator as Upload Validator
participant Loader as OBJLoader2Parallel
participant Worker as Web Worker
User->>Client: Select file (> 100 MB)
Client->>Validator: uploadFile(file)
Validator->>Validator: Calculate size in MB
alt File exceeds MAX_UPLOAD_SIZE_MB
Validator->>Client: Return undefined
Client->>User: Show error toast
else File within limit
Validator->>Loader: Initialize OBJLoader2Parallel
Loader->>Loader: Configure worker URL
Loader->>Worker: Parse OBJ (non-blocking)
Worker->>Worker: Process geometry
Worker-->>Loader: Return parsed result
Loader-->>Client: Model ready
Client->>User: Load model in viewport
end
Pre-merge checks and finishing touches✅ Passed checks (2 passed)
✨ Finishing touches
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
🎨 Storybook Build Status✅ Build completed successfully! ⏰ Completed at: 01/05/2026, 03:27:33 AM UTC 🔗 Links🎉 Your Storybook is ready for review! |
🎭 Playwright Test Results⏰ Completed at: 01/05/2026, 03:32:29 AM UTC 📈 Summary
📊 Test Reports by Browser
🎉 Click on the links above to view detailed test results for each browser configuration. |
Bundle Size ReportSummary
Category Glance Per-category breakdownApp Entry Points — 3.23 MB (baseline 3.23 MB) • 🔴 +848 BMain entry bundles and manifests
Status: 3 added / 3 removed Graph Workspace — 1000 kB (baseline 1000 kB) • ⚪ 0 BGraph editor runtime, canvas, workflow orchestration
Status: 1 added / 1 removed Views & Navigation — 6.63 kB (baseline 6.63 kB) • ⚪ 0 BTop-level views, pages, and routed surfaces
Status: 1 added / 1 removed Panels & Settings — 300 kB (baseline 300 kB) • ⚪ 0 BConfiguration panels, inspectors, and settings screens
Status: 6 added / 6 removed UI Components — 193 kB (baseline 193 kB) • ⚪ 0 BReusable component library chunks
Status: 10 added / 10 removed Data & Services — 12.5 kB (baseline 12.5 kB) • ⚪ 0 BStores, services, APIs, and repositories
Status: 3 added / 3 removed Utilities & Hooks — 1.41 kB (baseline 1.41 kB) • ⚪ 0 BHelpers, composables, and utility bundles
Status: 1 added / 1 removed Vendor & Third-Party — 9.19 MB (baseline 9.12 MB) • 🔴 +72.5 kBExternal libraries and shared vendor chunks
Status: 6 added / 6 removed Other — 3.47 MB (baseline 3.47 MB) • 🔴 +4.69 kBBundles that do not match a named category
Status: 26 added / 25 removed |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 2
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
src/extensions/core/load3d/LoaderManager.ts (1)
173-201: Fix: Wrap the OBJ case in a block to restrict variable scope.The
objUrlconstant is declared in a switch case without block scope, which violates ES6 scoping rules and could allow other switch cases to erroneously access this declaration.🔎 Proposed fix
case 'obj': + { if (this.modelManager.materialMode === 'original') { try { this.mtlLoader.setPath(path) const mtlFileName = filename.replace(/\.obj$/, '.mtl') const materials = await this.mtlLoader.loadAsync(mtlFileName) materials.preload() const materialsFromMtl = MtlObjBridge.addMaterialsFromMtlLoader(materials) this.objLoader.setMaterials(materialsFromMtl) } catch (e) { console.log( 'No MTL file found or error loading it, continuing without materials' ) } } // OBJLoader2Parallel uses Web Worker for parsing (non-blocking) const objUrl = path + encodeURIComponent(filename) model = await this.objLoader.loadAsync(objUrl) model.traverse((child) => { if (child instanceof THREE.Mesh) { this.modelManager.originalMaterials.set(child, child.material) } }) break + }
📜 Review details
Configuration used: Organization UI
Review profile: ASSERTIVE
Plan: Pro
⛔ Files ignored due to path filters (1)
pnpm-lock.yamlis excluded by!**/pnpm-lock.yaml
📒 Files selected for processing (6)
package.jsonpnpm-workspace.yamlsrc/extensions/core/load3d/Load3dUtils.tssrc/extensions/core/load3d/LoaderManager.tssrc/extensions/core/load3d/interfaces.tssrc/locales/en/main.json
🧰 Additional context used
📓 Path-based instructions (7)
**/*.{ts,tsx,vue,js,jsx,json,css}
📄 CodeRabbit inference engine (AGENTS.md)
Apply Prettier formatting with 2-space indentation, single quotes, no trailing semicolons, and 80-character line width
Files:
package.jsonsrc/locales/en/main.jsonsrc/extensions/core/load3d/LoaderManager.tssrc/extensions/core/load3d/Load3dUtils.tssrc/extensions/core/load3d/interfaces.ts
src/**/*.{vue,ts}
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
src/**/*.{vue,ts}: Leverage VueUse functions for performance-enhancing styles
Implement proper error handling
Use vue-i18n in composition API for any string literals. Place new translation entries in src/locales/en/main.json
Files:
src/extensions/core/load3d/LoaderManager.tssrc/extensions/core/load3d/Load3dUtils.tssrc/extensions/core/load3d/interfaces.ts
src/**/*.ts
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
src/**/*.ts: Use es-toolkit for utility functions
Use TypeScript for type safety
Files:
src/extensions/core/load3d/LoaderManager.tssrc/extensions/core/load3d/Load3dUtils.tssrc/extensions/core/load3d/interfaces.ts
src/**/*.{ts,tsx,vue}
📄 CodeRabbit inference engine (src/CLAUDE.md)
src/**/*.{ts,tsx,vue}: Sanitize HTML with DOMPurify to prevent XSS attacks
Avoid using @ts-expect-error; use proper TypeScript types instead
Use es-toolkit for utility functions instead of other utility libraries
Implement proper TypeScript types throughout the codebase
Files:
src/extensions/core/load3d/LoaderManager.tssrc/extensions/core/load3d/Load3dUtils.tssrc/extensions/core/load3d/interfaces.ts
src/**/*.{vue,ts,tsx}
📄 CodeRabbit inference engine (src/CLAUDE.md)
Follow Vue 3 composition API style guide
Files:
src/extensions/core/load3d/LoaderManager.tssrc/extensions/core/load3d/Load3dUtils.tssrc/extensions/core/load3d/interfaces.ts
**/*.{ts,tsx,vue}
📄 CodeRabbit inference engine (AGENTS.md)
**/*.{ts,tsx,vue}: Use TypeScript exclusively; do not write new JavaScript code
Use sorted and grouped imports organized by plugin/source
Enforce ESLint rules including Vue + TypeScript rules, disallow floating promises, disallow unused imports, and restrict i18n raw text in templates
Do not useanytype oras anytype assertions; fix the underlying type issue instead
Write code that is expressive and self-documenting; avoid redundant comments and clean as you go
Keep functions short and functional; minimize nesting and follow the arrow anti-pattern
Avoid mutable state; prefer immutability and assignment at point of declaration
Use function declarations instead of function expressions when possible
Use es-toolkit for utility functions
Implement proper error handling in code
Files:
src/extensions/core/load3d/LoaderManager.tssrc/extensions/core/load3d/Load3dUtils.tssrc/extensions/core/load3d/interfaces.ts
**/*.{ts,tsx}
📄 CodeRabbit inference engine (AGENTS.md)
Minimize the surface area (exported values) of each module and composable
Files:
src/extensions/core/load3d/LoaderManager.tssrc/extensions/core/load3d/Load3dUtils.tssrc/extensions/core/load3d/interfaces.ts
🧠 Learnings (11)
📚 Learning: 2025-11-24T19:47:34.324Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: src/CLAUDE.md:0-0
Timestamp: 2025-11-24T19:47:34.324Z
Learning: Applies to src/**/{components,composables}/**/*.{ts,tsx,vue} : Use vue-i18n for ALL user-facing strings by adding them to `src/locales/en/main.json`
Applied to files:
package.json
📚 Learning: 2025-11-24T19:47:45.616Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: src/components/CLAUDE.md:0-0
Timestamp: 2025-11-24T19:47:45.616Z
Learning: Applies to src/components/**/*.{vue,ts,js} : Use vue-i18n for ALL UI strings
Applied to files:
package.json
📚 Learning: 2025-12-21T06:04:12.562Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-12-21T06:04:12.562Z
Learning: Applies to **/*.vue : Use `vue-i18n` in composition API for string literals; place new translation entries in `src/locales/en/main.json`
Applied to files:
package.json
📚 Learning: 2025-11-24T19:47:02.860Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-11-24T19:47:02.860Z
Learning: Applies to src/**/*.{vue,ts} : Use vue-i18n in composition API for any string literals. Place new translation entries in src/locales/en/main.json
Applied to files:
package.json
📚 Learning: 2025-12-09T04:35:43.971Z
Learnt from: christian-byrne
Repo: Comfy-Org/ComfyUI_frontend PR: 6300
File: src/locales/en/main.json:774-780
Timestamp: 2025-12-09T04:35:43.971Z
Learning: In the Comfy-Org/ComfyUI_frontend repository, locale files other than `src/locales/en/main.json` are generated automatically on every release. Developers only need to add English (en) key/values in `src/locales/en/main.json` when making PRs; manual updates to other locale files (fr, ja, ko, ru, zh, zh-TW, es, ar, tr, etc.) are not required and should not be suggested in reviews.
Applied to files:
src/locales/en/main.json
📚 Learning: 2025-12-09T03:39:54.501Z
Learnt from: DrJKL
Repo: Comfy-Org/ComfyUI_frontend PR: 7169
File: src/platform/remote/comfyui/jobs/jobTypes.ts:1-107
Timestamp: 2025-12-09T03:39:54.501Z
Learning: In the ComfyUI_frontend project, Zod is on v3.x. Do not suggest Zod v4 standalone validators (z.uuid, z.ulid, z.cuid2, z.nanoid) until an upgrade to Zod 4 is performed. When reviewing TypeScript files (e.g., src/platform/remote/comfyui/jobs/jobTypes.ts) validate against Zod 3 capabilities and avoid introducing v4-specific features; flag any proposal to upgrade or incorporate v4-only validators and propose staying with compatible 3.x patterns.
Applied to files:
src/extensions/core/load3d/LoaderManager.tssrc/extensions/core/load3d/Load3dUtils.tssrc/extensions/core/load3d/interfaces.ts
📚 Learning: 2025-12-13T11:03:11.264Z
Learnt from: christian-byrne
Repo: Comfy-Org/ComfyUI_frontend PR: 7416
File: src/stores/imagePreviewStore.ts:5-7
Timestamp: 2025-12-13T11:03:11.264Z
Learning: In the ComfyUI_frontend repository, lint rules require keeping 'import type' statements separate from non-type imports, even if importing from the same module. Do not suggest consolidating them into a single import statement. Ensure type imports remain on their own line (import type { ... } from 'module') and regular imports stay on separate lines.
Applied to files:
src/extensions/core/load3d/LoaderManager.tssrc/extensions/core/load3d/Load3dUtils.tssrc/extensions/core/load3d/interfaces.ts
📚 Learning: 2025-12-17T00:40:09.635Z
Learnt from: DrJKL
Repo: Comfy-Org/ComfyUI_frontend PR: 7537
File: src/components/ui/button/Button.stories.ts:45-55
Timestamp: 2025-12-17T00:40:09.635Z
Learning: Prefer pure function declarations over function expressions (e.g., use function foo() { ... } instead of const foo = () => { ... }) for pure functions in the repository. Function declarations are more functional-leaning, offer better hoisting clarity, and can improve readability and tooling consistency. Apply this guideline across TypeScript files in Comfy-Org/ComfyUI_frontend, including story and UI component code, except where a function expression is semantically required (e.g., callbacks, higher-order functions with closures).
Applied to files:
src/extensions/core/load3d/LoaderManager.tssrc/extensions/core/load3d/Load3dUtils.tssrc/extensions/core/load3d/interfaces.ts
📚 Learning: 2025-12-30T22:22:33.836Z
Learnt from: kaili-yang
Repo: Comfy-Org/ComfyUI_frontend PR: 7805
File: src/composables/useCoreCommands.ts:439-439
Timestamp: 2025-12-30T22:22:33.836Z
Learning: When accessing reactive properties from Pinia stores in TypeScript files, avoid using .value on direct property access (e.g., useStore().isOverlayExpanded). Pinia auto-wraps refs when accessed directly, returning the primitive value. The .value accessor is only needed when destructuring store properties or when using storeToRefs().
Applied to files:
src/extensions/core/load3d/LoaderManager.tssrc/extensions/core/load3d/Load3dUtils.tssrc/extensions/core/load3d/interfaces.ts
📚 Learning: 2025-12-11T12:25:15.470Z
Learnt from: christian-byrne
Repo: Comfy-Org/ComfyUI_frontend PR: 7358
File: src/components/dialog/content/signin/SignUpForm.vue:45-54
Timestamp: 2025-12-11T12:25:15.470Z
Learning: This repository uses CI automation to format code (pnpm format). Do not include manual formatting suggestions in code reviews for Comfy-Org/ComfyUI_frontend. If formatting issues are detected, rely on the CI formatter or re-run pnpm format. Focus reviews on correctness, readability, performance, accessibility, and maintainability rather than style formatting.
Applied to files:
src/extensions/core/load3d/LoaderManager.tssrc/extensions/core/load3d/Load3dUtils.tssrc/extensions/core/load3d/interfaces.ts
📚 Learning: 2025-12-09T03:40:02.262Z
Learnt from: DrJKL
Repo: Comfy-Org/ComfyUI_frontend PR: 7169
File: src/platform/remote/comfyui/jobs/jobTypes.ts:1-107
Timestamp: 2025-12-09T03:40:02.262Z
Learning: The ComfyUI_frontend project currently uses Zod 3 (^3.23.8 in catalog). Zod 4-specific features like standalone format validators (z.uuid(), z.ulid(), z.cuid2(), z.nanoid()) are not available and should not be suggested until after the project upgrades to Zod 4.
Applied to files:
pnpm-workspace.yaml
🧬 Code graph analysis (1)
src/extensions/core/load3d/Load3dUtils.ts (1)
src/platform/updates/common/toastStore.ts (1)
useToastStore(8-39)
🪛 Biome (2.1.2)
src/extensions/core/load3d/LoaderManager.ts
[error] 193-193: Other switch clauses can erroneously access this declaration.
Wrap the declaration in a block to restrict its access to the switch clause.
The declaration is defined in this switch clause:
Safe fix: Wrap the declaration in a block.
(lint/correctness/noSwitchDeclarations)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (5)
- GitHub Check: deploy-and-comment
- GitHub Check: setup
- GitHub Check: test
- GitHub Check: lint-and-format
- GitHub Check: collect
🔇 Additional comments (10)
src/locales/en/main.json (1)
1703-1703: LGTM! Localization string properly added.The new
fileTooLargetoast message follows the correct i18n pattern with appropriate placeholders for dynamic file size values. Per project guidelines, only the English locale file needs manual updates.pnpm-workspace.yaml (1)
107-107: LGTM! Catalog entry properly configured.The wwobjloader2 version constraint follows the project's catalog pattern correctly.
src/extensions/core/load3d/interfaces.ts (2)
8-8: LGTM! Import updated for worker-based OBJ loading.The import statement correctly references OBJLoader2Parallel from the wwobjloader2 library, which enables parallel/worker-based loading to prevent UI blocking.
182-182: No changes needed — The objLoader type change from OBJLoader to OBJLoader2Parallel is properly implemented and fully compatible.LoaderManager.ts correctly instantiates OBJLoader2Parallel, configures the web worker via setWorkerUrl(), and all usages (setMaterials, loadAsync) align with the new type. The implementation matches the interface definition without any breaking changes.
src/extensions/core/load3d/Load3dUtils.ts (2)
37-37: LGTM! File size limit constant properly defined.The 100 MB limit is reasonable and matches the PR's testing with a 97 MB file. Using a readonly constant is good practice for maintainability.
81-81: LGTM! Improved error logging with prefix.Adding the
[Load3D]prefix makes logs easier to filter and trace, improving debugging experience.package.json (1)
190-190: Version ^6.2.1 is the current latest stable release. No known security advisories found.src/extensions/core/load3d/LoaderManager.ts (3)
192-194: OBJLoader2Parallel.loadAsync API and file size validation confirmed.The code correctly uses
OBJLoader2Parallel.loadAsync(objUrl)which matches the standard three.js Loader pattern signatureloadAsync(url: string): Promise<Object3D>. File size validation (100 MB limit) is properly integrated at the upload stage inLoad3dUtils.validateFile()before URLs reachLoaderManager.loadModelInternal(). URL encoding withencodeURIComponentis correct.
182-184: No action needed—theMtlObjBridge.addMaterialsFromMtlLoaderAPI is correctly used and properly converts THREE's MTLLoader materials to the format expected byOBJLoader2Parallel.setMaterials, following the documented pattern in wwobjloader2 v6.2.1.
8-9: Remove non-existent setWorkerUrl() call and fix material method name.The wwobjloader2 library does not expose a
setWorkerUrl()method on OBJLoader2Parallel. The correct worker configuration usesgetWorkerExecutionSupport(),setExecuteParallel(), andsetPreferJsmWorker()methods instead. Lines 47-50 should be removed or replaced with the proper API.Additionally, line 184 should use
addMaterials()instead ofsetMaterials()to match the library's documented API:Suggested fix for material method
- this.objLoader.setMaterials(materialsFromMtl) + this.objLoader.addMaterials(materialsFromMtl)Likely an incorrect or invalid review comment.
benceruleanlu
left a comment
benceruleanlu
left a comment
There was a problem hiding this comment.
lgtm, small nit is just be careful of uploadFile's return type being any
|
|
||
| const fileSizeMB = file.size / 1024 / 1024 | ||
| if (fileSizeMB > this.MAX_UPLOAD_SIZE_MB) { | ||
| const message = t('toastMessages.fileTooLarge', { |
There was a problem hiding this comment.
nit: we moved to usei18n for t here, so the import might want changing
| console.warn( | ||
| '[Load3D] uploadFile: file too large', | ||
| fileSizeMB.toFixed(2), | ||
| 'MB' | ||
| ) | ||
| useToastStore().addAlert(message) |
There was a problem hiding this comment.
nit: all but one downstream caller handles undefined as well by showing their own toast, which causes a double toast ux annoyance on this case
Summary
reduce loading time for 97M obj from 9s to 3s
fix #7843
┆Issue is synchronized with this Notion page by Unito