Question

我想使用webgl创建实时视频延迟。基本上我想要一个滚动缓冲区，它可以保留一定数量的过去帧供我在着色器中使用。

我已经使用openFrameworks和ofxPlaymodes完成了这项工作，但我无法直观地了解我将其移植到javascript / webgl的具体方式。

从概念上讲，我可以想象这是如何可行的。首先，我将创建一个纹理数组。当Feed播放时，我遍历纹理数组，在每个纹理槽中存储一个帧并跟踪它的索引。

我给了他一个镜头，但我觉得我在这里朝错误的方向前进。这只是给我一个数组，每个indice都有相同的框架。

var textureArray = [];
var videoFrame;

function createAndSetupTexture(gl){
  var texture = gl.createTexture();
  gl.bindTexture(gl.TEXTURE_2D, texture);
  gl.texParameteri(gl.TEXTURE_2D,gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
  gl.texParameteri(gl.TEXTURE_2D,gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
  gl.texParameteri(gl.TEXTURE_2D,gl.TEXTURE_MIN_FILTER, gl.NEAREST);
  gl.texParameteri(gl.TEXTURE_2D,gl.TEXTURE_MAG_FILTER, gl.NEAREST);
  gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, true);
  gl.pixelStorei(gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL, true);
  return texture;
}


function setupTexArray(){
  for (var i = 0; i<numFrames; i++){
    videoFrame = createAndSetupTexture(gl);
    videoFrame.image = video;
    gl.bindTexture(gl.TEXTURE_2D, videoFrame);
    gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, videoFrame.image);
    textureArray.push(videoFrame);
  }
}

我已经看过这篇文章here关于在处理过程中这样做了，但他们使用的是像素数据而不是纹理。

我更愿意在gpu上做尽可能多的事情来保持速度。我最多想要在240p时获得10秒的延迟，我意识到这不是一个微不足道的帧数。使用我的openframeworks应用程序，我可以在内存不足的情况下以720p达到~15秒。

任何人都可以帮助我开始这个或者指向另一个已经完成了我正在寻找的项目吗？

谢谢！

webgl视频延迟/存储和访问过去的帧

0 个答案: