koobas.hobune.stream
WebGL Video colors washed out
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!
Same issue here (washed out, very pale video), with "near camera plane" option in the video player. Our unity version is 2019.3.1f1.
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 :)
That worked thanks!
Sure it messed up the prior lighting settings but it beats shelling out for paid assets that wouldn't necessarily work.
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
}
}
}
Brother , my project was so huge that i cant switch to gamma or to 2021. and you helped me , the day you will read this message remember you are awesome <3
Fixed by upgrading to Unity 2021.2.19f
