iOS Safari中WebGL资源过大触发OOM的捕获与恢复方案

一、提前检测设备硬件上限 #

在资源加载前，通过WebGL API获取设备的硬件能力阈值，直接匹配对应级别的资源，从根源避免超限：

• 获取纹理尺寸上限：

const gl = document.querySelector('canvas').getContext('webgl');
const maxTextureSize = gl.getParameter(gl.MAX_TEXTURE_SIZE);

比如要加载的纹理尺寸超过maxTextureSize，直接切换为低分辨率版本。

• 获取顶点/几何资源上限：

const maxVertices = gl.getParameter(gl.MAX_ELEMENTS_VERTICES);
const maxVertexAttribs = gl.getParameter(gl.MAX_VERTEX_ATTRIBS);

加载模型前对比顶点数，超过阈值则加载简化版模型。

二、资源加载时的错误检测 #

虽然页面崩溃无法用try-catch捕获，但WebGL操作的内存错误可以通过gl.getError()检测：

// 示例：上传纹理后检查错误
function loadTexture(gl, url, fallbackUrl) {
    const texture = gl.createTexture();
    gl.bindTexture(gl.TEXTURE_2D, texture);
    const img = new Image();
    img.onload = () => {
        gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, img);
        const err = gl.getError();
        if (err === gl.OUT_OF_MEMORY) {
            // 触发降级逻辑，加载低分辨率 fallback 纹理
            loadTexture(gl, fallbackUrl);
        }
    };
    img.src = url;
}

一旦检测到OUT_OF_MEMORY错误，立即切换到低资源版本。

三、崩溃后的兜底降级 #

iOS Safari崩溃时会触发pagehide事件，可利用这个事件标记崩溃状态，下次启动时自动启用低资源模式：

// 标记崩溃状态
window.addEventListener('pagehide', () => {
    // 结合资源加载状态判断是否为WebGL崩溃
    if (window.isWebGLResourceLoading) {
        localStorage.setItem('webgl_crash_flag', '1');
    }
});

// 初始化时检查并启用降级
window.addEventListener('load', () => {
    if (localStorage.getItem('webgl_crash_flag') === '1') {
        localStorage.removeItem('webgl_crash_flag');
        enableLowResourceMode(); // 自定义的低资源模式切换函数
    }
});

四、分级资源降级策略 #

• 纹理分级：准备多分辨率纹理资源（如4096×4096、2048×2048、1024×1024），根据设备能力动态选择加载。
• 几何简化：针对iOS设备，自动加载低多边形模型，或合并重复几何面减少顶点数。
• 阴影优化：降低阴影贴图分辨率，关闭软阴影效果，改用硬阴影减少内存和计算开销。
• 渐进式加载：避免一次性加载所有资源，分批次加载并在每批加载后检查内存状态，逐步降级。

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