Threejs使用EffectComposer后期处理通道后,纹理有色差

本文详细探讨了在Three.js中遇到的色彩空间问题,特别是在使用glTF模型和EffectComposer进行后期处理时。解决方案是将renderer.outputEncoding设置为THREE.sRGBEncoding,并在EffectComposer源码中修改texture.encoding为sRGBEncoding,以确保颜色正确显示。同时,提到了纹理加载和颜色空间转换的重要性,以及如何处理WebGLRenderTarget的encoding属性。

THreejs版本是0.131.3

解决办法:

1、将你场景中的renderer.outputEncoding设置为THREE.sRGBEncoding,然后

打开EffectComposer源码,在parameters中添加encoding,并将值设置为sRGBEncoding。

2、再添加outlinePass后再添加一个GammaCorrectionShader来矫正,可参考大佬文章

大佬文章

以下是第一个解决办法的发现过程

解决过程:

因为我的模型是gltf加载的,查询官网得知如下结论:

包含颜色信息(.map、.emissiveMap 和 .specularMap)的纹理在 glTF 中始终使用 sRGB 颜色空间,而顶点颜色和材质属性(.color、.emissive、.specular)使用线性颜色空间。在典型的渲染工作流程中,渲染器将纹理转换为线性色彩空间,进行光照计算,然后将最终输出转换回 sRGB 并显示在屏幕上。除非您需要在线性色彩空间中进行后期处理,否则在使用 glTF 时始终按如下方式配置 WebGLRenderer 

renderer.outputEncoding = THREE.sRGBEncoding;

假设渲染器的设置如上所示,GLTFLoader 将自动配置从 .gltf 或 .glb 文件引用的纹理。当从外部加载纹理(例如,使用 TextureLoader)并将它们应用到 glTF 模型时,必须给出颜色空间和方向


texture.encoding = THREE.sRG
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值