How to fix choppy frames in video texture?

Questions
,
1

Hi,

I have a video texture with a video playing and it works fine on Safari. However, in Chrome and on Android, the video is really choppy, even though the audio plays fine.

My video texture is setup like this:

video_texture.encoding							= THREE.sRGBEncoding;
video_texture.minFilter							= THREE.LinearFilter;
video_texture.needsUpdate						= true; 
video_texture.anisotropy					    = 16;
video_texture.center.set(0.5, 0.5);

And I’ve attached a screen recording:

How can I get the video texture to play smoothly on Chrome and in Android?

Thank You!

2

Can you create a working example using Codesandbox or a similar site? We can’t help you without seeing your code.

3

Possibly related:

1 Like
4

Sidenote: Since three.js does not support RGBFormat anymore, the issue reported in VideoTexture low framerate - #10 by Mugen87 should not happen in Firefox anymore. All video textures use RGBA now.

1 Like
5

Okay I will give a try editing the texture options and see if that fixes the stuttering. If not then I’ll try and create a small mock-up and send a link.

6

By RGBA format, do you mean I shouldn’t use this sRGBEncoding in the texture encoding? I tried switching to THREE.RGBADepthPacking but I’m getting an “unknown encoding” error.

7

Using sRGB is fine. THREE.RGBADepthPacking is not right in this context.