solved Video textures not respecting UVs?

[jdurrant]

I'm struggling with video textures. I created a simple icosphere in Blender, unwrapped it, and exported it to a babylon file. I then loaded that babylon file in the browser and positioned the camera directly at the center of the sphere.

I added a video texture to the sphere's emissive texture, but it doesn't render correctly. It's almost as if it's not respecting the UVs:

I naturally thought the UVs must have gotten messed up somehow, but when I create a regular texture using a single frame from the video, it looks perfect:

Here's my TypeScript code:

declare var BABYLON;
declare var jQuery;

if (BABYLON.Engine.isSupported()) {

    // Get the canvas element from our HTML above
    var canvas = document.getElementById("renderCanvas");

    // Load the BABYLON 3D engine
    var engine = new BABYLON.Engine(canvas, true);

    BABYLON.SceneLoader.Load("scene/", "babylon.babylon", engine, function (scene) {
        // Wait for textures and shaders to be ready
        scene.executeWhenReady(function () {
            // Attach camera to canvas inputs
            scene.activeCamera.attachControl(canvas);

            // Start rendering video texture
            let sphere = scene.meshes[0];
            scene.activeCamera.position = sphere.position;
            scene.activeCamera.rotation =  {x: 0.312831706486495, y: -1.1043217385267734, z: 0.0142}

            var mat = new BABYLON.StandardMaterial("mat", scene);
            
            mat.diffuseColor = new BABYLON.Color3(0, 0, 0);
            mat.specularColor = new BABYLON.Color3(0, 0, 0);
            mat.backFaceCulling = true;
            mat.diffuseTexture = null;

            let videoTexture = new BABYLON.VideoTexture("video", ["baked.mp4"], scene, true, true);
            let nonVideoTexture = new BABYLON.Texture("baked_texture34.png", scene);
            let useVideoTexture = true;
            mat.emissiveTexture = videoTexture;

            sphere.material = mat;  // Because sphere is only thing in scene.

            // Once the scene is loaded, just register a render loop to render it
            engine.runRenderLoop(function() {
                scene.render();
            });

            // On click, switch textures
            jQuery("body").click(function() {
                this.useVideoTexture = !this.useVideoTexture;
                if (this.useVideoTexture) {
                    mat.emissiveTexture = this.videoTexture;
                } else {
                    mat.emissiveTexture = this.nonVideoTexture;
                }
                this.sphere.material = mat;
            }.bind({
                sphere: sphere,
                mat: mat,
                videoTexture: videoTexture,
                nonVideoTexture: nonVideoTexture,
                useVideoTexture: useVideoTexture
            }));

        });
    }, function (progress) {
        // To do: give progress feedback to user
    });

    // Watch for browser/canvas resize events
    window.addEventListener("resize", function () {
        engine.resize();
    });
}

Thanks for your help with this!

[jdurrant]

I was too quick to post my question... I found the answer here: 

 

For reasons I don't understand, BABYLON.VideoTexture includes a parameter to flip the video across the Y axis. I had that value set to true.

So my line:

let videoTexture = new BABYLON.VideoTexture("video", ["baked.mp4"], scene, true, true);

should have been:

let videoTexture = new BABYLON.VideoTexture("video", ["baked.mp4"], scene, true);

Hope this helps someone else!