three.js: WebGL: INVALID_OPERATION: bindTexture: 对象不是来自这个上下文

Question

我在使用以下代码行渲染天空盒时遇到“WebGL: INVALID_OPERATION: bindTexture: object not from this context”错误。因此，纹理不渲染，它给出黑色背景。

并非总是如此，有时它会完美呈现，有时则不会。我在添加到场景时比较了几何和 material 数据，两种情况下的结果都相同。

      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 着色器），它们将错误地访问一个的纹理（也可能是其他的）值也是如此）。

发生这种情况时，webgl 会抱怨来自一个上下文的纹理正在另一个上下文中使用。

通过克隆它们，我们创建了制服的本地副本，避免了这种干扰。

同样，这是我几分钟前的情况，克隆制服解决了它，希望它也能帮助你。

three.js: WebGL: INVALID_OPERATION: bindTexture: 对象不是来自这个上下文

three.js: WebGL: INVALID_OPERATION: bindTexture: object not from this context

three.js