同時顯示一個視頻元素的多個幀

一些背景：這裏的圖形新手，剛剛將我的腳趾用瀏覽器蘸進了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，就是這樣。（......這甚至有可能嗎？）我會嘗試使用你給出的基礎，並使用一些飛機來代替。謝謝你的幫助。 –

同時顯示一個視頻元素的多個幀

回答

相關問題