Three.js Webgl 纹理错误 - 2 的幂 - 没有视频答案

【问题标题】：Three.js Webgl texture errors - power of two - no videoThree.js Webgl 纹理错误 - 2 的幂 - 没有视频
【发布时间】：2018-11-08 18:09:20
【问题描述】：

我是 Three 的新手，最近构建了一个全栈 React 应用程序，它使用 Three.js 来渲染具有视频纹理的模型。我收到了一些警告，我认为这些导致应用程序运行非常缓慢。警告如下：

//出现一次

INVALID_VALUE：texImage2D：没有视频

//至少出现15次左右

[.Offscreen-For-WebGL-0x7fa724847800]渲染警告：绑定到纹理单元 0 的纹理不可渲染。它可能不是 2 的幂并且具有不兼容的纹理过滤。

我认为相关的代码是：

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

这是设置纹理的代码：

  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)

}

这是设置视频源的代码：

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
 }
}

完整的 Three.js 代码可以在这里找到：

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

可以在以下位置找到应用程序的实时版本（带有警告）： https://timothytolley.com

任何提示都会很棒。此外，任何使渲染运行更流畅的技巧都会很棒！

干杯，蒂姆

【问题讨论】：

标签： javascript reactjs three.js webgl

【解决方案1】：

您必须将 texture.minFilter 和 .magFilter 设置为 THREE.NearestFilter...在开始将其用作纹理之前，您可能必须确保您的视频 URL 已设置并可能正在播放。小时

【讨论】：

谢谢！会试试看！
这成功了！多谢了。我更改了过滤器并添加了一个超时，其中视频纹理设置如下 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) } }
我怎么知道什么时候使用nearestFilter vs linear？
如果你的纹理不是 2 的幂，即 2/4/8/16/32/64/128/256 等...你不能使用复杂的过滤，因为更多复杂的过滤方法依赖于纹理是 2 的幂。所以在这种情况下，你应该使用 Nearest。通常，只要您的纹理不是正方形或不是 2 的幂，请使用最近的。
感谢您花时间解释，非常有道理！干杯！