HTML Canvas 嗅探 Webgl 数据答案

【问题标题】：HTML Canvas Sniff Webgl DataHTML Canvas 嗅探 Webgl 数据
【发布时间】：2017-06-03 14:19:42
【问题描述】：

这个问题可能很奇怪，但假设我们有一个画布，例如绘制一些像 experiment 这样的 3D 内容。

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

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

做了什么？

我一直在尝试 WebGl Context 和Stream Capture，可惜没能达到预期的效果。

有人可以帮忙吗？

【问题讨论】：

您是如何尝试流捕获的？在给定的example link 中它对我很有效。将其复制到控制台中：let s = mycanvas.captureStream(), r = new MediaRecorder(s), chunks = []; r.ondataavailable = e => chunks.push(e.data); r.onstop = e => { window.open(URL.createObjectURL(new Blob(chunks))); }; r.start(); setTimeout(_=>r.stop(), 3000);
@Kaiido 非常感谢您的评论，我做到了，但这个 blob 实际上是一个 webm 视频，在我的情况下实际上不是最佳解决方案，因为它的大小会很大。你能把这个添加为答案吗？

标签： javascript html5-canvas webgl pixel-manipulation webgl2

【解决方案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; }

&lt;canvas&gt;&lt;/canvas&gt;

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

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

WebGL-Inspector 可以做到这一点并且可以播放帧，所以它可能是一个很好的例子。还有这个webgl-capture 库。

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

【讨论】：

如何让滚动条出现在答案中？
什么意思？ It scrolls for me。如果它不适合你，我建议你file a bug。否则任何超过 40 行的代码块都会自动获得滚动条
感谢@gman 的帮助，你的回答让我发现了很多我以前没有意识到的东西。
@gman 是 capture webgl 你的库吗？如果是这样，请您添加一些示例，这听起来很有希望。
是的，我写的。我主要将它作为一个例子指出，但在实际使用它时，它会生成很大的文件，因为它必须写出所有数据（纹理和缓冲区），所以它是一个更好的例子。有一个工作示例here。它捕获第一帧，然后在示例上方显示生成的 HTML。如果您将该 HTML 复制并粘贴到另一个文件中，您会得到 this。

【解决方案2】：

我不知道您是如何尝试使用 captureStream 方法的，但在您的示例页面上，此代码确实有效。

let s = mycanvas.captureStream(),
r = new MediaRecorder(s),
chunks = [];
r.ondataavailable = e => chunks.push(e.data);
r.onstop = e => {
  let videoURL = URL.createObjectURL(new Blob(chunks));
  doSomethingWith(videoURL);
  };
r.start();
setTimeout(_=>r.stop(), 3000); // records 3 seconds

现在您已经获得了指向画布记录的有效 blobURL，您可以在 <video> 元素中播放它，然后在 draw it in your webgl context 中播放。

【讨论】：