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
Post a Comment