Show two WebGL animations with the same shader

Question

I need to show two animations using WebGL on the page. Do I need to instantiate multiple shaders, or is there a way to reuse one shader? They are using the same program (so not entirely different animations). They both need to react to mouse events.

something like this

window.onload = function() {
    main('canvas1');
    main('canvas2');
}

function main(element) {
  // Get A WebGL context
  var canvas = document.getElementById(element);
  var gl = getWebGLContext(canvas);
  if (!gl) {
    return;
  }

  // setup GLSL program
  vertexShader = createShaderFromScriptElement(gl, "2d-vertex-shader");
  fragmentShader = createShaderFromScriptElement(gl, "2d-fragment-shader");
  program = createProgram(gl, [vertexShader, fragmentShader]);
  gl.useProgram(program);
  ...
}

I don't understand the derogaratory remarks. I asked a theoretical question about webgl, not particular code.

I ran this code and it works. So now all I need to know is if I can use mouse events on both. I'd be surprised if that didn't work.

Please provide more details. This doesn't explain well what is the problem and what is that you need. — Dragan Okanovic, May 25 '15 at 21:18
[does this answer help](http://stackoverflow.com/questions/26442362/webgl-javascript-object-transformations-with-multiple-objects/26444813#26444813)? — gman, May 26 '15 at 10:43
@gman Your answer did help, I didn't realize it was a link at first. — Michiel van der Blonk, Jun 10 '15 at 19:05

score 0 · Accepted Answer · edited May 23 '17 at 11:58

0

This was already answered by someone else: Is it possible to have two WebGL contexts on the same page?

WebGL cannot share resources over multiple contexts. But you can create an object with its own gl variable, and then have multiple contexts on the page. The only limit I see now is that somehow it's intensive for the system and it won't allow more than 16 concurrent contexts.

edited May 23 '17 at 11:58

Community

1
1

answered May 28 '15 at 18:00

Michiel van der Blonk

730
1
7
21

Show two WebGL animations with the same shader

1 Answers1