javascript - HTML Canvas 嗅探 Webgl 数据

Question

这个问题可能很奇怪，但假设我们有一个 Canvas ，例如可以绘制一些 3D 内容，如 experiment .

不管使用 ThreeJS、Babylon 或任何其他库来达到相同的效果，是否可以设置一些间隔来复制每个体素的诞生并稍后重复(重绘)。

我只是想记录 Canvas 绘制过程并重播它，而不使用 RTC 、视频或图像序列。

做了什么？

我一直在尝试 WebGl Context 和 Stream Capture ，但遗憾的是未能达到预期的结果。

谁能帮忙解决这个问题吗？

Answer 1

您可以包装 WebGL 上下文并捕获所有函数调用。包装 WebGL 上下文的示例类似于

const rawgl = document.querySelector("canvas").getContext("webgl");
const gl = wrapContext(rawgl);

gl.viewport(0, 0, gl.canvas.width, gl.canvas.height);
gl.enable(gl.SCISSOR_TEST);
gl.scissor(40, 50, 200, 60);
gl.clearColor(0,1,1,1);
gl.clear(gl.COLOR_BUFFER_BIT);
gl.scissor(60, 40, 70, 90);
gl.clearColor(1,0,1,1);
gl.clear(gl.COLOR_BUFFER_BIT);

function wrapContext(gl) {
  const wrapper = {};
  for (let name in gl) {
    var prop = gl[name];
    if (typeof(prop) === 'function') {
      wrapper[name] = wrapFunction(gl, name, prop);
    } else {
      wrapProperty(wrapper, gl, name);
    }
  }
  return wrapper;
}

function wrapFunction(gl, name, origFn) {
  // return a function that logs the call and then calls the original func
  return function(...args) {
    log(`gl.${name}(${[...args].join(", ")});`);
    origFn.apply(gl, arguments);
  };
}

function wrapProperty(wrapper, gl, name) {
  // make a getter because these values are dynamic
  Object.defineProperty(wrapper, name, {
    enumerable: true,
    get: function() {
      return gl[name];
    },
  });
}

function log(...args) {
  const elem = document.createElement("pre");
  elem.textContent = [...args].join(" ");
  document.body.appendChild(elem);
}

canvas { border: 1px solid black; }
pre { margin: 0; }

<canvas></canvas>  

在您的情况下，您无需记录调用，而是将它们添加到仅在您想要捕获的帧上的某些调用数组中。

然后，您需要以某种方式跟踪所有资源(缓冲区、纹理帧缓冲区、渲染缓冲区、着色器、程序)及其所有参数(例如纹理上的过滤设置)，并且您还需要跟踪统一设置等。

WebGL-Inspector这样做并可以播放帧，所以它可能是一个很好的例子。还有这个webgl-capture图书馆。

您需要为您的程序捕获什么取决于您的程序。例如，如果您知道缓冲区和纹理永远不会改变，并且当您想要播放时它们仍然在内存中，那么也许您不需要 try catch 上述两个示例都必须执行的缓冲区和纹理的状态。