Video texture no longer updating after entering WebXR mode

Hi,

I have several video textures with “needsUpdate” set to true. These play videos perfectly fine in non WebXR mode.

However whenever I’m entering WebXR mode via VR headsets, the video textures often will no longer update and gets stuck at the last video frame, with sounds still playing in background.

How can I set the video textures to continuously update, keep the video playing even upon entering WebXR mode?

Thank You

2 Likes

I just had what sounds like the the same issue and was I fixed it by updating the html video tag to:

<video id="video" loop muted crossOrigin="anonymous" playsinline style="display:none">
    <source src="./img/vid.mp4" type="video/mp4">
  </video> 

it was

  <video id="video" width="640" height="360" loop>
    <source src="./img/vid.mp4" type="video/mp4">
  </video> 

before and somehow that fixed it for me.
my JS is

const video = document.getElementById( 'video' );
videoTexture = new THREE.VideoTexture( video );
video.play();

Your mileage may vary - good luck

1 Like

I am getting the same issue as @jcy and when I saw this thread, I had a glimmer of hope!

But alas this doesn’t solve it for me. I’m using a pico neo 3.

I also have the Pico 3 and this issue still persists. The above solution didn’t really work for me.

I tried to get more info on the pico forums but no luck:
https://developer-global.pico-interactive.com/community/post/7150765868806766598

Several things tend to brake when entering WebXR, and the solution often requires days of work. That should be strong motivation to make your own custom VR environment and get rid of all the limitations and shortcomings of Google’s and Facebook’s format, including dependencies on their apps and browser. If stuck you could take example of Mozilla’s polyfill.

Kia ora jcy,

The problem is fixed for me with the upcoming pico browser 3.2.5 . I finally got in touch with the pico devs and they figured out the problem. I’m really stoked that they engaged and had a solution real quick once I got through.

Cheers,
JD

1 Like

That’s great! Do you know when will the new browser update be released?

Also how did you get in touch with the devs at Pico?

I’m experiencing flickering issues with textures when entering WebXR mode in the Pico browser and it’s been like this for a while.

In the end I just got in touch with the person who sold me the headset.

@jrjdavidson I tested the latest Pico browser 3.2.5 and the video issue seems indeed fixed. But I’m noticing that anti-alias in Three JS seems to have no effect in the Pico browser. Have you experienced this issue? Every single Three JS demo when opened in the Pico browser results in jagged texture edges at the moment.

I had a another look and compared the vr/panorama/depth in my desktop browser to the headset. I think you’re right, there are clearly some big differences in the way edges are rendered.
Do you know if this is a pico issue or if other headsets such as the quest have the same problems?

Also - probably should be opening a new thread instead of writing here as this is a different issue!

The Oculus Quest also has a tiny bit but it’s very subtle and not at all serious like in the Pico browser, where it almost seems like you’re looking at textures through a heatwave, where everything is flickering / shimmering.

I’ve created a new ticket here in the Pico forum:
https://developer-global.pico-interactive.com/community/post/7172825319102939142

Btw, since you were able to contact the Pico devs directly, do you think you could forward them this issue as well? It’s a pretty big issue when it comes to WebXR in the Pico browser.

Similar issue on VisionOS simulator: VideoTexture playback (HTML5 VideoElement) Apple Vision Pro Simulator in VR mode not playing

1 Like

if someone else has the same issue but with a image texture that is being updated u can do as follows:
html

<img id="video" src="https://localhost:8080/my_camera" crossOrigin="anonymous" style="display:none" />

js

const imgElement = document.getElementById('video') as HTMLImageElement;
		const ltexture = new THREE.VideoTexture( video );
        ltexture.colorSpace = THREE.SRGBColorSpace;
		ltexture.needsUpdate = true;
		const lgeometry = new THREE.PlaneGeometry(1.6, .9);
		const lmaterial = new THREE.MeshBasicMaterial({ map: ltexture });
		lplane = new THREE.Mesh(lgeometry, lmaterial);
		lplane.position.set(0, 0, -1);
		scene.add(lplane);

on every render cycle

lplane.material.map.needsUpdate = true; 

that did the trick for me