javascript - webgl video delay / store and access past frames -


i'd create realtime video delay using webgl. want have rolling buffer keep number of past frames available me use within shader.

i've accomplished using openframeworks , ofxplaymodes, i'm having trouble visualizing how port on javascript/webgl.

conceptually can imagine how possible. first create array of textures. feed plays, iterate through texture array storing frame in each texture slot , keeping track of it's index.

i gave shot, feel i'm heading in wrong direction here. gets me array each indice has same frame.

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(){   (var = 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);   } } 

i've seen post here doing in processing, using pixel data instead of textures.

i'd prefer as can on gpu keep things speedy. @ i'd 10 second delay @ 240p, realize not insignificant amount of frames. openframeworks app i've been able ~15 seconds @ 720p before running out of memory.

can me started or perhaps point project has accomplished i'm looking for?

thanks!


Comments

Popular posts from this blog

google api - Incomplete response from Gmail API threads.list -

Installing Android SQLite Asset Helper -

Qt Creator - Searching files with Locator including folder -