135+ washed out sRGB VideoTexture when used as scene's background

[nyan-left]

Using a THREE.VideoTexture as a scene's background alongside sRGBEncoding results in a washed-out image. This is also the case when using a device's camera stream. The texture does, however, render as expected on a plane in the scene.

It looks like this is related to the recent SRGB8_ALPHA8 PR #22952

To Reproduce

1. Install the latest THREE version (0.138.3 as of this post)
2. Setup a VideoTexture to be used as a scene's background
3. Set the texture's encoding to sRGBEncoding
4. Set the renderer's output encoding to sRGBEncoding
5. Observe that the video loses quality and becomes washed out.

Code

Click to expand

import * as THREE from "three";

const renderer = new THREE.WebGLRenderer();
document.body.appendChild(renderer.domElement);

renderer.setSize(window.innerWidth, window.innerHeight);

window.addEventListener("resize", () => {
renderer.setSize(window.innerWidth, window.innerHeight);
});

const camera = new THREE.PerspectiveCamera(
75,
window.innerWidth / window.innerHeight,
0.1,
1000
);

const scene = new THREE.Scene();
const video = document.querySelector("video");
video.muted = true;
video.play();

const texture = new THREE.VideoTexture(video);
texture.encoding = THREE.sRGBEncoding;
renderer.outputEncoding = THREE.sRGBEncoding;

scene.background = texture;

const plane = new THREE.Mesh(
new THREE.PlaneGeometry(2, 2),
new THREE.MeshBasicMaterial({ map: texture })
);
scene.add(plane);
plane.position.set(1.5, 0, -3);

function render() {
requestAnimationFrame(render);

renderer.render(scene, camera);
}

requestAnimationFrame(render);

Live example

• 0.138.3 https://codesandbox.io/s/twilight-snow-vi7dkl?file=/src/index.js
• 0.135.0 https://codesandbox.io/s/brave-hofstadter-uk4ji3?file=/src/index.js

Expected behavior

The video quality should not be reduced and the colors should remain unchanged.

Screenshots

0.138.3 Click to expand

0.135.0 Click to expand

Platform:

Tested on:

• Device: Desktop, Mobile
• OS: Windows, MacOS
• Browser: Chrome, Safari
• Three.js version: [0.138.3, 0.135.0]

[Mugen87]

It seems I've missed to add the inline sRGB decode to the background shader.

57ac477