同时显示一个视频元素的多个帧

一些背景：这里的图形新手，刚刚将我的脚趾用浏览器蘸进了3D世界，用mrdoob的优秀three.js。我打算在http://learningwebgl.com/要经过所有TUTS很快:)同时显示一个视频元素的多个帧

我想知道一个人如何会去大致有关重新创建类似于： http://yooouuutuuube.com/v/?width=192&height=120&vm=29755443&flux=0&direction=rand

我的幼稚理解yooouuutuuube如何工作如下：

创建一个海量BitmapData（大于任何合理的浏览器窗口大小）。
确定所需的行/列的数目（在整个的BitmapData平面，而不仅仅是可见光区域）基于目标视频帧的宽度/高度从最近的视频帧上的位置
复制像素中BitmapData（基于移动的方向）
迭代穿过的BitmapData每个细胞，从它前面
滚动整个的BitmapData在相反的方向上产生运动的错觉的细胞复制像素，具有幻影箱型效果

我想在WebGL中做这个，而不是使用Canvas，这样我就可以利用着色器进行后期处理（噪声和颜色通道分离来模拟色差）。

下面是截图是我到目前为止有：

enter image description here

三部影片（相同的视频，但分成R，G和B通道）绘制在画布2D背景。每个视频略有偏移以伪造色差外观。
在引用此画布的Three.JS中创建纹理。每个绘制周期都会更新纹理。
在Three.JS中创建着色器材质，该着色器材料链接到片段着色器（创建噪声/扫描线）
然后将该材质应用于多个3D平面。

这适用于显示单帧视频，但我想看看是否可以一次显示多个帧而无需添加其他几何体。

什么是最好的方式去做这样的任务？是否有任何我应该更详细地研究/调查的概念？

来源

2011-10-04 Robin Pyon

<html> 
    <body> 
     <script> 

      var video = document.createElement('video'); 
      video.autoplay = true; 
      video.addEventListener('loadedmetadata', function (event) { 

       var scale = 0.5; 
       var width = video.videoWidth * scale; 
       var height = video.videoHeight * scale; 
       var items_total = (window.innerWidth * window.innerHeight)/(width * height); 

       for (var i = 0; i < items_total - 1; i ++) { 

        var canvas = document.createElement('canvas'); 
        canvas.width = width; 
        canvas.height = height; 

        canvas.context = canvas.getContext('2d'); 
        canvas.context.scale(scale, scale); 

        document.body.appendChild(canvas); 

       } 

       setInterval(function() { 

        var child = document.body.insertBefore(document.body.lastChild, document.body.children[ 1 ]); // children[ 0 ] == <script> 
        child.context.drawImage(video, 0, 0); 

       }, 1000/30); 

      }, false); 
      video.src = 'video.ogv'; 

     </script> 
    </body> 
</html>

来源

2011-10-05 20:43:32

哦，我刚刚阅读了部分说你想要WebGL的后处理的东西。那么，这应该是我认为的一个很好的基础。同样的技巧：每帧更新只有1个纹理，并重新交换所有平面。 –

我想我肯定是在考虑错误的方式 - 我希望能想出一个可以包含在ShaderMaterial中的解决方案，然后将其应用于一个PlaneGeometry，就是这样。（......这甚至有可能吗？）我会尝试使用你给出的基础，并使用一些飞机来代替。谢谢你的帮助。 –

同时显示一个视频元素的多个帧

回答

相关问题