There seems to be a slight variation in the colors of my video texture compared to the original video.
I've experimented with different three.js encoding options, but I still notice this discrepancy.
Does anyone have any tips on how to avoid this issue? Thanks
UPDATE
You can find the current version of my code on CodePen: https://codepen.io/michaelgrc/pen/jOGEezY
this.maTexture = new THREE.VideoTexture( el.querySelector('video') );
this.monMaterial = new THREE.MeshBasicMaterial({
map: this.maTexture
})
I'm aiming to create a stylish transition. When I click on a video, I want it to appear larger and distorted within a canvas, using some post-rendering effects.
Unfortunately, the video doesn't display properly in my three.js render because it's hosted online, as seen in the linked CodePen.
The main problem is that when you initially click on the video element in HTML, the video within the canvas shifts slightly in color, causing a noticeable shift for the user.
Here's a screen recording showing the change in tone when clicking: