Three.js Webgl texture errors - power of two - no video

Question

I'm new to Three and have recently built a full stack react app that uses Three.js to render a model with a video texture. I'm getting a few warnings and I think these are causing the app to run really slowly. The warnings are as follows:

// appears once

INVALID_VALUE: texImage2D: no video

//appears at least 15 or so times

[.Offscreen-For-WebGL-0x7fa724847800]RENDER WARNING: texture bound to texture unit 0 is not renderable. It maybe non-power-of-2 and have incompatible texture filtering.

I think the relevant code is:

const video = document.createElement('video')
video.setAttribute('crossorigin', 'anonymous')
video.load()
video.muted = 'muted'
const videoTexture = new THREE.VideoTexture(video)
videoTexture.generateMipmaps = false
videoTexture.minFilter = THREE.LinearFilter
videoTexture.magFilter = THREE.LinearFilter
videoTexture.format = THREE.RGBFormat
this.movieMaterial = new THREE.MeshPhongMaterial({map: videoTexture, 
overdraw: true, side: THREE.DoubleSide})
this.movieMaterial.map.needsUpdate = true

This is the code which sets the texture:

  handleComputerScreen (geometry) {
let mat = null
if (this.props.videoActive) {
  mat = this.movieMaterial
} else {
  mat = this.regScreenMaterial
}
this.screenMesh = new THREE.Mesh(geometry, mat)
this.screenMesh.castShadow = true
this.scene.add(this.screenMesh)

}

and this is the code which sets the video src:

componentWillReceiveProps (nextProps) {
 if (this.props.video !== nextProps.video) {
  this.video.src = nextProps.video
  this.video.play()
  this.screenMesh.material = this.movieMaterial
  this.screenMesh.needsUpdate = true
 }
}

the full Three.js code can be found here:

https://github.com/Timothy-Tolley/timothytolley-3js/blob/master/client/components/ThreeD/ThreeD.jsx

and a live version of the app (with warnings) can be found at: https://timothytolley.com

Any tips would be great. Also any tips of making the rendering run smoother would be awesome!

Cheers, Tim

manthrax manthrax · Accepted Answer · 2018-05-30T03:31:45

You have to set texture.minFilter and .magFilter to THREE.NearestFilter... also you may have to make sure your video URL is set and possibly playing, before you start using it as a texture. Hth

Three.js Webgl texture errors - power of two - no video

1 Answers