Forge Viewer大模型加载触发WebGL context Lost错误解决方法

基于Forge Viewer加载约1GB大小的SVF1 urn格式模型，运行一段时间后通过编程方式控制查看器导航至不同视角位置时，会触发WebGL context Lost报错。应用加载其他urn资源前已执行viewer.finish()完成清理，但该错误在Chrome、Firefox浏览器中运行一段时间后仍会反复出现，需要无需重载查看器即可处理该错误的可行方案，后续业务还需加载2GB及以上体积的更大模型。

报错参考截图：

视角导航逻辑 #

SetNavigation(x1, x2, y1, y2, z1, z2) {
      this.viewer.navigation.setView({ x: x1, y: y1, z: z1 }, { x: x2, y: y2, z: z2 });
      this.viewer.navigation.toPerspective();
      this.viewer.navigation.setVerticalFov(75, true);
      this.viewer.getCamera().perspectiveCamera.zoom=0.5;
      this.viewer.navigation.setIsLocked(true);
      (<HTMLInputElement>document.getElementById("toolbar-bimWalkTool")).click();
};

模型切换清理逻辑 #

this.viewer.finish();
this.viewer = null;
Autodesk.Viewing.shutdown();

• 内置上下文丢失自动恢复逻辑
  无需重载查看器，直接在初始化阶段绑定官方提供的上下文丢失/恢复事件，异常触发时自动暂停任务、恢复后自动重绘场景：

  // viewer初始化完成后绑定
  viewer.addEventListener(Autodesk.Viewing.WEBGL_CONTEXT_LOST_EVENT, () => {
      viewer.impl.pauseRendering();
      if (viewer.model?.getInstanceTree()) viewer.model.getInstanceTree().stopLoading();
      viewer.setNavigationLock(true);
  });
  
  viewer.addEventListener(Autodesk.Viewing.WEBGL_CONTEXT_RESTORED_EVENT, () => {
      viewer.impl.resumeRendering();
      viewer.impl.invalidate(true, true, true);
      viewer.setNavigationLock(false);
  });
  

• 修正资源清理逻辑
  现有清理顺序会导致WebGL纹理、几何缓存无法被垃圾回收，长时间运行显存溢出是触发上下文丢失的核心原因，且非完全退出场景不要调用Autodesk.Viewing.shutdown()，该方法会清空全局共享资源池反而导致资源残留。正确清理逻辑如下：

  // 切换模型前执行
  if (viewer?.model) {
      viewer.impl.unloadModel(viewer.model);
      viewer.impl.releaseAllWebGLResources();
  }
  if (viewer) {
      viewer.finish();
      viewer = null;
  }
  

• 配置大模型显存优化参数
  初始化Viewer时传入内存限制配置，从根源降低显存溢出概率，可适配后续2GB以上大模型加载需求：

  const initConfig = {
      memory: {
          limit: 1536, // 显存占用上限，单位MB，可根据设备配置调整为1024~2048
          gcThreshold: 0.8, // 显存占用达80%时自动回收不可见资源
          pageOut: true // 开启视锥外几何自动换出内存
      },
      loaderExtensions: {
          svf: { enableStreaming: true } // 开启SVF流式加载，避免全量几何一次性载入显存
      }
  };
  Autodesk.Viewing.Initializer(initConfig, () => {
      // 后续viewer初始化逻辑
  });
  

• 优化视角导航逻辑
  现有代码直接修改底层Three.js相机属性、设置参数后再触发漫游工具，会导致短时间内重复触发全场景重绘，显存占用突增容易触发上下文丢失，调整为调用官方API操作，减少不必要的重绘：

  SetNavigation(x1, x2, y1, y2, z1, z2) {
      // 优先激活漫游工具，避免后续参数修改触发重复渲染
      const bimWalk = viewer.toolController.getTool('bimwalk');
      if (!bimWalk.isActive()) viewer.toolController.activateTool('bimwalk');
  
      this.viewer.navigation.setView({ x: x1, y: y1, z: z1 }, { x: x2, y: y2, z: z2 });
      this.viewer.navigation.toPerspective();
      this.viewer.navigation.setVerticalFov(75, true);
      this.viewer.navigation.setZoom(0.5); // 替换直接修改perspectiveCamera.zoom的逻辑
      this.viewer.navigation.setIsLocked(true);
  };
  

内容的提问来源于stack exchange，提问作者debanjali