three.js: WebGL: INVALID_OPERATION: bindTexture: объект не из этого контекста

Question

Я получаю «WebGL: INVALID_OPERATION: bindTexture: объект не из этого контекста» ошибка при рендеринге окна с использованием нижеприведенных строк кода. Из-за этого текстура не рендеринга, она дает черный цвет фона.

Это не относится ко всем временам, иногда это будет выглядеть отлично несколько раз. Я сравнивал геометрию и данные материала, добавляя к сцене, результаты одинаковы в обоих случаях.

 var urls = [ 
 
       "img/bg/img-BACK.jpg", 
 
       "img/bg/img-FRONT.jpg", 
 
       "img/bg/img-TOP.jpg", 
 
       "img/bg/img-BOTTOM.jpg", 
 
       "img/bg/img-RIGHT.jpg", 
 
       "img/bg/img-LEFT.jpg" 
 
     ], 
 

 
     textureCube = THREE.ImageUtils.loadTextureCube(urls); // load textures 
 

 
     textureCube.format = THREE.RGBFormat; 
 
     var shader = THREE.ShaderLib["cube"]; 
 
     shader.uniforms["tCube"].value = textureCube; 
 

 
     var skyBoxMaterial = new THREE.ShaderMaterial({ 
 
     fragmentShader: shader.fragmentShader, 
 
     vertexShader: shader.vertexShader, 
 
     uniforms: shader.uniforms, 
 
     depthWrite: false, 
 
     side: THREE.BackSide 
 
     }); 
 
     skyBoxMaterial.needsUpdate = true; 
 

 
     var skybox = new THREE.Mesh(
 
      new THREE.CubeGeometry(10000, 10000, 10000), 
 
      skyBoxMaterial 
 
    ); 
 
     
 
     scene.add(skybox);

Screenshot

Из скриншоте выше, точка "1" является выход в то время как я получаю эту ошибку. Экран точки «2» не содержит никаких исключений при рендеринге.

Оцените свою поддержку, чтобы исправить проблему.

Answer 1

Я не уверен, что это правильное решение для вашей проблемы, но решил, что это было, похоже, похоже.

В коде у вас есть:

var shader = THREE.ShaderLib["cube"]; 
shader.uniforms["tCube"].value = textureCube; 
// .... 
var skyBoxMaterial = new THREE.ShaderMaterial({ 
    // ... 
    uniforms: shader.uniforms, 
}); 

Это то, что я имел в своем коде причины во всех примерах по всему Интернету.

Лучше версия должна быть:

var shader = THREE.ShaderLib["cube"]; 
var uniforms = THREE.UniformsUtils.clone(shader.uniforms); 
uniforms["tCube"].value = textureCube; 
// .... 
var skyBoxMaterial = new THREE.ShaderMaterial({ 
    // ... 
    uniforms: uniforms, 
}); 

Однако это общая переменная: THREE.ShaderLib является один единственный экземпляр. Итак, если на странице есть несколько материалов THREE.js, все они разделяют THREE.ShaderLib.

Итак, если работают два рендеринга, и оба используют один и тот же шейдер (в данном случае шейдер tCube для skybox), они будут неправильно обращаться к тексту другой (и, возможно, другим значениям).

Когда это происходит, webgl жалуется, что текстура из одного контекста используется в другом контексте.

Клонирование их, мы создаем локальную копию формы, избегающую этой помехи.

Опять же, это была моя ситуация до нескольких минут назад, и клонированная униформа решила ее, надеюсь, она тоже вам поможет.