VideoTexture’s colorSpace not working on Emissive channel

[vis-prime]

Description

When a videoTexture is applied on emissiveMap of a MeshStandardMaterial , SRGBColorSpace does not work and it always stays in Linear Color Space.

Reproduction steps

• create videoTexture
• set its colorspace to SRGBColorSpace
• Apply video texture on emissiveMap of MeshStandardMaterial
• make emissive color white and diffuse color black so its simulating a real life 'display/screen/tv'
• notice the video's colors look washed out as its displaying in Linear Color Space

Code

 const videoTexture = new THREE.VideoTexture(videoElem)
 videoTexture.colorSpace = THREE.SRGBColorSpace
 
 const emit_mesh = new THREE.Mesh(planeGeometry, new THREE.MeshStandardMaterial({
    color: 0x000000,
    emissive: 0xffffff,
    emissiveMap: videoTexture,
  }))
  scene.add(emit_mesh)

Live example

In this demo jsfiddle.net

The same VideoTexture and an ImageTexture is applied on

emissiveMap input of a MeshStandardMaterial
map input of a MeshStandardMaterial
map input of a MeshBasicMaterial

& GUI controls colorSpace of both

Screenshots

(look at the top right plane in this video)

Untitled.video.-.Made.with.Clipchamp.mp4

Version

r169

Device

Desktop

Browser

Chrome

OS

Windows

[donmccurdy]

Related:

• VideoTexture: Restore inline sRGB decode. #26521

Currently VideoTexture is a special case because the browser's sRGB decoding is unreliable for videos. Perhaps we need to extend the inline GLSL sRGB decoding to other slots on default materials.

The underlying browser issues remain unfixed.

[donmccurdy]

@Mugen87 I don't mind making a PR for this, is it OK to scope the fix only to .emissiveMap? Technically this also applies to .sheenColorMap, .specularColorMap, etc... but I doubt these are being used with video, and I imagine we might not want this chunk appearing everywhere:

#ifdef DECODE_VIDEO_TEXTURE

  // use inline sRGB decode until browsers properly support SRGB8_ALPHA8 with video textures (#26516)

  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

We could log a warning when video textures use SRGBColorSpace on an unsupported slot, perhaps.

Aside, which of these blocks us from using WebGL's sRGB decoding for video?

• https://issues.chromium.org/issues/40915685
• https://bugs.webkit.org/show_bug.cgi?id=222822

Do we need both fixed, or just the Safari one?

[Mugen87]

Supporting just emissive sounds good to me!

AFAICS, we need both browser bugs fixed.

[donmccurdy]

PR

• WebGLRenderer: sRGB decoding for VideoTexture emissiveMap. #29657