Question

我有一个project *，我在其中播放两个视频，运行一个简单的着色器以显示边缘并将其融合，然后在画布中显示结果。该项目基于this tutorial。我试图实现的目标是了解在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”。使用“纹理复制”分支。

Answer 1

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

从HTMLVideoElement更新WebAssembly中的WebGL纹理

1 个答案: