WARNING: Too many active WebGL contexts. Oldest context will be lost.

问题描述

在页面中创建多个webgl的时候，当webgl的个数超过一定限制时，最初创建的webgl丢失context（即绘制内容消失并且不可再绘制），同时浏览器命令行提示：WARNING: Too many active WebGL contexts. Oldest context will be lost.

原因分析

浏览器同时支持的WebGL context个数是有限的，默认是16个。当超出时，会丢失之前创建的对象。

解决办法

保证当前页面活动的WebGL context小于上限。这里需要动态销毁不用的WebGL context对象。

let canvas = ...;
let gl = canvas.getContext('webgl');
//使用下面的扩展插件，手动销毁WebGL context对象。
gl.getExtension('WEBGL_lose_context').loseContext();