ThreeJs VideoTexture antialiasing/resolution

user_6448335 0
Viewed 260

So I have a VideoTexture in ThreeJS, and it's rendering really pixelly.

The actual pixelDensity of the renderer is plenty, and the rest of the scene is rendering fairly crisp - I've searched high and low for some information about what to do here, but I can't find anything.

  • Aniostropy settings do nothing, regardless of the number set
  • Increasing pixelDensity to an unusually high number helps, but doesn't fix it
  • The video itself is very high-definition
  • I've tried using FXAA as a shaderPass, but that also didn't seem to do anything

Does anyone know how to get a crisp VideoTexture? Surely it's possible to get something better than the below. Is there something up with the way I'm creating the texture/material?

video.load()
video.play()

const texture = new VideoTexture(video)
texture.encoding = sRGBEncoding

const material = new MeshStandardMaterial({
  map: texture,
  side: FrontSide,
})

const geometry = new PlaneGeometry( 30, 17, 32 )

enter image description here

react-three-fiber three.js javascript
1 Answers

Try changing the texture's minification and magnification filters. If you're using NearestFilter, it'll come out very pixellated, but you could do LinearFilter to get smooth interpolation in between texels:

const texture = new VideoTexture(video);
texture.encoding = sRGBEncoding;
texture.magFilter = THREE.LinearFilter;
user_26085150
Related