[FIX] Allow scene to load even with warnings

[willeastcott]

Fixes #324

viewer-errors.mp4

Overview

This PR improves the model-viewer's handling of missing external resources (textures and buffer files) when loading glTF models. Previously, the viewer would show an ambiguous error and fail to display the model. Now it provides meaningful error messages and, where possible, continues to display the model with placeholder textures.

Changes

Graceful Texture Loading

• Models now load successfully even when external textures are missing
• Missing textures are replaced with a magenta placeholder (2x2 pixels) to clearly indicate which parts of the model are affected
• Texture loading warnings are collected and displayed to the user
• All warnings are also logged to the browser console for full details

Warning UI

• Added new warning notification box that appears when textures fail to load
• Shows up to 5 warnings with a "...and X more" summary for larger counts
• Dismissible via OK button
• Styled consistently with the main UI panel

Improved Error Messages

• Missing .bin buffer files now show helpful context-aware error messages:
  • When dragging a single .gltf file: suggests dragging the parent folder instead
  • When dragging a folder with missing files: indicates which .bin file is missing
• Added error handling for buffer file load failures

UI Improvements

• Redesigned error and warning boxes to match the left panel styling
• Both error and warning boxes are now dismissible with an OK button
• Consistent font styling (12px body, 14px bold titles)
• Orange color for warnings, red for errors

Files Changed

• src/viewer.ts - Added texture/buffer error handling with placeholder textures and meaningful error messages
• src/types.ts - Added warnings property to UI state
• src/ui/errors.tsx - Added WarningsBox component, made ErrorBox dismissible
• src/ui/index.tsx - Integrated WarningsBox component
• src/style.scss - Added styling for warning/error containers

Testing

1. Drag a .gltf file with missing textures → Model displays with magenta placeholders, warning shown
2. Drag a .gltf file without its .bin file → Helpful error message about dragging the folder
3. Drag a folder with .gltf but missing .bin → Error message about missing buffer file
4. Click OK on error/warning boxes → Dismisses the notification

I confirm I have signed the Contributor License Agreement.

[Copilot]

Pull request overview

This PR enhances the model viewer's error handling by allowing glTF models to load even when some external resources (textures) are missing, replacing them with magenta placeholder textures. It also provides more contextual error messages for missing buffer files and adds a dismissible warning UI to inform users about non-critical issues during model loading.

• Implemented graceful texture loading with placeholder fallbacks for missing or failed texture loads
• Added warning collection and display mechanism with a new WarningsBox UI component
• Improved error messages for missing buffer files with context-aware guidance (single file vs folder drag)

Reviewed changes

Copilot reviewed 5 out of 5 changed files in this pull request and generated 2 comments.

Show a summary per file

File	Description
src/viewer.ts	Added placeholder texture creation for missing/failed textures, enhanced error messages for buffer files, and integrated warning collection throughout the glTF loading pipeline
src/types.ts	Added optional warnings array to UI state for non-critical loading issues
src/ui/errors.tsx	Made ErrorBox dismissible and added new WarningsBox component with similar styling and dismiss functionality
src/ui/index.tsx	Integrated both ErrorBox and WarningsBox components with proper prop passing
src/style.scss	Added consistent container-based styling for both error and warning boxes, improved CSS selector specificity for title styling

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[slimbuck]

sweeeeeeet! <3

[aglitchman]

Many thanks!!