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
EDIT
Here's a codepen with my current code : https://codepen.io/michaelgrc/pen/jOGEezY
this.maTexture = new THREE.VideoTexture( el.querySelector('video') );
this.monMaterial = new THREE.MeshBasicMaterial({
map: this.maTexture
})
I want to do a fancy transition. When I click on a video, I call it inside a canvas in order to make it bigger and deform it, using some post-rendering effects.
The codepen won't work because the video is host online, so the video won't display into my three.js render...
My issue : when I first click on the video (the one in HTML), the video inside the canvas appears right above it. The colors are slightly different so the user notices a jump.
Here's a record of my screen. You'll notice the change of tone when I click : https://michaelg.fr/tone.mov
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.