Optimize 3D asset loading and rendering performance

[Copilot]

Reduces initial load time and improves rendering performance, particularly on mobile devices and high-DPI displays.

Resource Loading

• Draco decoder via CDN: Switched from local /draco/ to https://www.gstatic.com/draco/versioned/decoders/1.5.6/ for cross-site caching
• Progress tracking: GLTF loader now emits progress events with division-by-zero protection
• Error handling: Added error callbacks for asset load failures
• Performance timing: Wrapped asset loading with console.time/timeEnd for diagnostics

this.loaders['gltfLoader'].load(
    asset.path,
    (file) => { /* success */ },
    (xhr) => {
        if (xhr.total > 0) {
            this.emit("progress", { asset: asset.name, progress: (xhr.loaded / xhr.total) * 100 });
        }
    },
    (error) => { console.error(`Error loading ${asset.name}:`, error); }
);

Renderer Optimizations

• Mobile detection: Antialias disabled on mobile via user agent check
• Power preference: WebGLRenderer now requests high-performance GPU
• Shadow performance: Changed from VSMShadowMap to PCFSoftShadowMap
• Pixel ratio clamping: Extracted to getOptimalPixelRatio(), capped at 2 to prevent excessive resolution on high-DPI displays

Memory Management

• Disposal method: Added Room.dispose() to clean up geometries and materials
• Type-safe traversal: Checks for THREE.Mesh instances before accessing geometry/material properties

Original prompt

Problem Statement

The PersonalWebsite currently loads 3D models but could benefit from performance optimizations to reduce loading time and improve user experience.

Required Changes

1. Optimize Resource Loader (person-website/Experience/Utils/Resource.ts)

Add progress tracking and error handling:

• Add a progress callback to the GLTF loader to track loading progress
• Add error handling callback for failed loads
• Emit progress events that can be used by the preloader
• Add performance timing measurements to track actual load times

Use CDN for Draco decoder:

• Update the Draco decoder path from local /draco/ to Google's CDN: https://www.gstatic.com/draco/versioned/decoders/1.5.6/
• This enables better caching across websites and potentially faster loading

Example structure:

startLoading() {
    for (const asset of this.assets) {
        if (asset.type === "glbModel") {
            console.time(`Loading ${asset.name}`);
            this.loaders['gltfLoader'].load(
                asset.path,
                (file) => {
                    console.timeEnd(`Loading ${asset.name}`);
                    this.singleAssetLoaded(asset, file);
                },
                (xhr) => {
                    const progress = (xhr.loaded / xhr.total) * 100;
                    this.emit("progress", { asset: asset.name, progress });
                },
                (error) => {
                    console.error(`Error loading ${asset.name}:`, error);
                }
            );
        }
        // ... rest of the loading logic
    }
}

2. Optimize Renderer Settings (person-website/Experience/Renderer.ts)

Improve renderer performance:

• Add powerPreference: "high-performance" to WebGLRenderer options
• Make antialias conditional based on device capabilities (disable on mobile for better performance)
• Change shadow map type from THREE.VSMShadowMap to THREE.PCFSoftShadowMap for better performance
• Add pixel ratio clamping (already present, but ensure it's optimal)

Example:

setRenderer() {
    const isMobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
    
    this.renderer = new THREE.WebGLRenderer({
        canvas: this.canvas,
        antialias: !isMobile, // Disable on mobile for performance
        powerPreference: "high-performance",
    });

    this.renderer.toneMapping = THREE.LinearToneMapping;
    this.renderer.toneMappingExposure = 1.5;
    this.renderer.shadowMap.enabled = true;
    this.renderer.shadowMap.type = THREE.PCFSoftShadowMap; // Better performance than VSM
    this.renderer.setSize(this.sizes.width, this.sizes.height);
    this.renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
}

3. Add Geometry Optimization Utilities (person-website/Experience/World/Room.ts)

Optimize model loading:

• Add disposal of geometries and materials when not needed
• Add comments about merging static geometries for future optimization
• Ensure proper cleanup to prevent memory leaks

Add a dispose method:

dispose() {
    this.actualRoom.traverse((child) => {
        if (child.geometry) {
            child.geometry.dispose();
        }
        if (child.material) {
            if (Array.isArray(child.material)) {
                child.material.forEach(material => material.dispose());
            } else {
                child.material.dispose();
            }
        }
    });
}

4. Improve Video Texture Loading (person-website/Experience/Utils/Resource.ts)

Optimize video texture settings:

• Add preload="metadata" to video elements to load only metadata initially
• Consider lazy loading videos until they're actually needed
• Add error handling for video loading failures

5. Add Performance Monitoring

Track and log performance metrics:

• Add timing for total asset loading
• Track individual asset load times
• Emit events that can be displayed in the preloader UI

Success Criteria

• Progress tracking events are emitted during model loading
• Draco decoder uses CDN instead of local files
• Renderer has performance optimizations (powerPreference, conditional antialias)
• Shadow map type is changed to PCFSoftShadowMap
• Error handling is added to asset loading
• Performance timing logs are added for debugging
• Code includes helpful comments for future optimizations
• Mobile devices get optimized renderer settings

Additional Recommendations for Manual Implementation

The following optimizations should be done manually in Blender/design tools:

• Reduce polygon count of the room model
• Compress and resize textures to appropriate dimensions (1024x1024 or smaller)
• Export with Draco compression enabled
• Remove unused materials and objects from the model

Testing

After implementation:

1. Test on desktop browsers (Chrome, Firefox, Safari)
2. Test on mobile devices
3. Monito...

This pull request was created from Copilot chat.

---

✨ Let Copilot coding agent set things up for you — coding agent works faster and does higher quality work when set up for your repo.

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
eddie-yang-personal-website	Ready	Preview, Comment	Feb 13, 2026 7:30am