CODEWITHSUNDEEP
three.js
Premkumar
Premkumar

Reputation: 701

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

I'm getting "WebGL: INVALID_OPERATION: bindTexture: object not from this context" error while rendering the sky box using below lines of code. Due to that, the texture is not rendering, it give black color background.

This is not the case for all the times, sometimes it will render perfectly some times not. I've compared the geometry and material data while add to the scene, the results are same in both the case. 

      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

From the above screenshot, the point "1" is the output while I'm getting this error. The point "2" screen is with out any exception while rendering.

Appreciate your support to fix the issue.

Upvotes: 1

Views: 4861

Answers (1)

Simone Gianni
Simone Gianni

Reputation: 11662

I'm not sure this is the right solution for your problem, but solved mine that was, i suppose, similar.

In your code you have :

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

This is what I also had in my code cause is in all the examples around the internet.

A better version should be :

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

However, this is a shared variable : THREE.ShaderLib is one single instance. So if you have multiple THREE.js stuff on the page, they all share THREE.ShaderLib.

So, if two renderers are running, and both are using the same shader (in this case the tCube shader for the skybox), they will incorrectly access one the texture of the other (and possibily other values too).

When this happens, webgl complains that a texture from one context is being used in another context.

By cloning them, we create a local copy of the uniform avoiding this interference.

Again, this was my situation up to minutes ago, and cloning uniforms solved it, hope it can help you too.

Upvotes: 1

Related Questions