使用相同的着色器显示两个 WebGL 动画

Question

我需要在页面上使用 WebGL 显示两个动画。我需要实例化多个着色器，还是有办法重用一个着色器？他们使用相同的程序（因此不是完全不同的动画）。他们都需要对鼠标事件做出反应。

像这样

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);
  ...
}

我不明白贬义词。我问了一个关于 webgl 的理论问题，而不是特定的代码。

我运行这段代码有效。所以现在我需要知道的是我是否可以在两者上使用鼠标事件。如果这不起作用，我会感到惊讶。

Answer 1

其他人已经回答了这个问题： Is it possible to have two WebGL contexts on the same page?

WebGL 无法在多个上下文中共享资源。但是你可以用它自己的 gl 变量创建一个对象，然后在页面上有多个上下文。我现在看到的唯一限制是，不知何故它对系统来说是密集型的，它不允许超过 16 个并发上下文。

使用相同的着色器显示两个 WebGL 动画

Show two WebGL animations with the same shader

javascript

webgl