Issue with VideoPlayer Colors being washed out (WebGL)

Hello,

A quick background on the issue,

I have a video I’m looking to play for a WebGL project. While the video looks just fine in the editor, when I go to build it out for the web, the colors are noticeably different (washed out) compared to the original/editor quality.

(Left: Web Build, Right: Original Video)

As shown in the image, the colors are significantly washed out.

The problem exists in both the locally hosted build and the web build hosted via GitHub pages. I’m using Chrome (Version 84.0.4147.125 (Official Build) (64-bit))

I stream the video in using a URL from Dropbox. For privacy reasons, I haven’t shown the entire video URL but I end it with “.mp4?dl=0” which I read about from here, (Using VideoPlayer to stream a video from a website - Questions & Answers - Unity Discussions Sir-Gatlin 's comment)

In regards to the VideoPlayer, the video is played on a plane mesh that has a custom material with the URP Unlit shader. The VideoPlayer render mode is set to Render Texture. I have not tweaked any of the default Render Texture settings, aside from the dimensions to match the video file.

The file type of the video is .mp4

Below is a picture of the inspector properties for the following (left to right)

  1. The Video Player gameObject (the plane) and it’s VideoPlayer component.

  2. The Render Texture.

  3. The Plane’s Material with the Render Texture applied to the base map.

Here’s a little more background about the render pipeline / lighting / editor settings. (Might seem random but I’ve read about these potentially creating issues with video playback.)

  1. The color space is Linear.

  2. There is no fog enabled.

  3. I am using the Universal Render Pipeline.

  4. I am using Post Processing effects (I don’t think that’s creating the issue but I included a picture of what effects I’m currently using.)

  1. I am using Unity 2020.1.0f1

My thoughts on the issue,

If I had to guess I’d say the problem lies in the Render Texture’s Color Format. Unfortunately looking at the Unity Docs for answers hasn’t proved very helpful explaining how/when to select certain ones.
(Unity - Scripting API: RenderTextureFormat)

Any thoughts/insights would be greatly appreciated!

Thanks for reading!

Bobby, I saw your post here and on stack overflow. I’m having the same issue. I tried switching from Linear to Gamma, but still have the same problem. Did you try anything else to solve this?

Cheers!

same issue… any solutions?

Also the same issue here… Any idea?

same here…
a solution is to change the color space from linear to gamma. not cool, but… :roll_eyes:

1 Like

I tried reproducing the problem with a new WebGL project, but I could not reproduce the washout issue. My project setup was:

-A 5 seconds mp4 H264
-Chrome Version 95.0.4638.69
-Unity 2021.1.12f1
-RenderTexture R8G8B8A8_UNORM
-Universal Render Pipeline
-Material Unlit/Texture
-Colorspace Linear

I am not sure what it could be. In WebGL, the browsers manage the decoding. Did you try another browser or shader? Did you have the same issues? It isn’t easy to debug without reproducing the issue locally. If you or anyone has the same problems, could you please open a bug report? We will try looking into it.

1 Like

Thank you !
Fixed by upgrading to Unity 2021.2.19f

1 Like