VideoTexture is bright and washed out

Questions
,
1

I found that all my VideoTextures appeared bright and washed out. Here is an example:

image
image510Ɨ647 66.2 KB

I simplified it down to a very basic hello-world app below. I am not doing any magic, just loading a sprite into a scene and rendering it. What would cause the color to be bright like this? Thanks.

index.html

<html>
<head>
<!-- must run: npx live-server -->
<script type="module" crossorigin src="./module.js"></script>
</head>
<body>
<div>Video Tag:</div>
<video id="vid" src="test2.mp4" autoplay muted loop width="500" height="300" style="object-fit: fill;"></video>
<div>WebGL:</div>
<div id="renderer" style="width: 500px; height: 300px; background-color: blue;"></div>
</body>
</html>

module.js

import * as THREE from 'https://unpkg.com/three@latest/build/three.module.js';

let renderer;
let scene;
let camera;

function initWebGL() {
  let videoElement = document.getElementById('vid');
  let rendererContainer = document.getElementById('renderer');

  renderer = new THREE.WebGLRenderer();
  camera = new THREE.OrthographicCamera();
  scene = new THREE.Scene();
  rendererContainer.appendChild(renderer.domElement);

  renderer.setSize(videoElement.width, videoElement.height);
  camera.left = videoElement.width / -2;
  camera.top = videoElement.height / 2;
  camera.right = videoElement.width / 2;
  camera.bottom = videoElement.height / -2;
  camera.near = 0;
  camera.far = 1000;
  camera.position.set(0, 0, 1);
  camera.updateProjectionMatrix();

  let texture = new THREE.VideoTexture(videoElement);
  let material = new THREE.SpriteMaterial({ map: texture, opacity: 100, transparent: false });
  let sprite = new THREE.Sprite(material);
  sprite.position.set(0, 0, 0);
  sprite.scale.set(videoElement.width, videoElement.height, 1);
  scene.add(sprite);

  queueAnimation();
}

function animate() {
  renderer.render(scene, camera);
  queueAnimation();
}

function queueAnimation() {
  requestAnimationFrame(animate);
}

initWebGL();
2

Likely need to set the color space:

texture.colorSpace = THREE.SRGBColorSpace;
2 Likes
3

Ah that did it, thanks!

4

Iā€™m seeing the same issue, where in your code did you add what fixed it for you?

texture.colorSpace = THREE.SRGBColorSpace

**just need to know where to add the above line.

5

I added mine immediately after the text was created (newed).