从 HTMLVideoElement 更新 WebAssembly 中的 WebGL 纹理

Question

我有一个project* in which I play two videos, run a simple shader that shows edges and blends them, and display the result in a canvas. The project is based on this tutorial。我试图实现的目标是了解运行ning 在 JS 和 WebAssembly 上是否比仅在 JS 中运行 WebGL 更快，但目前我在每一帧上都在 JS 和 WebAssembly 之间切换，这似乎非常贵。

在每一帧中，代码将每个 HTMLVideoElement 的内容复制到 JS 中的 WebGL 纹理中：

export function updateTexture(gl, texture, video) {
  const level = 0;
  const internalFormat = gl.RGBA;
  const srcFormat = gl.RGBA;
  const srcType = gl.UNSIGNED_BYTE;
  gl.bindTexture(gl.TEXTURE_2D, texture);
  gl.texImage2D(
    gl.TEXTURE_2D,
    level,
    internalFormat,
    srcFormat,
    srcType,
    video
  );
}

然后调用 WebAssembly 来处理纹理的内容。现在，我看到纹理复制的时间成本相当昂贵，如果我对系统的理解正确，那么在 JS 和 WASM 之间不断切换也是有成本的。

有没有办法在WASM中复制当前的视频帧，以节省JS和WASM之间的来回？我看到的唯一方法是添加编解码器的使用，我想继续使用更高级别的接口。

*如果要运行项目，请调用'grunt exec'、'npm run copy-assets'、'npm run dev'。使用 'texture-copying' 分支。

Answer 1

我发现编译为 Asm.JS 而不是 WASM 可以消除上下文切换的成本，从而解决了我的问题。这不是一个完美的解决方案，但它仍然提供了比 JS 更好的性能。

从 HTMLVideoElement 更新 WebAssembly 中的 WebGL 纹理

Updating WebGL Textures in WebAssembly from HTMLVideoElement

javascript

video

webgl

webassembly