three.js视频纹理颜色问题

Question

I noticed that the colors of my video texture are slightly differents compare to my initial video.

I try to set different three.js encodings but I always notice a small difference.

Does anyone knows how to prevent this behavior? Thanks

Answer 1

Check your renderer toneMappingExposure and toneMapping properties, there are many of them and can change a lot the ambiance and look of your experience: this example is very handy to experiment with them before implementing them into your project: webgl_tonemapping , you can try with this and tweak the values until you get what you want:

renderer.physicallyCorrectLights = true
renderer.outputEncoding = THREE.sRGBEncoding
renderer.toneMapping = THREE.ACESFilmicToneMapping
renderer.toneMappingExposure = 1.3
//Just an configuration example

It may be also a environment map issue or maybe the problem itself is the tonemapping so, if after trying what I showed before doesn't work, you might find your answer in this post from someone having a similar issue: three-js-texture-tone-issue .