浏览器-WebGL Lost Context

https://segmentfault.com/q/1010000044402227
https://blog.csdn.net/lovefengruoqing/article/details/121615278

一、问题概要

VM57:8  WARNING: Too many active WebGL contexts. Oldest context will be lost.
Sorry，your browser does support WebGL

edge中使用babylonjs创建了三维场景，如果加载切换太多DOM组件，就触发浏览器产生以上问题。导致页面白屏。

据参考链接的博主测试，同一个页面的webgl个数不能大于16个，否则会引起webgl lost。要想创建更多的webgl对象，就需要彻底的destory了webgl对象后，才能继续创建。

测试WebGL上下文的方法：

function getMaxWebGLContexts() {
    const maxContexts = 32; // 假设一个较大的初始值
    const contexts = [];
    let count = 0;

    for (let i = 0; i < maxContexts; i++) {
        const canvas = document.createElement('canvas');
        const gl = canvas.getContext('webgl') || canvas.getContext('experimental-webgl');

        if (gl) {
            contexts.push(gl);
            count++;
        } else {
            break;
        }
    }

    // 释放所有创建的上下文
    for (let i = 0; i < contexts.length; i++) {
        const ext = contexts[i].getExtension('WEBGL_lose_context');
        if (ext) {
            ext.loseContext();
        }
    }

    return count;
}

console.log('Max WebGL Contexts Supported:', getMaxWebGLContexts());

在一个webgl context上创建多个场景：

// 获取 canvas 元素
const canvas1 = document.getElementById("renderCanvas1");
const canvas2 = document.getElementById("renderCanvas2");

// 创建一个 Babylon Engine 实例
const engine = new BABYLON.Engine(canvas1, true);

// 创建两个场景
const scene1 = new BABYLON.Scene(engine);
const scene2 = new BABYLON.Scene(engine);

// 配置渲染循环
engine.runRenderLoop(() => {
    scene1.render();
    scene2.render();
});

// 手动将不同的场景渲染到不同的 canvas
engine.onEndFrameObservable.add(() => {
    engine.outputRenderTarget = null;
    engine.bindFramebuffer(null);
    
    // 在 canvas1 上渲染 scene1
    engine.switchToFramebuffer(canvas1);
    scene1.render();
    
    // 在 canvas2 上渲染 scene2
    engine.switchToFramebuffer(canvas2);
    scene2.render();
});

问题怀疑

怀疑可能是echart导致的lost context问题，目前echart的github issue中，有很多人都提到了这个问题。