Webcam texture is washed out

NicholiNoah · July 2, 2023, 1:32am

Currently I’m using this three.js example as inspiration for adding a webcam into a 3D environment. I noticed this method renders the video image (or any other source through this method) as much “brighter” and washed out than the actual video source.

However, this method works great and doesn’t wash out the image at all. I’ve tried adapting the second method, but keep getting the same results.
Can someone help me identify the difference?

Mugen87 · July 2, 2023, 8:07am

Does the issue go away if you add this line:

texture.colorSpace = THREE.SRGBColorSpace;

NicholiNoah · July 2, 2023, 4:18pm

100% looks great now.
Thank you!

william_sullivan · April 3, 2024, 7:47pm

Where do you add this line of code?

I’ve tried adding it to my

but I don’t see a change in my video looking pale or blown out.

Could you show me where to add the fix please

Mugen87 · April 4, 2024, 8:24am

Do it like in the webcam example:

github.com

mrdoob/three.js/blob/2ff77e4b335e31c108aac839a07401664998c730/examples/webgl_materials_video_webcam.html#L47


      
          			function init() {
          
          				camera = new THREE.PerspectiveCamera( 60, window.innerWidth / window.innerHeight, 0.1, 100 );
          				camera.position.z = 0.01;
          
          				scene = new THREE.Scene();
          
          				video = document.getElementById( 'video' );
          
          				const texture = new THREE.VideoTexture( video );
          				texture.colorSpace = THREE.SRGBColorSpace;
          
          				const geometry = new THREE.PlaneGeometry( 16, 9 );
          				geometry.scale( 0.5, 0.5, 0.5 );
          				const material = new THREE.MeshBasicMaterial( { map: texture } );
          
          				const count = 128;
          				const radius = 32;
          
          				for ( let i = 1, l = count; i <= l; i ++ ) {

Topic		Replies	Views
VideoTexture is bright and washed out Questions textures , materials	4	878	April 3, 2024
Webcam input three.js Questions video-texture , webcam	13	9734	January 9, 2024
ThreeJS v155 Safari vs Chrome Video Texture Colors Questions textures , color , browser	3	712	August 12, 2023
Unable to load webcam as a texture into shader Questions textures , shaders	6	2016	October 6, 2020
Video texture with colors and quality wrong Questions textures , video	3	2717	June 1, 2020

Webcam texture is washed out

Related topics