VideoTexture appearing dark

[darnfish]

Hey there,

I’m trying to use a VideoTexture to show a screen on a glossy surface. Here is my code:

const videoTexture = new THREE.VideoTexture(video)
videoTexture.format = THREE.RGBAFormat

screenMaterial = screenMaterial.clone()

screenMaterial.map = videoTexture
screenMaterial.side = THREE.DoubleSide
screenMaterial.toneMapped = true

screenMaterial.color = new THREE.Color('#ffffff')

The issue is that the video in the Three.js scene is a lot darker than the source material.

Here is the Three.js scene:

Here is the raw video file:

I’ve tried playing with every value to no avail. Would love some help here!

[Mugen87]

Not sure what type of material you use but I suggest you give the unlint MeshBasicMaterial a try. Just to rule out any lighting related issues.

Besides, can you please show how you create and configure your renderer?

[darnfish]

Hey, thanks for the reply :~)

Here’s what MeshBasicMaterial looks like, too bright now!

For the material, it’s pulled from a USDZ I have using three-usdz-loader. For lighting, I’m not doing anything other than using <Environment preset="city" />

Appreciate the help

[Mugen87]

Do you configure the outputEncoding of your renderer?

[darnfish]

@Mugen87

outputEncoding

I do not, should I? Just using the basic react-three-fiber <Scene>

[Mugen87]

Not sure this is the solution but try it with:

videoTexture.encoding = THREE.sRGBEncoding;

[darnfish]

Woahh no way! I added that and a hemisphereLight and things are looking perfect, thank you so so so much!!!

I don’t think it comes through on the screenshot tho, but that is ok :~)