Немного предыстории: новичок в графике здесь, только что окунулся в мир 3D в браузере с превосходным mrdoob three.js.Я намерен в ближайшее время пройти через все пункты http://learningwebgl.com/:)
Я хотел бы знать, как можно примерно воссоздать что-то похожее на: http://yooouuutuuube.com/v/?width=192&height=120&vm=29755443&flux=0&direction=rand
Мое наивное понимание того, как работает yooouuutuuube, заключается в следующем:
- Создание массивных данных BitmapData (больше любого разумного размера окна браузера).
- Определитьколичество необходимых строк / столбцов (по всей плоскости BitmapData, а не только в видимой области) в зависимости от ширины / высоты целевого видеокадра
- Копировать пиксели из самого последнего видеокадра в позицию на BitmapData(в зависимости от направления движения)
- Итерация по каждой ячейке в BitmapData, копирование пикселей из предшествующей ей ячейки
- Прокрутка всей BitmapData в противоположном направлении, чтобы создать иллюзию движения, с эффектом Zoetrope-типа
Я бы хотел сделать это в WebGL, а не использовать Canvas, чтобы я мог воспользоваться преимуществами после обработки.ssing с использованием шейдеров (разделение шумовых и цветовых каналов для имитации хроматической аберрации).
Вот скриншот того, что у меня получилось:
- Три видео(то же видео, но разделенное на каналы R, G и B) рисуется в 2D-контекст холста.Каждое видео слегка смещено, чтобы имитировать вид хроматической аберрации.
- В Three.JS создается текстура, которая ссылается на этот холст.Эта текстура обновляется каждый цикл рисования.
- В Three.JS создается материал шейдера, который связан с фрагментным шейдером (который создает шум / линии сканирования)
- Этот материал затем применяется кколичество трехмерных плоскостей.
Это прекрасно работает для показа отдельных кадров видео, но я хотел бы посмотреть, смогу ли я показать несколько кадров одновременно, не добавляя дополнительную геометрию.
Каков оптимальный способ решения такой задачи?Есть ли какие-либо концепции, которые я должен изучать / исследовать более подробно?