Ошибки текстуры Three.js Webgl - сила два - нет видео - PullRequest
Новая
       10

Ошибки текстуры Three.js Webgl - сила два - нет видео

0 голосов
/ 30 мая 2018

Я новичок в Three и недавно создал полнофункциональное приложение реагирования, которое использует Three.js для рендеринга модели с видео-текстурой.Я получаю несколько предупреждений и думаю, что это заставляет приложение работать очень медленно.Предупреждения выглядят следующим образом:

// появляется один раз

INVALID_VALUE: texImage2D: нет видео

// появляется не менее 15 раз

[.Offscreen-For-WebGL-0x7fa724847800] RENDER WARNING: текстура, привязанная к единице текстуры 0, не может быть воспроизведена.Это может быть не power-of-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)

}

, и этокод, который устанавливает видео 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
 }
}

полный код Three.js можно найти здесь:

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

и живую версию приложения(с предупреждениями) можно найти по адресу: https://timothytolley.com

Любые советы будут отличными.Кроме того, любые советы о том, как сделать рендеринг более плавным, были бы великолепны!

Приветствия, Тим

1 Ответ

0 голосов
/ 30 мая 2018

Вы должны установить для texture.minFilter и .magFilter значение THREE.NearestFilter ... также вам может потребоваться убедиться, что URL-адрес видео установлен и, возможно, воспроизводится, прежде чем начать использовать его в качестве текстуры.Hth

...