GL_OUT_OF_MEMORY 使用 A 帧显示立体图像

Question

我创建了一个概念验证 SPA (source code / demo)，它从网络服务器加载立体图像并使用 aframe-stereo-component 为 A-frame 以立体 3D 呈现它们。

在 Oculus 浏览器和 Firefox Reality 中的 Quest 2 上进行测试，效果很好：通过 WebXR 在沉浸式 VR 模式下查看时，每张图像都以 3D 形式显示。

但是，在滚动浏览多个图像（通常是 8 到 12 个）后，幻灯片停止工作。 在 Firefox Reality 中，这表现为应用程序只是冻结并变得无响应。

在 Oculus 浏览器中，会显示图像描述，但图像区域仍为黑色。 使用 adb 将 Quest 2 连接到 PC 并使用 Chrome DevTools 检查页面，发生这种情况时我可以看到以下输出：

23:07:59.195 [.WebGL-0x55930300]GL ERROR :GL_OUT_OF_MEMORY : glTexImage2D: 
23:07:59.195 [.WebGL-0x55930300]GL ERROR :GL_INVALID_OPERATION : glGenerateMipmap: Can not generate mips
23:07:59.195 [.WebGL-0x55930300]RENDER WARNING: texture bound to texture unit 0 is not renderable. It might be non-power-of-2 or have incompatible texture filtering (maybe)?
23:08:03.340 [.WebGL-0x55930300]GL ERROR :GL_OUT_OF_MEMORY : glTexImage2D: 
23:08:03.340 [.WebGL-0x55930300]GL ERROR :GL_INVALID_OPERATION : glGenerateMipmap: Can not generate mips
23:08:03.340 [.WebGL-0x55930300]GL ERROR :GL_OUT_OF_MEMORY : glTexImage2D: 
23:08:03.340 [.WebGL-0x55930300]GL ERROR :GL_INVALID_OPERATION : glGenerateMipmap: Can not generate mips
23:08:03.499 WebGL: too many errors, no more errors will be reported to the console for this context.

诚然，正在加载的图像是大型 JPS 文件（2 到 3Mb），每个图像被渲染两次：每只眼睛一次。 但是，<img> 元素用于通过将其添加到 DOM 来加载图像内容，当请求下一个图像时，将其删除并置空以使图像内容无效，因此理论上任何一个图像都应加载时间。 因此，我假设某处一定存在内存泄漏，导致在加载了许多图像后内存被填满，但我不确定它在哪里泄漏。 我无法在使用 Chrome/Firefox 的 PC 上重现该问题，但这可能是因为它的内存比 Quest 2 多。

相关source code摘录：

<a-scene id="scene" vr-mode-ui="enabled: false" >
    <a-assets id="assets"></a-assets>
    <a-plane id="left-image"
      material="repeat:0.5 1"
      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"
      scale="2 1 1"
      position="0 0 -1"
      stereo="eye: right"
    ></a-plane>
</a-scene>

const stereoImageId = 'fullsize-image'
const _stereoImage = '#'+stereoImageId;
const leye = $('#left-image')[0];
const reye = $('#right-image')[0];
const $assets = $('#assets');

const removeStereoImage = function(){
    let $stereoImage = $(_stereoImage);
    if($stereoImage.length){
        let stereoImage = $stereoImage[0];
        stereoImage.onload = stereoImage.onerror = null;
        $stereoImage.attr('src', '').remove();
        $stereoImage = stereoImage = null;
    }
};

const unloadStereoImage = function(){
    removeStereoImage();
    leye.setAttribute("material", "src", '');
    reye.setAttribute("material", "src", '');
    setStereoImageVisibility(false);
};

const setStereoImageVisibility = function(visible){
    leye.setAttribute("visible", visible)
    reye.setAttribute("visible", visible)
};


const showImg = function(url, description){
    function onImgLoaded(){
        leye.setAttribute("material", "src", _stereoImage);
        reye.setAttribute("material", "src", _stereoImage);
        setStereoImageVisibility(true);
    }

    unloadStereoImage();

    let stereoImage = document.createElement('img');
    stereoImage.setAttribute('id', stereoImageId);
    stereoImage.setAttribute('crossorigin', "anonymous");
    stereoImage.setAttribute('src', url);
    stereoImage.onload = onImgLoaded;
    $(stereoImage).appendTo($assets);
};

我在源代码仓库中也有raised this as an issue

Answer 1

资产管理系统 (a-assets) 旨在帮助处理 preloading 资产，而不是在运行时将它们扔进扔出。

从资产中移除 <img> 元素不会释放纹理（缓存在 material system 中）。

您可以访问和清除缓存，但我会尝试“手动”管理图像，

• 通过new THREE.Texture(src) 加载图像，例如material system does

• 应用材料

  element.getObject3D("mesh").material.map = texture;
  material.needsUpdate = true;
  

• 用texture.dispose()删除旧纹理

---

以为纹理是too big，但我猜每个纹理都会崩溃。