如何在挂载/卸载的组件间复用WebGL上下文？

完全可以实现你的需求，不过WebGL标准里并没有所谓的“分离式上下文”概念，我们可以通过离线Canvas+全局上下文复用的思路来达成目标，核心是把WebGL上下文和组件内的Canvas元素解耦，让上下文脱离组件生命周期独立存在。

核心逻辑 #

• 提前创建一个全局（或单例）的离线Canvas对象，在应用初始化时就获取它的WebGL2上下文，这个上下文会一直保存在内存中，不会随组件卸载被销毁。
• 当<GameCanvas />或<PlayerCanvas />挂载时，将组件内的Canvas作为“显示载体”，把离线Canvas的渲染内容同步到这个载体上；同时同步尺寸，保证渲染适配。
• 组件卸载时，只销毁当前组件内的Canvas元素，全局的离线Canvas和WebGL上下文保留不动，下次组件挂载时直接复用。

具体实现步骤 #

1. 创建全局WebGL上下文单例 #

// webglContext.js - 全局单例模块
let glContext = null;
let offscreenCanvas = null;

export function getWebGLContext() {
  if (!glContext) {
    offscreenCanvas = document.createElement('canvas');
    glContext = offscreenCanvas.getContext('webgl2');
    // 这里可以一次性初始化WebGL的着色器、缓冲区等基础资源
  }
  return glContext;
}

export function getOffscreenCanvas() {
  return offscreenCanvas;
}

2. 组件内复用上下文并同步渲染 #

以React组件为例（其他框架逻辑类似）：

import { getWebGLContext, getOffscreenCanvas } from './webglContext.js';

function GameCanvas() {
  const canvasRef = useRef(null);

  useEffect(() => {
    const canvas = canvasRef.current;
    const gl = getWebGLContext();
    const offscreenCanvas = getOffscreenCanvas();
    const ctx2d = canvas.getContext('2d');

    // 同步组件Canvas的尺寸到离线Canvas
    const syncSize = () => {
      const { clientWidth, clientHeight } = canvas;
      offscreenCanvas.width = clientWidth;
      offscreenCanvas.height = clientHeight;
      canvas.width = clientWidth;
      canvas.height = clientHeight;
      // 把离线Canvas的内容绘制到当前组件的Canvas上
      ctx2d.drawImage(offscreenCanvas, 0, 0);
    };

    syncSize();
    // 这里可以使用gl上下文进行绘制操作，所有内容都会渲染到离线Canvas
    // 示例：gl.clearColor(0.2, 0.3, 0.8, 1); gl.clear(gl.COLOR_BUFFER_BIT);

    // 监听窗口 resize 同步尺寸
    window.addEventListener('resize', syncSize);
    return () => {
      window.removeEventListener('resize', syncSize);
      // 组件卸载时无需销毁gl上下文，仅清理当前组件的监听等资源
    };
  }, []);

  return <canvas ref={canvasRef} style={{ width: '100%', height: '100%' }} />;
}

注意事项 #

• 两个组件切换时，如果需要不同的WebGL状态（比如着色器、纹理），可以在组件挂载前做状态的保存/重置操作。
• 如果两个组件需要不同的WebGL配置（比如alpha、depth参数），可以创建多个全局上下文实例，按需调用。
• WebGL上下文只要被持有引用就不会自动销毁，不用担心随组件卸载消失；但要注意手动清理不再使用的纹理、缓冲区等资源，避免内存泄漏。

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