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动画

1 个答案: