Enhance WebGL error handling and optimize drag preview performance

[eloiberlinger1]

No description provided.

[gemini-code-assist]

Code Review

This pull request introduces several performance optimizations and error-handling improvements to the 3D editor canvas. Key changes include caching the scene mesh list and reusing Three.js objects in useDragPreview to avoid per-frame allocations, introducing a DragPreviewGate to prevent idle frame loops, adding a WebGL availability check and error boundary, and refactoring ModelViewer to clone scenes only once per GLB load. The reviewer identified a critical memory leak in ModelViewer where newly created WebGL materials are never disposed, and provided a comprehensive code suggestion to clean up these resources upon unmount or scene changes.

Important

The consumer version of Gemini Code Assist on GitHub is being sunset. Starting June 18, 2026, new organization installations will be blocked, and all code review activity will officially cease on July 17, 2026.
For more details on the timeline and next steps, please review the Help Documentation.

[gemini-code-assist]

Memory Leak: Newly created WebGL materials are never disposed

In Three.js, custom materials (ShaderMaterial and MeshStandardMaterial) allocate GPU resources that must be manually freed by calling .dispose().

Currently, when scene changes, clonedScene is re-evaluated, and materialsRef.current is overwritten with a fresh array, leaking the previously created materials in GPU memory. Additionally, when the component unmounts, the active materials are also leaked.

To fix this, we can return both the clonedScene and the list of materials from useMemo, and clean them up in a useEffect that runs whenever the active materials list changes or the component unmounts. This ensures proper garbage collection of WebGL resources.

  // Clone the scene ONCE per GLB load.
  // color and coloredTexture are intentionally NOT listed as deps here.
  const { clonedScene, materials } = useMemo(() => {
    const clone = scene.clone();
    const materialsList: MaterialEntry[] = [];

    let lastTexture: THREE.Texture | null = null;

    clone.traverse((child) => {
      if (!(child instanceof THREE.Mesh) || !child.material) return;

      const originalMat = child.material;
      let texture: THREE.Texture | null = null;

      if (Array.isArray(originalMat)) {
        for (const mat of originalMat) {
          const stdMat = mat as THREE.MeshStandardMaterial;
          if (stdMat.map) {
            texture = stdMat.map;
            break;
          }
        }
      } else {
        texture = (originalMat as THREE.MeshStandardMaterial).map ?? null;
      }
      // Fall back to a texture from a sibling mesh (same GLB can share textures)
      if (!texture && lastTexture) texture = lastTexture;
      if (texture) lastTexture = texture;

      const shaderMat = texture
        ? createRecolorMaterial(texture, colorRef.current ?? "#ffffff")
        : null;
      const plainMat = new THREE.MeshStandardMaterial({
        roughness: 0.7,
        metalness: 0.1,
        side: THREE.DoubleSide,
      });

      materialsList.push({ mesh: child, shaderMat, plainMat, originalMat });
    });

    // Apply the current color synchronously so the very first frame is correct
    applyMaterials(materialsList, colorRef.current, coloredTextureRef.current);

    return { clonedScene: clone, materials: materialsList };
  }, [scene]); // ← only re-runs when the GLB itself changes

  // Keep materialsRef in sync with the current active materials
  materialsRef.current = materials;

  // Clean up WebGL materials to prevent GPU memory leaks
  useEffect(() => {
    return () => {
      for (const entry of materials) {
        entry.shaderMat?.dispose();
        entry.plainMat.dispose();
      }
    };
  }, [materials]);

  // On subsequent color / mode changes: update uniforms only — no scene clone
  useLayoutEffect(() => {
    applyMaterials(materialsRef.current, color, coloredTexture);
  }, [color, coloredTexture, clonedScene]);

[Copilot]

Pull request overview

This PR improves the editor’s runtime robustness and interaction performance by adding WebGL availability/error handling around the main R3F canvas, and by reducing per-frame allocations/work in drag preview and GLB recoloring.

Changes:

• Optimizes drag preview raycasting by caching scene meshes per drag and reusing Three.js objects; reduces DOM layout work via cached canvas bounds.
• Refactors ModelViewer to avoid cloning scenes on every color/mode change by caching per-mesh materials and updating via uniform/property mutation.
• Adds a WebGL availability check + error boundary with a UI fallback to keep the rest of the editor usable when WebGL fails.

Reviewed changes

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

File	Description
frontend/src/features/editor/components/useDragPreview.ts	Reuses Raycaster/Vector2, caches raycast mesh list per drag, and caches canvas bounds for faster per-frame raycasting.
frontend/src/features/editor/components/ModelViewer.tsx	Avoids repeated scene.clone() on color changes by caching materials and updating uniforms/material props.
frontend/src/features/editor/components/MainCanvas.tsx	Adds WebGL detection/error boundary + fallback UI and gates drag preview mounting while dragging.
frontend/package-lock.json	Updates frontend dependency lockfile to newer versions.

---

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