WebGL Video colors washed out

Question

Here's 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)

[Picture of video quality comparison][2]

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, (https://answers.unity.com/questions/1370621/using-videoplayer-to-stream-a-video-from-a-website.html 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)

The Video Player gameObject (the plane) and it's VideoPlayer component.
The Render Texture.
The Plane's Material with the Render Texture applied to the base map.

Picture of inspector properties

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.)

The color space is Linear.
There is no fog enabled.
I am using the Universal Render Pipeline.
I am using Post Processing effects (Bloom, Vignette, Tonemapping)
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. (https://docs.unity3d.com/2020.1/Documentation/ScriptReference/RenderTextureFormat.html)

Any thoughts/insights would be greatly appreciated!

Thanks for reading!

Answer 1

Best Answer

Answer by Edwige · Aug 18, 2020 at 09:31 AM

I had the same issue : the video was low quality and pale, even if I was using streamingassets to load my video.

The solution for me was to change the color space, in the webgl player settings. Instead of Linear, I choose Gamma, and now it works fine :)

Add comment · Show 2 · Share

Bobby21 · Aug 18, 2020 at 07:26 PM 0

Share

That worked thanks!

Sure it messed up the prior lighting settings but it beats shelling out for paid assets that wouldn't necessarily work.

InesHilz · Feb 19, 2021 at 11:55 AM 0

Share

Thank you! I was searching for this answer for days :)

Answer 2

Changing the global color space was not convenient for us. Created a new unlit shader with a conversion from GammaToLinear (the other way around makes it even more washed out). It's not 100% perfect, but much better than before. Simply assign the shader to a new material, and assign that material to your RawImage component that renders the video. We attach it conditionally if the player is WebGL, otherwise other players become too dark. Mainly the important line is

 col.rgb = GammaToLinearSpace(col.rgb);

The stencil is optional, we needed it because the video is behind a mask.

 Shader "Unlit/VideoPlayerShader"
 {
 
     Properties
     {
         _MainTex ("Texture", 2D) = "white" {}
         _Stencil ("Stencil Ref", Float) = 1
         _StencilComp ("Stencil Comparison", Float) = 3
         _StencilOp ("Stencil Operation", Float) = 0
         _StencilWriteMask ("Stencil Write Mask", Float) = 0
         _StencilReadMask ("Stencil Read Mask", Float) = 1
         _ColorMask ("Color Mask", Float) = 15
     }
 
     SubShader
     {
         Tags { "RenderType"="Opaque" }
         LOD 100
 
         Stencil 
         {
             Ref [_Stencil]
             ReadMask [_StencilReadMask]
             WriteMask [_StencilWriteMask]
             Comp [_StencilComp]
             Pass [_StencilOp]
         }
 
         Pass
         {
             CGPROGRAM
             #pragma vertex vert
             #pragma fragment frag
 
             #include "UnityCG.cginc"
 
             struct appdata
             {
                 float4 vertex : POSITION;
                 float2 uv : TEXCOORD0;
             };
 
             struct v2f
             {
                 float2 uv : TEXCOORD0;
                 float4 vertex : SV_POSITION;
             };
 
             sampler2D _MainTex;
             float4 _MainTex_ST;
 
             v2f vert (appdata v)
             {
                 v2f o;
                 o.vertex = UnityObjectToClipPos(v.vertex);
                 o.uv = TRANSFORM_TEX(v.uv, _MainTex);
                 return o;
             }
 
             fixed4 frag (v2f i) : SV_Target
             {
                 fixed4 col = tex2D(_MainTex, i.uv);
                 col.rgb = GammaToLinearSpace(col.rgb);
                 return col;
             }
             ENDCG
         }
     }
 }

Answer 3

Answer by DhiaSendi · Apr 09 at 10:05 AM

Fixed by upgrading to Unity 2021.2.19f

Add comment · Share

WebGL Video colors washed out

3 Replies

Your answer

Follow this Question

Related Questions