Отображение нескольких кадров видеоэлемента одновременно - PullRequest
1 голос
/ 05 октября 2011

Немного предыстории: новичок в графике здесь, только что окунулся в мир 3D в браузере с превосходным mrdoob three.js.Я намерен в ближайшее время пройти через все пункты http://learningwebgl.com/:)


Я хотел бы знать, как можно примерно воссоздать что-то похожее на: http://yooouuutuuube.com/v/?width=192&height=120&vm=29755443&flux=0&direction=rand

Мое наивное понимание того, как работает yooouuutuuube, заключается в следующем:

  1. Создание массивных данных BitmapData (больше любого разумного размера окна браузера).
  2. Определитьколичество необходимых строк / столбцов (по всей плоскости BitmapData, а не только в видимой области) в зависимости от ширины / высоты целевого видеокадра
  3. Копировать пиксели из самого последнего видеокадра в позицию на BitmapData(в зависимости от направления движения)
  4. Итерация по каждой ячейке в BitmapData, копирование пикселей из предшествующей ей ячейки
  5. Прокрутка всей BitmapData в противоположном направлении, чтобы создать иллюзию движения, с эффектом Zoetrope-типа

Я бы хотел сделать это в WebGL, а не использовать Canvas, чтобы я мог воспользоваться преимуществами после обработки.ssing с использованием шейдеров (разделение шумовых и цветовых каналов для имитации хроматической аберрации).

Вот скриншот того, что у меня получилось:

enter image description here

  • Три видео(то же видео, но разделенное на каналы R, G и B) рисуется в 2D-контекст холста.Каждое видео слегка смещено, чтобы имитировать вид хроматической аберрации.
  • В Three.JS создается текстура, которая ссылается на этот холст.Эта текстура обновляется каждый цикл рисования.
  • В Three.JS создается материал шейдера, который связан с фрагментным шейдером (который создает шум / линии сканирования)
  • Этот материал затем применяется кколичество трехмерных плоскостей.

Это прекрасно работает для показа отдельных кадров видео, но я хотел бы посмотреть, смогу ли я показать несколько кадров одновременно, не добавляя дополнительную геометрию.

Каков оптимальный способ решения такой задачи?Есть ли какие-либо концепции, которые я должен изучать / исследовать более подробно?

1 Ответ

4 голосов
/ 06 октября 2011
<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>
...