Search Unity

WebGL Movie Texture Flipped

Discussion in 'Web' started by Elie-Charest, Jun 30, 2015.

  1. Elie-Charest

    Elie-Charest

    Joined:
    May 6, 2011
    Posts:
    14
    I've been using jonas echterhoff's WebGL MovieTexture plugin (having to port a project to WebGL since Chrome no longer supports the Unity Web Player), and I got it working, except I have a small problem: the video is flipped horizontally (what's on the left appears on the right, and vice versa, with all text being backwards).

    This is in the test scene in the project I got from the Git repository. Is there a more recent version that fixes this, or if not does anyone know a workaround? I tried setting the horizontal texture scale to -1, but the video comes out only as horizontal lines. As a last resort I will try flipping my video files, but if anyone knows of a way to fix this it would be much appreciated.

    Cheers!
     
  2. Elie-Charest

    Elie-Charest

    Joined:
    May 6, 2011
    Posts:
    14
    Actually, the texture is reversed vertically, i.e. an upside-down mirror image. Trying to change the Y scale results in a corrupted image.
     
    dog_funtom likes this.
  3. jonas-echterhoff

    jonas-echterhoff

    Unity Technologies

    Joined:
    Aug 18, 2005
    Posts:
    1,666
    You are right. This seems to be an oversight of mine (I guess I had just flipped the texture I displayed when testing and never noticed).

    Fortunately, this is very easy to fix.

    In the WebGLMovieTexture.jslib file, in the WebGLMovieTextureUpdate function, before the call to GLctx.texImage2D, add the following line:

    Code (JavaScript):
    1.     GLctx.pixelStorei(GLctx.UNPACK_FLIP_Y_WEBGL, true);
    2.  
     
    dog_funtom likes this.
  4. Elie-Charest

    Elie-Charest

    Joined:
    May 6, 2011
    Posts:
    14
    Awesome, that works, thank you so much! I'm still getting a small white band at the bottom edge of my video, but I'll just hide it with some geometry. It's probably the way I encoded it.

    Edit: the bar only happens in Chrome, Firefox is fine. The Chrome tests were done locally, so I'll try uploading it to the server and seeing if it is still present.

    Keep up the amazing work, you guys rock!
     
    Last edited: Jul 1, 2015
  5. Elie-Charest

    Elie-Charest

    Joined:
    May 6, 2011
    Posts:
    14
    I'm running into another issue, the video seems to be stuttering....perhaps a performance issue? There's a lot going on the environment, so perhaps this is what's going on. I'll keep investigating to see what's going on.

    Edit: the problem seems to be on Chrome only (Firefox doesn't show any stuttering) and worse when there are more than one tab open, so it could be a memory thing, I guess. This is testing it locally, so I'll try uploading it to a server and testing it then. In any case, it seems to be an issue with Chrome, not Unity nor the plugin.
     
    Last edited: Jul 1, 2015
  6. prawn-star

    prawn-star

    Joined:
    Nov 21, 2012
    Posts:
    77
    Hi
    Making the object y scale negative did the trick for me
    I have a weird bug just in Mac Firefox
    When I load a movie from streaming assets it seems to be reflected or casting a shadow over the scene. It's like the main texture is being added to the main textures of other materials in the scene
    I have a standard material for the background (2048x2048 atlased textures) and a few text mesh pro objects in the scene
    Has anyone else had this issue?
     
  7. reallypeople

    reallypeople

    Joined:
    Jul 11, 2013
    Posts:
    21
    I was revisiting an old project and trying to build it for webgl and came across this problem. Jonas's one line fix above certainly works, but it plays havoc with the legacy GUI system - just about every element in our project (including all text) is now rendered upside down! I'll try the negative height approach..., or upgrade to 5.6 and use the videoPlayer class.