1

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

Michaël
  • 489
  • 1
  • 5
  • 21
  • 1
    Please show us a minimal amount of code to see what the problem could be. https://stackoverflow.com/help/minimal-reproducible-example – M - Nov 30 '21 at 18:40
  • 1
    Could be [your renderer](https://threejs.org/docs/?q=webglren#api/en/renderers/WebGLRenderer.gammaFactor) needs a different `.gammaFactor` or `.outputEncoding`. Could be there was a color added to the material. Maybe lights are affecting it? Could be a number of things... – M - Nov 30 '21 at 18:45
  • At least help us to help you. Show a **screen grab** picture. We can't see your screen so now we must guess what colors you mean and also guess how they are slightly different? What color space is your video... is it BT.601 or BT.709? Check with your video editor or download a tool like **MediaInfo**. You might have to re-encode the video to a different color space. – VC.One Dec 01 '21 at 11:42
  • I tried to play with .gammaFactor and .outputEncoding but nothing changes. I provided a codepen in my initial post. – Michaël Dec 01 '21 at 17:45
  • Screen grab video is also added in my init post. – Michaël Dec 01 '21 at 17:51
  • The quickest solution I can think of is **not** to show the original video (hide with CSS styling ` – VC.One Dec 01 '21 at 18:48
  • Hey @VC.One, thanks for the answer. I cannot not show the original video since I might have 20 videos on the same page. I don't want to create a canvas for each one. I tried with the video you provided, the "jump" is still here, even with the THREE.RGBFormat. Do you have another lead ? Thanks a lot – Michaël Dec 02 '21 at 17:17
  • @Michaël Only good news is that this is not a webGL issue. I tried some raw [webGL test code](https://stackoverflow.com/a/68037735/2057709) and it draws the colors correct (no jump in brightness) The problem must be somewhere in the ThreeJS settings (if not HTML canvas itself). I still suspect **alpha** affecting colors. I know webGL but don't use ThreeJS, so I will experiment with it in one or two days (after my project deadline). – VC.One Dec 05 '21 at 21:45

1 Answers1

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.

alon
  • 50
  • 7
  • I suspect the `sRGB` vs `adobeRGB` color space conversion might be messing the colors, but the Asker didn't care to tell us about their input / output color formats. Javascript works in sRGB format so their input pixels must be different to sRGB since they change tone, – VC.One Dec 01 '21 at 11:41
  • I tried to play with theses values but I still noticed a different tone. Hey @VC.One, sorry not to be an expert and not knowing at once what you guys need. – Michaël Dec 01 '21 at 17:47