CODEWITHSUNDEEP
javascriptvideothree.js
Michaël
Michaël

Reputation: 609

three.js video texture color issue

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

Upvotes: 1

Views: 1282

Answers (1)

alon
alon

Reputation: 50

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.

Upvotes: 1

Related Questions