Safari bug on VideoTexture repeat

Questions
, ,
1

Debugging a website I am building and encountered an issue where VideoTexture was appearing to be clamped rather than wrapping on iOS and Mac Safari. On testing standalone, I found that setting needsUpdate = true on animate would cause a flicker between wrapped and tiled. This occurs on both VideoTexture and Texture.

I’ve set up demos here

I tried a workaround of using h265 encoded mp4, as sometimes that behaves better on iOS but it did not work on this occasion.

Is this a known bug? Any potential workarounds such as other video formats that don’t have this issue?

I believe this post is also related Video Texture RepeatWrapping bug on ios and safari

2

This topic is a duplicate of Video Texture RepeatWrapping bug on ios and safari.

Since this only happens in Safari, it should be reported at https://bugs.webkit.org. After a quick search, it seems there is not yet a bug tracking this issue.

@Grum What version of macOS/iOS and Safari have you tested with?

3

Hi @Mugen87
Sure, acknowledged that in the post. Didn’t see any comments or resolutions so made a new thread.

MacBook Pro 13 inch 2017 running macOS Montererey 12.3.1 Safari 15.4 17613.1.17.1.13
iPhone 12 Pro Max running iOS 15.5

Created a shadertoy to see if the problem persisted on there and video textures don’t seem to show at all on iOS and the clamp issue is present on macOS. Shader - Shadertoy BETA

I’ll see if I can create a bug listing later on. Needing to do a workaround in the meantime!
Going to try drawing video to canvas and tiling that. Could be clunky though.

4

Also have this issue on ios16 safari threejs r138

Works fine on everything else

Was this resolved???

vidtexbug
vidtexbug600×1031 181 KB

Setup:

       var geometry = new THREE.CylinderGeometry( 1,1, 8, 32,1, true );
       this.tubematerial = new THREE.MeshBasicMaterial({color:0xdddddd});
       this.tube = new THREE.Mesh( geometry, this.tubematerial );
       var parent = document.getElementById("videotextures");
       this.tubevideo = document.createElement('video');
       this.tubevideo.loop = true;
       this.tubevideo.src = 'assets/video/'+_G.ASSETS.TEXTURES.TUNNEL[this.vid_index]+'.mp4';
       this.tubevideo.setAttribute('webkit-playsinline', ''); 
       this.tubevideo.setAttribute('crossOrigin', 'anonymous'); 
       this.tubevideo.setAttribute('playsinline', ''); 
       parent.appendChild(this.tubevideo);
       this.tubevideo.id = "videotex";
       this.tubevideo.muted = true;
       this.tubevideo.load();
       this.tubevideotex = new THREE.VideoTexture( this.tubevideo );
       this.tubematerial.map = this.tubevideotex;
       this.tubematerial.side = THREE.DoubleSide;
       this.tubematerial.needsUpdate = true;
       this.tubevideotex.wrapS = THREE.MirroredRepeatWrapping;
       this.tubevideotex.wrapT = THREE.MirroredRepeatWrapping;
       this.tubevideotex.magFilter = THREE.LinearFilter;
       this.tubevideotex.minFilter = THREE.LinearFilter;
       if(!this.is_ios){this.tubevideotex.repeat.set( 2,2 );} //still fukd even with repeat off

On Update:

       //----------------------------------
       //tube
       if(this.playing){
           if(this.tube){
               this.tube.rotation.y += this.settings.tube.rotation;
               if(this.tube.material.map){
                   this.tube.material.map.offset.x += this.settings.tube.video.translate.x;
                   this.tube.material.map.offset.y += this.settings.tube.video.translate.y;
                   this.tube.material.map.offset.z += this.settings.tube.video.translate.z;
               }
           }
       }