A-frame渲染立体图像出现GL_OUT_OF_MEMORY错误的问题咨询

问题根源 #

你仅清理了DOM层面的<img>元素引用，但A-Frame底层依赖的Three.js引擎会自动将加载过的图像转为WebGL纹理对象缓存在显存中，这部分资源你没有主动释放，累计占用了Quest 2有限的显存，最终触发GL_OUT_OF_MEMORY错误。PC端显存远大于Quest 2，所以不会复现该问题，XR浏览器对显存的配额限制也比普通桌面浏览器严格很多，进一步放大了这个问题。

修复方案 #

修改unloadStereoImage方法，在移除img元素、清空材质src之前，主动销毁左右两个平面材质绑定的纹理资源：

const unloadStereoImage = function(){
    removeStereoImage();
    // 新增：主动释放显存中的纹理资源
    [leye, reye].forEach(el => {
        const material = el.getObject3D('mesh').material;
        if (material.map) {
            // 销毁纹理占用的显存
            material.map.dispose();
            // 解除材质对纹理的引用
            material.map = null;
        }
    })
    leye.setAttribute("material", "src", '');
    reye.setAttribute("material", "src", '');
    setStereoImageVisibility(false);
};

可选优化项 #

如果你的JPS图像分辨率不是2的幂次，还可以做以下调整，避免mipmap生成失败的警告，进一步降低显存占用：

• 提前将JPS图像的分辨率调整为2的幂次（比如4096×2048、2048×1024）
• 或者给平面材质关闭mipmap生成，在原material属性中添加minFilter: linear配置：

<a-plane id="left-image"
  material="repeat:0.5 1; minFilter: linear"
  scale="2 1 1"
  position="0 0 -1"
  stereo="eye:left"
>
</a-plane>
<a-plane id="right-image"
  material="repeat:0.5 1; offset: 0.5 0; minFilter: linear"
  scale="2 1 1"
  position="0 0 -1"
  stereo="eye: right"
></a-plane>

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