如何清理无用WebGL上下文？解决动画切换过多报错问题

你遇到的问题核心是：仅仅移除Canvas元素并置空变量，并不会主动销毁对应的WebGL上下文。浏览器对单个页面的WebGL上下文数量有严格限制（一般是16个左右），旧的上下文因为被代码中的引用（比如动画循环、闭包、全局变量）持有，无法被垃圾回收，累积到一定数量就会触发这个报错。

1. 主动销毁WebGL上下文 #

在删除Canvas之前，必须主动调用WebGL上下文的销毁方法，告知浏览器可以回收该上下文。需要先获取WEBGL_lose_context扩展，然后调用loseContext()：

修改你的代码，新增WebGL上下文的引用保存逻辑：

let canvasElem = null
let glContext = null // 保存WebGL上下文引用

const deleteCanvas = () => {
    if (glContext) {
        // 主动销毁WebGL上下文
        const loseCtxExt = glContext.getExtension('WEBGL_lose_context')
        if (loseCtxExt) {
            loseCtxExt.loseContext()
        }
        glContext = null // 置空上下文引用
    }
    
    if (canvasElem) {
        canvasElem.width = 0
        canvasElem.height = 0
        canvasContainer.removeChild(canvasElem)
        canvasElem = null
    }
}

const newAnimation = () => {
    deleteCanvas()
    
    canvasElem = document.createElement('canvas')
    canvasContainer.appendChild(canvasElem)

    // 保存WebGL上下文引用（假设initWebGLAnimation会返回上下文）
    glContext = initWebGLAnimation(canvasElem)
}

2. 清理动画循环及相关引用 #

如果你的initWebGLAnimation里启动了requestAnimationFrame循环，一定要在销毁上下文前取消这个循环，否则循环回调会一直持有上下文引用，导致无法回收：

比如在初始化动画时记录帧ID：

function initWebGLAnimation(canvas) {
    const gl = canvas.getContext('webgl')
    let animationFrameId = null

    function animate() {
        // ... 动画逻辑
        animationFrameId = requestAnimationFrame(animate)
    }
    animate()
    
    // 返回上下文和帧ID，方便后续清理
    return { gl, animationFrameId }
}

然后在deleteCanvas中取消动画帧：

const deleteCanvas = () => {
    if (glContext) {
        // 取消动画循环
        cancelAnimationFrame(glContext.animationFrameId)
        
        const loseCtxExt = glContext.gl.getExtension('WEBGL_lose_context')
        if (loseCtxExt) {
            loseCtxExt.loseContext()
        }
        glContext = null
    }
    
    // ... 原有的Canvas清理代码
}

3. 更优方案：复用Canvas和上下文 #

没必要每次切换动画都销毁重建Canvas，直接复用同一个Canvas和WebGL上下文，清空原有资源后重新初始化新动画即可，从根本上避免上下文数量超限：

let canvasElem = null
let glContext = null

// 初始化一次Canvas
function initCanvas() {
    canvasElem = document.createElement('canvas')
    canvasContainer.appendChild(canvasElem)
    glContext = canvasElem.getContext('webgl')
}

// 清理当前动画的所有资源
function clearAnimationResources(gl) {
    // 删除所有着色器程序
    const programs = gl.getParameter(gl.PROGRAMS)
    programs.forEach(program => gl.deleteProgram(program))
    // 删除所有缓冲区
    const buffers = gl.getParameter(gl.BUFFERS)
    buffers.forEach(buffer => gl.deleteBuffer(buffer))
    // 删除所有纹理
    const textures = gl.getParameter(gl.TEXTURES)
    textures.forEach(texture => gl.deleteTexture(texture))
}

const switchAnimation = () => {
    if (!canvasElem) {
        initCanvas()
    } else {
        // 清理旧动画资源
        clearAnimationResources(glContext)
        // 重置画布尺寸（按需调整）
        canvasElem.width = canvasContainer.clientWidth
        canvasElem.height = canvasContainer.clientHeight
        glContext.viewport(0, 0, canvasElem.width, canvasElem.height)
    }
    
    // 初始化新动画（传入已有的上下文）
    initWebGLAnimation(glContext, canvasElem)
}

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