ThreeJS v155 Safari vs Chrome Video Texture Colors

Hey All

Something I am facing in my current project using ThreeJS v155, is that video textures appear washed looking in Safari as opposed to Chrome/Firefox. Using the one of the video examples on the threejs website (three.js examples), you can see the difference:

Safari:

Chrome:

Both of them are using the SRGBColorSpace. Maybe this is just the reality of using different browsers, but does anyone have a work around or idea?

Something that I noticed while testing:

So on my personal project I was able to get two videos to look the same with the following way:

For non IOS browsers, I remove the inline video texture decoding (below)

	#ifdef DECODE_VIDEO_TEXTURE

		// use inline sRGB decode until browsers properly support SRGB8_APLHA8 with video textures

		sampledDiffuseColor = vec4( mix( pow( sampledDiffuseColor.rgb * 0.9478672986 + vec3( 0.0521327014 ), vec3( 2.4 ) ), sampledDiffuseColor.rgb * 0.0773993808, vec3( lessThanEqual( sampledDiffuseColor.rgb, vec3( 0.04045 ) ) ) ), sampledDiffuseColor.w );
	
	#endif

For IOS browsers I add it.

1 Like

This will be fixed with r156. There is a Webkit bug when using SRGB8_APLHA8 with video textures. Until this bug is resolved, the engine uses a GLSL inline sRGB decode like in your code snippet.

1 Like

Awesome thanks for the update