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 · Accepted Answer · 2018-05-30 03:31:45Z

1

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

answered May 30, 2018 at 3:31

manthrax

5,0861 gold badge19 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Tim Tolley Over a year ago

Thanks! will give this a try!

Tim Tolley Over a year ago

This worked! thanks heaps. I changes the filters and added a timeout where the video texture is set like so componentWillReceiveProps (nextProps) { if (this.props.video !== nextProps.video) { this.video.src = nextProps.video this.video.play() setTimeout(() => { this.screenMesh.material = this.movieMaterial this.screenMesh.needsUpdate = true }, 500) } }

Tim Tolley Over a year ago

how would i know when to use nearestFilter vs linear?

manthrax Over a year ago

If your texture is not a power of 2 sized, i.e. 2/4/8/16/32/64/128/256 etc... you can't use complicated filtering, since the more complex filtering methods rely on the texture being power of 2.. so in that case, you should use Nearest. Generally whenever your texture is non-square or non-power of 2, use nearest.

Tim Tolley Over a year ago

Thanks for taking the time to explain, makes perfect sense! Cheers!

Collectives™ on Stack Overflow

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

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related