Is there a maximum video texture resolution in A-Frame?

user_13002872 0
Viewed 445

I have a video-sphere and I want to map a high resolution (5100 x 2550px) video texture onto it. 

<video
        id="my-video"
        preload="auto"
        src="./assets/video/video.mp4"
        crossorigin="anonymous"
        playsinline
        webkit-playsinline
      ></video>

...

 <a-videosphere play-on-click id="skyVideo" rotation="-30 0 0" src="#my-video" class="cantap">
    </a-videosphere>

When I load the high resolution video, the videosphere is black and I get the following error: WebGL Error 501

When I downsize the video texture to 2560 x 1280, the videosphere shows the texture as expected with no errors.

Is there a maximum texture resolution in AFrame or three.js that I am not aware of?

aframe three.js webgl
1 Answers

The limit isn't established by A-Frame or Three.js, but by WebGL and your graphics card capabilities. Go to https://webglreport.com/ and look at the Textures > Max Texture Size field to see what the device you're using can handle. My laptop maxes out at 8192, my cellphone is lower, but my desktop goes higher. It varies depending on your GPU. My guess is that your machine maxes out at 4096.

enter image description here

You can get this value in Three.js with WebGLRenderer.capabilities.maxTextureSize, as outlined in the docs so you can read this value on different devices and adjust accordingly. Maybe you'd like to point to lower rez videos based on the limits.

user_26085150
Related