在移动设备上使用 Max 纹理在 Web 应用程序上渲染 4k 分辨率 360 度视频问题

问：

我正在使用 React 和 A-Frame 开发一个 Web 应用程序。 我的 360 度视频的 videosphere 和纹理大小有问题。

场景非常简单，我想在 videosphere 上渲染一个 360 度视频，以便用户可以看到周围的环境。

我在 Firebase 上托管了我的视频，在我的 Web 应用程序上链接，当我使用 1920x1080 分辨率的视频时一切正常，但是该分辨率的 360 度视频不是很漂亮，有点模糊，所以我想尝试渲染一个 4k 视频只是为了测试。

在这种情况下，问题是：控制台向我显示此警告 设备上的“WebGL：INVALID_VALUE：texImage2D：宽度或高度超出范围”（在桌面上工作） 我使用 chrome 开发工具检查了设备上的最大纹理，我看到我的设备具有 4096 的最大纹理大小，我的视频是：3840x2160

如何解决此问题？这是可以在我的网络应用程序上显示 4k 360 度视频的一些演练吗？HSL可以成为解决方案吗？

这是我在有问题的页面上呈现的唯一组件：

const XIV_360_Abbazia_San_Silvestro_4K = () => {
  const assetsRef = useRef(null);
  const videoRef = useRef(null);
  const sceneRef = useRef(null);

  return (
    <a-scene className="ar-container fullHeight" ref={sceneRef}>
      <a-assets ref={assetsRef} timeout="1000000">
        <video
          id="video360"
          src="https://firebasestorage.googleapis.com/v0/b/nonantola-sottosopra.appspot.com/o/XIV_360_Abbazia_San_Silvestro_4K.mp4?alt=media&token=52db7d73-3f56-4b52-b9c5-8993e8315f40&_gl=1*1shr1sm*_ga*NzM4MjQ0ODY0LjE2OTgwNDcxMjQ.*_ga_CW55HF8NVT*MTY5ODA0NzEyNC4xLjEuMTY5ODA1MzAwMy42MC4wLjA."
          ref={videoRef}
          type="video/mp4"
          crossOrigin="anonymous"
          loop
          muted
          onLoadedMetadata={() => {
            console.log('ON LOADED META DATA');
          }}
          onCanPlayThrough={() => {
            console.log('CAN PLAY THROUGH');
            let videoSphere = document.createElement('a-videosphere');
            videoSphere.setAttribute('src', '#video360');
            sceneRef.current.appendChild(videoSphere);
          }}
          onProgress={() => console.log('Loading progress...')}
          onError={(e) => {
            console.log('Video error:', e.target.error.code);
            // Optionally log the full error object for more details
            console.log('Full error object:', e.target.error);
          }}
          onWaiting={() => console.log('Waiting for video to load or play...')}
          onPlay={() => console.log('Video started playing.')}
          onPause={() => console.log('Video paused.')}
        />
      </a-assets>
      <a-entity camera fov="50" position rotation look-controls></a-entity>
      <button
        className="absolute w-20 h-20 bottom-0 left-0 z-50"
        onClick={() => {
          videoRef.current.play();
        }}
      >
        PLAY
      </button>
    </a-scene>
  );
};

export default XIV_360_Abbazia_San_Silvestro_4K;