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

Question

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.

@WestLangley, I have included " skyBoxMaterial.needsUpdate = true;" to resolve this problem. I'm getting the same error, even after removing the line. — Premkumar
– Premkumar, Commented Mar 15, 2015 at 12:36
Can you link to a simple live example using the current version of three.js? — WestLangley
– WestLangley, Commented Mar 15, 2015 at 16:49
I'm seeing the same error on r70 when in the same page I'm rendering two canvases. Each canvas "alone" works, when both are on the page I see the issue. There is nothing shared between the two (at least, I'm almost sure I'm not sharing anything between the two :) ). I'm investigating ImageUtils.loadTextureCube, it does not seem to share anything either, but does an explicit texture.needsUpdate=true. — Simone Gianni
– Simone Gianni, Commented Mar 15, 2015 at 23:29
Or, said in another way, @PremkumarJayaseelan do you have other webgl contexts on the page? — Simone Gianni
– Simone Gianni, Commented Mar 15, 2015 at 23:38

Simone Gianni · Accepted Answer · 2015-03-16 00:04:26Z

1

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.

answered Mar 16, 2015 at 0:04

Simone Gianni

11.7k1 gold badge43 silver badges50 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Premkumar Over a year ago

Hi @Simone Gianni, I also had the same problem with shader. Your solution fixed my problem. Thank you so much :) Also, thank you for the detailed explanation about the case.

Collectives™ on Stack Overflow

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

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related