In my blogger blog: https://cglabprojects.blogspot.com

I have a newer blog post with

<canvas width = "570" height = "570" id = "my_Canvas1"></canvas>

and a document.getElementById() stmt

var canvaspmet = document.getElementById('my_Canvas1');

Another older post has two canvases:

<canvas height="200" id="mycanvas" width="600"></canvas>
var canvastemp = document.getElementById('mycanvas');


<canvas height="300" id="my_Canvas" width="300"></canvas>
var canvas = document.getElementById('my_Canvas');

Now the problem is if the two blog posts are viewed in one page the WebGL which does the rotation of the cube stops working(interaction). If I open individual posts they work fine and I get the images rendered perfectly.

What might be the issue? I have used unique Id for each canvas in each posts.

  • 3
    \$\begingroup\$ "It doesn't work" is never a good description of a problem. What are you expecting and what are you getting instead? What have you tried to identify the problem? Modern browsers have step by step debuggers. Put breakpoints and see what's going on. \$\endgroup\$ – Vaillancourt Sep 8 '19 at 11:03
  • \$\begingroup\$ I used a library three.js to render a few shaders in my blog. It was showing same shader for two blog posts. Now sorted out the issue. \$\endgroup\$ – Mukesh Kamath Mar 25 at 15:07

If you look at the browser error console (F12) you will notice a lot of errors:

WebGL: INVALID_OPERATION: uniformMatrix4fv: location is not from current program       
WebGL: INVALID_OPERATION: bindBuffer: object does not belong to this context

It appears that one WebGL application tries to access stuff which belongs to a different WebGL application. How is that possible?

You just discovered one of the reasons why global variables are evil.

You have two scripts on the website which both try to use the global variable gl to store their respective webgl context. So the two scripts are actually referring to the same global variable while they are programmed under the assumption that they have that variable to themselves. So you get a lot of chaos.

How can you solve that problem?

Wrap all your scripts in unnamed functions which you execute immediately. That way all variables you declare are local to that function. Other scripts can use the same variable names in their respective functions and there won't be any interference.

     // variables local to this function
     var canvas = document.getElementById('my_Canvas1');
     var gl = canvas.getContext('webgl');
      // write your code here as usual

<!-- Lots of HTML code -->

     // these variables here are different than the variables
     // with the same names in the other script, because each
     // variable is local to the unnamed function its declared in
     var canvas = document.getElementById('my_Canvas2');     
     var gl = canvas.getContext('webgl');   

Also make sure that you declare all variables with var (or more modern let) before you use them. If you use an undeclared variable, you are creating a global even if you are in a function. You can disable this by enabling strict mode. Using an undeclared variable will then throw an error.

| improve this answer | |
  • \$\begingroup\$ I am sure this is the problem so no harm in accepting answer before even implementing the solution... Im in office and my blog is my passion. So probably I'll have to wait till Saturday to set it right. \$\endgroup\$ – Mukesh Kamath Sep 9 '19 at 11:25
  • \$\begingroup\$ I did the requisite changes and it works fine now... \$\endgroup\$ – Mukesh Kamath Sep 15 '19 at 6:36

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.