在 Three.js 中为实时更新的 CanvasTexture 启用 sRGBEncoding 会触发 GPU 端隐式颜色空间转换，造成 CPU-GPU 同步等待，显著降低帧率；可通过手动线性化纹理并在着色器中补偿，兼顾视觉正确性与 60fps 性能。
在 three.js 中为实时更新的 canvastexture 启用 `srgbencoding` 会触发 gpu 端隐式颜色空间转换，造成 cpu-gpu 同步等待，显著降低帧率；可通过手动线性化纹理并在着色器中补偿，兼顾视觉正确性与 60fps 性能。
当您将 CanvasTexture.encoding 设为 THREE.sRGBEncoding 且 renderer.outputEncoding 同样为 THREE.sRGBEncoding 时，Three.js 会在每次 texture.needsUpdate = true 后，强制执行一次GPU 纹理上传路径上的 sRGB → Linear 转换。该操作并非纯 GPU 并行任务，而是引发隐式同步点（glFinish 或等效等待）：浏览器必须确保前一帧的 sRGB 解码完成，才能提交下一帧绘制命令——这直接拉长了 requestAnimationFrame 的实际间隔，即使 JS 渲染逻辑仅耗时 1ms，GPU 管线也被阻塞，最终帧率腰斩。
根本原因在于：CanvasTexture 的像素数据源自 <canvas></canvas>，其 getImageData() 或 drawImage() 输出始终是已 gamma 压缩的 sRGB 值（即显示器直显值）。若不指定 encoding，Three.js 将其视为线性数据直接送入着色器，导致颜色过亮（未做 gamma 校正）；而启用 sRGBEncoding 后，WebGL 驱动需在纹理上传阶段对每个像素执行 pow(color, 2.2) 反向解码，此过程无法流水线化，尤其在高频更新（每帧）场景下成为性能瓶颈。
✅ 推荐解决方案：绕过自动 sRGB 转换，手动控制线性化流程
-
保持纹理为线性编码（禁用自动 sRGB 处理）
this.videoMesh.material.map = new THREE.CanvasTexture(this.image); this.videoMesh.material.map.encoding = THREE.LinearEncoding; // 关键：明确设为 Linear this.videoMesh.material.map.needsUpdate = true;
-
在自定义 ShaderMaterial 中实现精确 sRGB → Linear 转换
使用onBeforeCompile注入线性化逻辑，避免 GPU 阶段隐式转换：const material = new THREE.ShaderMaterial({ uniforms: { tDiffuse: { value: null }, uGamma: { value: 2.2 } // 可调 gamma 值 }, vertexShader: ` varying vec2 vUv; void main() { vUv = uv; gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0); } `, fragmentShader: ` uniform sampler2D tDiffuse; uniform float uGamma; varying vec2 vUv; void main() { vec4 tex = texture2D(tDiffuse, vUv); // 手动 sRGB → Linear：对非 alpha 通道应用 pow(c, 2.2) vec3 linear = pow(tex.rgb, vec3(uGamma)); gl_FragColor = vec4(linear, tex.a); } ` }); material.uniforms.tDiffuse.value = this.videoMesh.material.map; this.videoMesh.material = material; -
确保渲染器输出仍为 sRGB（维持显示一致性）
this.renderer.outputEncoding = THREE.sRGBEncoding; // ✅ 保留此项，保证最终输出正确
⚠️ 关键注意事项
- 不要同时设置
texture.encoding = sRGBEncoding与renderer.outputEncoding = sRGBEncoding—— 这会导致双重 gamma 校正（sRGB→Linear→sRGB），颜色失真且性能最差； -
CanvasTexture的colorSpace属性（Three.js r152+）尚未完全替代encoding，当前仍推荐显式使用LinearEncoding+ 自定义 shader； - 若使用
WebGLRenderer.setClearColor(0x000000, 1)，需确保颜色值也按线性空间传入（如0x000000本身无影响，但渐变色需注意）； - 华为 Meta40 等移动端 GPU 对隐式 sRGB 转换更敏感，此方案在所有平台均可稳定达 60fps。
通过将颜色空间转换从不可控的 GPU 驱动层迁移至可优化的着色器层，您既保留了物理正确的光照计算基础（线性工作流），又消除了帧率瓶颈——这是专业实时渲染管线的标准实践。
