Three.js R3F中VideoTexture设置sRGB编码无效、视频色彩过淡问题求解

之前设置的编码不生效，核心是两个层面的问题：属性版本不兼容、渲染管线配置不对齐。

核心原因说明 #

• 从Three.js r152版本开始，旧的Texture.encoding、Renderer.outputEncoding属性已被正式废弃，替换为基于色彩空间的colorSpace、outputColorSpace属性，旧写法在新版本中不会触发任何逻辑，这是绝大多数设置无效果的根源。
• 色彩校正是纹理采样、材质计算、渲染器输出全链路的配合逻辑，只单独设置纹理的属性，全链路某一环配置不对，就会出现色彩发淡、偏灰的问题。

正确配置操作 #

1. 替换为当前版本支持的纹理属性写法 #

r152及以上版本的Three.js，正确的纹理色彩空间设置代码如下：

import {
  MeshStandardMaterial,
  VideoTexture,
  SRGBColorSpace, // 从three中导入新的色彩空间常量
} from "three";

const textureVid = document.createElement("video");
textureVid.src = "assets/video/test.mp4";
textureVid.play();

const videoTexture = new VideoTexture(textureVid);
// 替换旧的encoding写法
videoTexture.colorSpace = SRGBColorSpace;

const matTVScreen = new MeshStandardMaterial({
  color: 0x000000,
  map: videoTexture,
});

2. 对齐R3F的渲染管线配置 #

R3F v8及以上版本默认适配了Three.js新的色彩管线，默认gl.outputColorSpace就是SRGBColorSpace，不需要额外全局修改，但要注意：

• 不要手动把Canvas的gl配置里的outputColorSpace改成LinearSRGBColorSpace，会直接导致输出不做sRGB转换，色彩发淡。
• 如果你项目用的是R3F v7及以下的旧版本，对应的渲染器配置需要手动开启sRGB输出，写法参考：

  <Canvas gl={{ outputEncoding: sRGBEncoding }}>
  

  这种旧版本下，必须同时给纹理设置videoTexture.encoding = sRGBEncoding、渲染器开启sRGB输出，两个配置缺一不可。

容易踩的细节坑 #

• VideoTexture继承自基础Texture类，没有特殊的采样逻辑，所有基础Texture支持的色彩空间配置对它完全生效，官方文档没单独标注只是因为它复用父类属性，不是不支持。
• 不要手动给材质加额外的gamma校正参数，新的色彩管线会自动完成从线性计算空间到sRGB输出空间的转换，手动加修正会导致色彩过曝、暗部丢失。
• 创建VideoTexture时如果flipY配置和视频原生方向不匹配，可能会出现采样异常，但这种异常一般是局部色彩错乱，不会整体发淡，可以通过videoTexture.flipY = false对齐VideoTexture的默认行为，减少采样问题。

内容的提问来源于stack exchange，提问作者tinytree