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

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

我已经使用openFrameworks和ofxPlaymodes完成了这项工作，但我很难想象如何将其移植到javascript/webgl

从概念上讲，我可以想象这是怎么可能的。首先，我将创建一组纹理。在提要播放时，我遍历纹理数组，在每个纹理槽中存储一帧，并跟踪其索引

我试过了，但我觉得我走错了方向。这就得到了一个数组，其中每个标记都有相同的帧

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);
  }
}

我看过这篇关于处理的文章，但是他们使用像素数据而不是纹理

我更愿意在gpu上尽可能多地工作，以保持速度。最多我希望在240p时获得10秒的延迟，我意识到这不是一个微不足道的帧数。使用我的openframeworks应用程序，我可以以720p的速度运行15秒左右，然后内存就会耗尽

有人能帮我开始这个项目吗？或者可以指出另一个已经完成我所寻找的项目吗

---

谢谢

到底是什么问题？为什么您在以前的程序中所做的不完全适用于WebGL？我不确定如何设置循环缓冲区。我以前制作的应用程序在ofx插件中隐藏了大部分内容。对于缓冲区，它使用deque保存帧，然后如果缓冲区已满，则开始删除添加的第一个帧。他们使用一个称为header的单独类来计算缓冲区中的位置，并执行设置延迟之类的操作。我认为这将是一个将相关位转换为js/webgl的问题。我希望可能有人知道或创建了类似的项目或库，但事实并非如此。循环缓冲区是基本的编程。谷歌？对不起，我并不是故意小气，但在这个问题下，这可以说是不应该回答的。事实上，stackoverflow在循环缓冲区上有很多答案。JavaScript中的一种简单方法是生成数组。将新事物推到末端阵列上，将旧事物从开头移出。