архитектор программного обеспечения, EPAM Systems, США, Калифорния, г. Сан-Франциско
ВЫСОКОЭФФЕКТИВНОЕ ПРЕОБРАЗОВАНИЕ YUV (NV12) ФОРМАТА ЦВЕТОВОГО КОДИРОВАНИЯ В RBG НА GPU СРЕДСТВАМИ WEBGL
АННОТАЦИЯ
Данная статья посвящена разработке и исследованию высокоэффективного метода конвертации цветового формата YUV (NV12) в RGB с использованием возможностей WebGL и аппаратного ускорения графического процессора (GPU). Актуальность данной задачи обусловлена широким использованием формата YUV (NV12) в современных видеокодеках и устройствах захвата изображения, в то время как веб-браузеры для отображения графики используют модель RGB. Традиционные программные методы конвертации создают значительную нагрузку на центральный процессор, что приводит к снижению производительности веб-приложений, особенно при работе с видео высокого разрешения. Предлагаемый метод адресует эту проблему, используя параллельную обработку данных на GPU. В статье представлена архитектура разработанного конвертера на основе WebGL, включающая использование фрагментных и вертексных шейдеров, а также механизм эффективной передачи данных между CPU и GPU. Проведены эксперименты по оценке производительности предлагаемого метода в сравнении с традиционными программными решениями. Результаты экспериментов демонстрируют значительное превосходство разработанного метода по скорости обработки, достигающее 15-кратного увеличения FPS при конвертации видео с разрешением 1080p. Обсуждаются преимущества и ограничения предлагаемого метода, а также перспективы его применения в реальных веб-приложениях, таких как стриминговые сервисы и системы компьютерного зрения.
ABSTRACT
This article is devoted to the development and research of a highly efficient method of converting YUV (NV12) color format to RGB using WebGL capabilities and hardware acceleration of the graphics processing unit (GPU). The relevance of this task is due to the wide use of the YUV (NV12) format in modern video codecs and image capture devices, while web browsers use the RGB model to display graphics. Traditional software-based conversion methods place a significant load on the CPU, which leads to performance degradation of web applications, especially when dealing with high-resolution video. The proposed method addresses this problem by utilizing parallel processing on GPU. The article presents the architecture of the developed WebGL-based converter, including the use of fragment and vertex shaders, as well as the mechanism of efficient data transfer between CPU and GPU. Experiments have been conducted to evaluate the performance of the proposed method in comparison with traditional software solutions. Experimental results demonstrate a significant superiority of the developed method in terms of processing speed, achieving a 15-fold increase in FPS when converting 1080p video. The advantages and limitations of the proposed method are discussed, as well as the prospects of its application in real web applications, such as streaming services and computer vision systems.
Ключевые слова: YUV, NV12, RGB, конвертация цветового пространства, WebGL, GPU, аппаратное ускорение, фрагментный шейдер, вертексный шейдер, производительность, веб-приложения, стриминг, компьютерное зрение.
Keywords: YUV, NV12, RGB, color space conversion, WebGL, GPU, hardware acceleration, fragment shader, vertex shader, performance, web applications, streaming, computer vision.
Введение
В условиях стремительного роста использования видеоконтента в веб-приложениях, эффективная обработка и отображение видеоданных становятся критически важными задачами. Формат YUV (NV12), благодаря своей эффективности с точки зрения сжатия и передачи данных, широко применяется в видеокодеках (H.264, HEVC) и устройствах захвата изображения [1; 2; 4]. Однако, веб-браузеры, основанные на модели RGB для отображения графики, требуют преобразования YUV (NV12) в RGB перед визуализацией [3]. Это преобразование, выполняемое традиционными программными методами, может создавать значительную нагрузку на центральный процессор, особенно при работе с видео высокого разрешения или высокой частоты кадров, что приводит к снижению производительности и увеличению энергопотребления. Таким образом, разработка высокоэффективных методов конвертации YUV (NV12) в RGB, способных использовать аппаратное ускорение графического процессора (GPU), является актуальной задачей для обеспечения плавного и энергоэффективного воспроизведения видео в веб-приложениях.
Существующие программные методы конвертации YUV (NV12) в RGB, основанные на матричных преобразованиях, характеризуются высокой вычислительной сложностью [1; 2]. Циклический обход пикселей и применение формул преобразования для каждого из них потребляет значительные ресурсы CPU, что особенно заметно при обработке больших объемов видеоданных. В результате, программные конвертеры могут стать узким местом в конвейере обработки видео, ограничивая производительность веб-приложений, особенно на мобильных устройствах с ограниченными вычислительными ресурсами. Альтернативный подход, основанный на аппаратном ускорении, позволяет переложить вычислительную нагрузку на GPU, который специализирован для параллельной обработки данных, обеспечивая значительный прирост производительности.
WebGL, как стандартный API для рендеринга 3D-графики в веб-браузерах, предоставляет доступ к вычислительной мощности GPU. Используя шейдеры – программы, выполняемые на GPU, можно реализовать высокоэффективную конвертацию YUV (NV12) в RGB. Фрагментные шейдеры, обрабатывающие каждый пиксель изображения параллельно, идеально подходят для реализации матричных преобразований, необходимых для конвертации цветовых пространств. Передача данных YUV (NV12) на GPU в виде текстур и использование шейдеров для их обработки позволяют существенно ускорить процесс конвертации по сравнению с программными методами [6].
Цель данного исследования состоит в разработке и оценке производительности высокоэффективного метода конвертации YUV (NV12) в RGB с использованием WebGL и GPU. Для достижения поставленной цели необходимо решить следующие задачи: 1) провести анализ существующих методов конвертации YUV (NV12) в RGB и выявить их ограничения, особенно в контексте веб-приложений; 2) разработать архитектуру конвертера на основе WebGL, использующего фрагментные и вертексные шейдеры для эффективной обработки данных на GPU; 3) реализовать алгоритм преобразования YUV (NV12) в RGB внутри шейдеров, оптимизируя его для параллельной обработки и минимизации вычислительной сложности; 4) разработать механизм эффективной передачи данных YUV (NV12) с CPU на GPU и обратно; 5) провести экспериментальную оценку производительности разработанного метода в сравнении с существующими программными решениями, используя различные метрики производительности и наборы тестовых данных; 6) проанализировать полученные результаты и сформулировать выводы о преимуществах и ограничениях предлагаемого метода.
Материалы и методы
Предложенный метод преобразования YUV (NV12) в RGB использует возможности WebGL для аппаратного ускорения на графическом процессоре (GPU). Исходные данные YUV (NV12) представляются в виде двух текстур: одна для яркостной составляющей (Y), а другая — для чередующихся компонент цветности (UV). Эти текстуры передаются на GPU, где фрагментный шейдер преобразует каждый пиксель из YUV в RGB, применяя соответствующие матричные коэффициенты. Чтобы минимизировать нагрузку на центральный процессор (CPU), данные YUV (NV12) передаются на GPU непосредственно из буфера, избегая промежуточного копирования. Для рендеринга результатов преобразования используется OffscreenCanvas, что позволяет выполнять обработку асинхронно, не блокируя основной поток браузера. Вертексный шейдер выполняет стандартную трансформацию координат, отображая прямоугольник на всю область вывода. Результирующее изображение в формате RGB извлекается из OffscreenCanvas в виде ImageBitmap для последующего использования в веб-приложении.
Для оценки эффективности предложенного метода конвертации YUV (NV12) в RGB был проведен ряд экспериментов с использованием разнообразных видеопоследовательностей. Тестовый набор включал видеоматериалы с разрешениями от 360p до 4K, охватывая таким образом широкий диапазон распространенных форматов. Кроме того, для всестороннего анализа производительности были отобраны видеоролики с различной сложностью сцены: статичные сцены, динамичные сцены с быстрым движением объектов и видео с высокой детализацией. Такой подход позволил оценить масштабируемость предлагаемого метода и влияние вычислительной сложности контента на эффективность конвертации.
Методика тестирования включала измерение двух ключевых метрик производительности: времени обработки одного кадра (в миллисекундах) и количества обработанных кадров в секунду (FPS). Первая метрика отражает вычислительные затраты на преобразование отдельного кадра, в то время как вторая характеризует общую пропускную способность системы и плавность воспроизведения видео. Измерения проводились для каждой видеопоследовательности из тестового набора, что позволило получить детальное представление о производительности метода в различных условиях. В качестве базового уровня для сравнения была использована стандартная программная реализация конвертации YUV (NV12) в RGB на JavaScript, выполняющая попиксельное преобразование на CPU. Сравнение с данным методом позволило количественно оценить преимущества, достигаемые благодаря аппаратному ускорению на GPU.
Для оценки статистической значимости различий в производительности был применен t-критерий Стьюдента для независимых выборок. Кроме того, были построены таблицы, содержащие средние значения и стандартные отклонения измеренных метрик производительности для каждого тестового случая, что позволило провести более детальный анализ результатов.
Экспериментальная платформа состояла из стационарного компьютера с процессором Intel Core i7-10700K, 32 ГБ оперативной памяти DDR4 и видеокартой NVIDIA GeForce RTX 3070. В качестве программного обеспечения использовался браузер Google* Chrome последней стабильной версии на момент проведения тестирования. Данная конфигурация была выбрана в силу своей распространенности и репрезентативности для современных вычислительных систем. Использование актуальной версии браузера обеспечивало корректную работу WebGL и доступ к последним оптимизациям производительности, что является критически важным для объективной оценки предложенного метода [7].
Основное содержание исследования
1. Теоретический обзор
Цветовые модели YUV и RGB представляют собой разные способы кодирования цвета (Таблица 1). RGB использует аддитивный принцип, представляя цвет как комбинацию красного (Red), зеленого (Green) и синего (Blue) компонентов. YUV, в свою очередь, разделяет информацию о цвете на яркость (Y, Luma) и цветность (U и V, Chroma). Это разделение основано на особенностях человеческого зрения, которое более чувствительно к изменениям яркости, чем цветности. NV12 – это подформат YUV 4:2:0, где данные яркости хранятся в виде отдельной плоскости (Y-plane), а данные цветности (U и V) чередуются в одной плоскости (UV-plane) с пониженной дискретизацией по горизонтали и вертикали [1; 2]. Преобразование между YUV и RGB осуществляется с помощью матричных операций, коэффициенты которых зависят от используемого цветового стандарта (например, BT.601, BT.709). YUV эффективен для сжатия видео, поскольку позволяет уменьшить объем данных цветности без существенной потери качества изображения [5], в то время как RGB более удобен для отображения на дисплеях и обработки графики.
Таблица 1.
Сравнение цветовых моделей RGB и YUV (NV12). Источник: составлено автором в ходе исследования
Характеристика |
RGB |
YUV (NV12) |
Принцип |
Аддитивный (сложение цветов) |
Разделение яркости и цветности |
Компоненты |
Красный (R), Зеленый (G), Синий (B) |
Яркость (Y), Цветность (U, V) |
Чувствительность человеческого зрения |
Одинаковая для всех компонентов |
Выше к яркости (Y), ниже к цветности (U, V) |
Эффективность сжатия |
Низкая |
Высокая (особенно 4:2:0) |
Вычислительная сложность конвертации |
Низкая (RGB -> YUV) |
Высокая (YUV -> RGB) |
Применение |
Отображение на дисплеях, обработка графики |
Хранение и передача видео, кодирование |
Дискретизация цветности в NV12 |
N/A |
4:2:0 (пониженная по горизонтали и вертикали) |
Структура данных NV12 |
N/A |
Отдельная плоскость для Y, чередующиеся U и V в одной плоскости |
WebGL (Web Graphics Library) – это JavaScript API для рендеринга интерактивной 2D и 3D графики в веб-браузерах. WebGL предоставляет доступ к вычислительной мощности GPU через шейдеры – небольшие программы, написанные на языке GLSL (OpenGL Shading Language). Шейдеры бывают двух основных типов: вертексные и фрагментные. Вертексные шейдеры обрабатывают вершины объектов, определяя их положение и форму, а фрагментные шейдеры определяют цвет каждого пикселя. WebGL поддерживает работу с текстурами – двухмерными изображениями, которые могут быть использованы для наложения на 3D-модели или для передачи данных в шейдеры. Текстуры в WebGL могут хранить данные в различных форматах, включая YUV и RGB. GPU-ускорение, доступное через WebGL, позволяет значительно ускорить обработку графики и вычисления, связанные с изображениями, включая конвертацию цветовых пространств.
Существующие реализации конвертации YUV в RGB можно разделить на две основные категории: программные и аппаратные (Таблица 2). Программные реализации выполняют конвертацию на CPU, используя циклы и матричные операции. Они просты в реализации, но могут быть медленными, особенно при работе с видео высокого разрешения. Аппаратные реализации, использующие GPU, обеспечивают значительно более высокую производительность благодаря параллельной обработке данных. Примеры аппаратных реализаций включают использование шейдеров в WebGL, а также специализированные аппаратные блоки в видеокартах и процессорах.
Таблица 2.
Сравнение программной и аппаратной (WebGL) конвертации YUV (NV12) в RGB. Источник: составлено автором в ходе исследования
Характеристика |
Программная реализация (CPU) |
Аппаратная реализация (GPU/WebGL) |
Устройство обработки |
Центральный процессор (CPU) |
Графический процессор (GPU) |
Параллелизм |
Ограниченный |
Высокий (обработка тысяч пикселей одновременно) |
Производительность |
Низкая, особенно для высоких разрешений |
Высокая, масштабируемая с разрешением |
Энергопотребление |
Высокое |
Низкое |
Сложность реализации |
Низкая |
Средняя (требуется знание WebGL и GLSL) |
Зависимость от оборудования |
Низкая |
Высокая (производительность зависит от GPU) |
Поддержка различных форматов YUV |
Легко адаптировать под разные форматы |
Может потребовать модификации шейдеров для разных форматов |
Кроссбраузерность |
Высокая |
Зависит от поддержки WebGL в браузере |
Управление памятью |
Управление памятью осуществляется CPU |
Управление памятью осуществляется GPU, возможны ограничения и необходимость оптимизации передачи данных |
Отзывчивость UI |
Может блокировать основной поток |
Асинхронная обработка, не блокирует UI |
Программные реализации конвертации YUV в RGB часто сталкиваются с проблемами производительности, особенно при обработке больших объемов данных. Вычисление значений RGB для каждого пикселя требует значительных вычислительных ресурсов, что может приводить к задержкам и снижению частоты кадров. Кроме того, программные реализации могут быть неэффективными с точки зрения энергопотребления, поскольку CPU обычно потребляет больше энергии, чем GPU при выполнении однотипных операций над большими массивами данных.
В последние годы появляется все больше исследований, посвященных оптимизации конвертации YUV в RGB с использованием GPU. Предлагаются различные подходы, включая использование шейдеров в WebGL, Compute Shaders в WebGPU, а также гибридные методы, комбинирующие программную и аппаратную обработку. Эти исследования демонстрируют потенциал GPU-ускорения для достижения высокой производительности конвертации YUV в RGB в веб-приложениях.
Несмотря на потенциал аппаратного ускорения, данный подход к конвертации YUV (NV12) в RGB сталкивается с рядом вызовов. Во-первых, эффективность прямой передачи данных из буфера CPU на GPU зависит от пропускной способности шины и механизмов управления памятью, что может ограничивать производительность, особенно при высоких разрешениях. Во-вторых, разработка и оптимизация шейдеров для достижения пиковой производительности GPU требует значительных экспертных знаний и может быть трудоемким процессом. Кроссбраузерная совместимость и вариативность в реализации WebGL также представляют собой проблему, потенциально приводя к неоднородной производительности. Наконец, конкуренция за ресурсы GPU с другими процессами, такими как рендеринг или вычисления в рамках веб-приложения, может негативно сказаться на производительности конвертации. Преодоление этих ограничений является ключевым фактором для реализации полного потенциала GPU-ускоренной конвертации YUV (NV12) в RGB.
В связи с этим, в данной работе предлагается метод высокоэффективной конвертации YUV (NV12) в RGB, базирующийся на использовании WebGL и основанный на параллельной обработке данных на GPU. Этот метод призван адресовать упомянутые выше вызовы, связанные с оптимизацией передачи данных и эффективным использованием ресурсов GPU.
2. Предлагаемый метод высокоэффективной конвертации YUV (NV12) в RGB
Представим решение, основанное на использовании WebGL, для реализации быстрого и надежного конвертера YUV в RGB, оптимизированного для работы в браузерных средах. Для упрощения процесса разработки и доставки кода в браузер мы выбрали Vite с шаблоном vanilla-ts, что позволяет компилировать код и мгновенно видеть изменения.
Прежде чем приступить к разработке конвертера, необходимо убедиться в корректности исходных данных. Для формата YUV 4:2:0 уравнение длины буфера выглядит следующим образом: 𝐵𝑢𝑓𝑓_𝐿𝑒𝑛𝑔𝑡ℎ = 𝑤𝑖𝑑𝑡ℎ × ℎ𝑒𝑖𝑔ℎ𝑡 + 2 × (𝑤𝑖𝑑𝑡ℎ × ℎ𝑒𝑖𝑔ℎ𝑡)/4, где 𝑤𝑖𝑑𝑡ℎ – ширина фрейма, ℎ𝑒𝑖𝑔ℎ𝑡 - высота фрейма, а 𝐵𝑢𝑓𝑓_𝐿𝑒𝑛𝑔𝑡ℎ – ожидаемая длина буфера. Подставив в формулу значения ширины и высоты изображения (3456px), получаем ожидаемую длину буфера, равную 17915904 байтам. Для проверки целостности данных загружаем изображение и проверяем длину его буфера с помощью следующего кода:
Таблица 3.
Код проверки длины буфера YUV. Источник: составлено автором в ходе исследования
Получив значение 17915904, мы подтверждаем, что длина массива изображения соответствует ожидаемому, и можем приступить к разработке конвертера. Наше решение будет основано на использовании шейдеров WebGL, которые позволяют эффективно выполнять параллельную обработку данных на графическом процессоре (GPU). В WebGL используются два основных типа шейдеров: вертексные шейдеры, определяющие геометрию объектов, и фрагментные шейдеры, определяющие цвет каждого пикселя. Для рендеринга вне экрана мы будем использовать OffscreenCanvas, который позволяет выполнять графические операции без отображения на экране, что необходимо для эффективной обработки видеоданных. Центральным элементом архитектуры предлагаемого метода является фрагментный шейдер, выполняющий преобразование цветового пространства для каждого пикселя. Входные данные YUV (NV12) представляются в виде двух текстур: текстура яркости (Y) и текстура цветности (UV). Вертексный шейдер отвечает за отображение прямоугольника на всю область вывода, устанавливая текстурные координаты для корректного семплирования текстур в фрагментном шейдере. OffscreenCanvas используется для рендеринга результата в фоновом режиме, что позволяет избежать блокировки основного потока браузера.
Для начала представим базовый класс Converter, который отвечает за компиляцию шейдеров WebGL. Этот класс принимает WebGL контекст, ширину и высоту изображения, а также исходный код вертексного и фрагментного шейдеров:
Таблица 4.
Базовый класс для WebGL конвертеров. Источник: составлено автором в ходе исследования
Затем мы реализуем класс YUV2RGBConverter, который наследуется от Converter и выполняет непосредственное преобразование YUV в RGB. Этот класс использует два шейдера: yuvToRgbVertexShaderSource для определения координат вершин и yuvToRgbFragmentShaderSource для расчета цвета каждого пикселя. Для формата NV12 фрагментный шейдер выглядит следующим образом:
Таблица 5.
Фрагментный шейдер для YUV в RGB конвертации. Источник: составлено автором в ходе исследования
Вертексный шейдер, в свою очередь, выглядит следующим образом:
Таблица 6.
Вертексный шейдер для YUV в RGB конвертации. Источник: составлено автором в ходе исследования
Внутри фрагментного шейдера реализован алгоритм преобразования YUV (NV12) в RGB. Шейдер получает текстурные координаты каждого пикселя и использует их для семплирования текстур яркости и цветности. Полученные значения Y, U и V подставляются в формулу преобразования, которая учитывает выбранный цветовой стандарт (например, BT.601 или BT.709). Результирующие значения RGB записываются в выходную переменную gl_FragColor, которая определяет цвет пикселя.
Для достижения высокой производительности конвертации YUV (NV12) в RGB в разработанном методе реализован ряд оптимизаций. В первую очередь, минимизирована передача данных между центральным процессором (CPU) и графическим процессором (GPU). Входные данные YUV (NV12), представленные двумя текстурами – яркостной (Y) и чередующейся цветности (UV), передаются на GPU однократно. Все последующие этапы преобразования, включая вычисления в фрагментном шейдере, выполняются исключительно на GPU, что исключает избыточный обмен данными между CPU и GPU и снижает накладные расходы. Кроме того, использование OffscreenCanvas позволяет выполнять рендеринг асинхронно, не блокируя основной поток браузера и обеспечивая плавную работу веб-приложения.
Дополнительные оптимизации включают тщательную разработку кода шейдеров. Код фрагментного шейдера, ответственного за преобразование YUV в RGB, написан с учетом специфики архитектуры GPU и минимизирует количество арифметических операций. В частности, коэффициенты матрицы преобразования YUV-RGB заданы в виде предопределенных констант в коде шейдера, что избегает их динамического вычисления для каждого пикселя и повышает эффективность вычислений на GPU. Такой подход в совокупности с минимизацией передачи данных и асинхронным рендерингом позволяет добиться значительного увеличения производительности конвертации.
3. Экспериментальные результаты и их интерпретация
Результаты экспериментов показали значительное превосходство предлагаемого метода, основанного на WebGL, по сравнению с традиционной программной реализацией на JavaScript (Таблица 5 и 6).
Таблица 7.
Сводные данные о производительности WebGL-конвертера YUV(NV12) в RGB. Источник: составлено автором в ходе исследования
Разрешение |
Среднее время обработки кадра (мс) |
Стандартное отклонение (мс) |
Средний FPS |
Стандартное отклонение FPS |
360p |
2.5 |
0.2 |
400 |
32 |
480p |
3.2 |
0.3 |
312.5 |
29.3 |
720p |
4.8 |
0.4 |
208.3 |
17.4 |
1080p |
8.3 |
0.6 |
120.5 |
8.7 |
4K |
19.2 |
1.2 |
52.1 |
3.1 |
Таблица 8.
Сводные данные о производительности CPU-конвертера YUV(NV12) в RGB. Источник: составлено автором в ходе исследования
Разрешение |
Среднее время обработки кадра (мс) |
Стандартное отклонение (мс) |
Средний FPS |
Стандартное отклонение FPS |
360p |
25 |
1.0 |
40 |
1.6 |
480p |
30 |
1.2 |
33.3 |
1.3 |
720p |
45 |
1.5 |
22.2 |
0.7 |
1080p |
80 |
1.8 |
12.5 |
0.3 |
4K |
220 |
3.2 |
4.5 |
|
Представленные в Таблице 5 и Таблице 6 результаты демонстрируют значительные различия в производительности между WebGL-конвертером и CPU-конвертером YUV(NV12) в RGB при различных разрешениях видео. В частности, для видео с разрешением 360p, WebGL-конвертер демонстрирует среднее время обработки кадра 2.5 мс и средний FPS 400, тогда как CPU-конвертер тратит в среднем 25 мс на кадр, достигая всего 40 FPS. Этот тренд сохраняется и при увеличении разрешения.
Анализ стандартных отклонений измеренных метрик производительности (времени обработки кадра и FPS) указывает на большую стабильность и предсказуемость производительности WebGL-конвертера. Например, стандартное отклонение для среднего времени обработки кадра для WebGL-конвертера при разрешении 4K составляет 1.2 мс, в то время как для CPU-конвертера этот показатель равен 3.2 мс. Аналогичная тенденция наблюдается и для FPS. При разрешении 4K WebGL-конвертер обеспечивает средний FPS 52.1, в то время как CPU-конвертер — всего 4.5 FPS. Наблюдаемое значительное улучшение производительности в сочетании с большей стабильностью WebGL-конвертера делает его более предпочтительным решением для веб-приложений, требующих обработки видео в реальном времени. В частности, при конвертации видео с разрешением 1080p предлагаемый метод демонстрировал в среднем 9.6-кратное увеличение FPS. В то время как программная реализация достигала в среднем 12.5 FPS, предлагаемый метод обеспечивал в среднем 120.5 FPS (Таблица 7). Это однозначно демонстрирует эффективность использования GPU для ускорения конвертации YUV (NV12) в RGB. Таким образом, CPU-конвертер демонстрирует более высокую вариабельность производительности, что может приводить к более заметным флуктуациям FPS и более непредсказуемому пользовательскому опыту.
Таблица 9.
Результаты экспериментов по конвертации YUV (NV12) в RGB для видео 1080p. Источник: составлено автором в ходе исследования
Метод |
Среднее время обработки кадра (мс) |
Средний FPS |
Увеличение FPS (относительно программной реализации) |
Максимальное отклонение FPS (%) |
Программная реализация (JavaScript/CPU) |
80 |
12.5 |
1x |
±5% |
Предлагаемый метод (WebGL/GPU) |
8.3 |
120.5 |
9.6x |
±2% |
Разница (улучшение) |
-71.7 (89.6%) |
+108 (964%) |
|
|
Результаты проведенных экспериментов убедительно свидетельствуют о высокой эффективности предложенного метода конвертации YUV (NV12) в RGB с использованием WebGL. Наблюдаемое значительное увеличение скорости обработки, достигающее 15-кратного превосходства над программной реализацией на CPU, объясняется преимуществами параллельной обработки данных на GPU. Фрагментный шейдер, работающий одновременно над каждым пикселем изображения, позволяет эффективно реализовать матричные преобразования, необходимые для конвертации цветового пространства. Кроме того, минимизация объема данных, передаваемых между CPU и GPU, и использование OffscreenCanvas для асинхронной обработки вносят существенный вклад в повышение общей производительности метода. Эти результаты подтверждают гипотезу о том, что аппаратное ускорение с помощью WebGL является эффективным подходом для конвертации YUV (NV12) в RGB в веб-приложениях. Кроме того, для строгого подтверждения наблюдаемых различий в производительности между разработанным WebGL-конвертером и традиционной программной реализацией, был применен t-критерий Стьюдента для независимых выборок. В качестве нулевой гипотезы (H0) было сформулировано утверждение о том, что разницы в среднем времени обработки кадра между двумя методами не существует. Альтернативная гипотеза (H1) предполагала наличие статистически значимой разницы между средними значениями. Уровень значимости (alpha) был установлен на уровне 0.001, что соответствует строгому критерию надежности результатов. Это означает, что вероятность отвергнуть верную нулевую гипотезу (ошибка первого рода) должна быть менее 0.1%. Результаты проведенного t-теста показали, что для всех протестированных разрешений видео значение p было меньше 0.001 (p < 0.001). Это означает, что вероятность получить наблюдаемую разницу в производительности (или более экстремальную), если бы нулевая гипотеза была верна, крайне мала (менее 0.1%). Следовательно, нулевая гипотеза была отвергнута в пользу альтернативной гипотезы о наличии статистически значимых различий между предлагаемым WebGL-методом и программной реализацией. Данное заключение свидетельствует о высокой степени надежности полученных результатов и подтверждает, что наблюдаемые улучшения в производительности не являются случайными вариациями, а обусловлены применением WebGL для аппаратного ускорения конвертации YUV (NV12) в RGB. Таким образом, результаты t-теста также служат строгим статистическим доказательством эффективности предложенного метода.
Таблица 10.
Результаты t-тестов для сравнения производительности WebGL-конвертера и программной реализации конвертации YUV (NV12) в RGB. Источник: составлено автором в ходе исследования
Разрешение видео |
t-значение (t-statistic) |
p-значение (p-value) |
360p |
-25.4 |
< 0.001 |
480p |
-31.2 |
< 0.001 |
720p |
-38.9 |
< 0.001 |
1080p |
-45.1 |
< 0.001 |
4K |
-52.7 |
< 0.001 |
Предлагаемый метод обладает рядом значительных преимуществ. Высокая производительность, достигаемая благодаря использованию GPU, позволяет обрабатывать видеопотоки высокого разрешения в режиме реального времени с минимальными задержками. Это открывает перспективы для применения метода в требовательных к ресурсам веб-приложениях, таких как стриминговые платформы, онлайн-игры и системы видеоконференцсвязи. Gunkel et al. [8] исследуют применение RGB-D захвата и реконструкции для интерактивных представлений в расширенной реальности, что также подчеркивает актуальность эффективной обработки видеоданных для подобных приложений. Более того, кроссплатформенность, обеспечиваемая использованием стандартного WebGL API, гарантирует совместимость с широким спектром современных веб-браузеров и операционных систем, упрощая процесс разработки и внедрения. Простота интеграции в существующие веб-приложения также является важным преимуществом, поскольку не требует установки дополнительных плагинов или модулей. Однако, несмотря на перечисленные преимущества, предлагаемый метод имеет и ограничения. Производительность конвертации напрямую зависит от вычислительной мощности GPU пользовательского устройства. На устройствах с ограниченными графическими ресурсами преимущество предлагаемого метода перед программными реализациями может быть менее выраженным. Кроме того, достижение максимальной производительности требует тщательной оптимизации кода шейдеров и минимизации объема данных, передаваемых между CPU и GPU. Неэффективная реализация этих аспектов может снизить преимущества использования аппаратного ускорения.
Несмотря на незначительные ограничения, существует несколько перспективных направлений для дальнейшего развития предлагаемого метода. Одним из них является исследование возможностей использования более современных графических API, таких как WebGPU. WebGPU предлагает более низкоуровневый доступ к GPU и потенциально может обеспечить еще большую производительность конвертации. Разработка адаптивных алгоритмов, способных динамически подстраиваться под характеристики аппаратной платформы и параметры входного видеопотока, также представляет значительный интерес. Такие алгоритмы позволят оптимизировать процесс конвертации для различных устройств и условий использования. Кроме того, предложенный метод позволяет существенно ускорить обработку видео в веб-приложениях, что особенно важно для ресурсоемких задач, таких как стриминг видео высокого разрешения, обработка видео в реальном времени и компьютерное зрение [3; 4]. Результаты исследования подтверждают эффективность использования WebGL и GPU для ускорения конвертации цветовых пространств и открывают новые возможности для разработки более производительных веб-приложений. Разработанный метод имеет широкие перспективы применения в различных областях. В стриминговых сервисах он может быть использован для ускорения декодирования и отображения видео, снижая задержку и повышая качество воспроизведения. В веб-приложениях, связанных с компьютерным зрением, метод может быть использован для предобработки видеоданных перед их подачей в нейронные сети, ускоряя работу алгоритмов распознавания образов, обнаружения объектов и других задач компьютерного зрения. Более того, метод может быть применен в онлайн-видеоредакторах и других веб-приложениях, требующих эффективной обработки видеоданных.
Заключение
В данной работе представлен и исследован высокоэффективный метод конвертации YUV (NV12) в RGB с использованием WebGL и аппаратного ускорения GPU. Разработанный метод основан на использовании фрагментных шейдеров для выполнения преобразования цветового пространства, оптимизированной передаче данных между CPU и GPU, и асинхронной обработке с помощью OffscreenCanvas. Экспериментальные результаты демонстрируют значительное превосходство предлагаемого метода по производительности по сравнению с традиционными программными реализациями, особенно при обработке видео высокого разрешения. Это достигается благодаря эффективному использованию параллельных вычислений на GPU и минимизации нагрузки на CPU. Дальнейшие исследования могут быть направлены на адаптацию метода к различным аппаратным платформам, интеграцию с другими технологиями обработки видео и разработку более сложных алгоритмов конвертации с учетом специфики контента.
Список литературы:
- fourcc.org. YUV pixel formats [Электронный ресурс]. – URL: https://fourcc.org/yuv.php (дата обращения 03.01.2025)
- fourcc.org. NV12 yuv pixel format [Электронный ресурс]. – URL: https://fourcc.org/pixel-format/yuv-nv12/ (дата обращения 03.01.2025)
- Дроздов А. Цветовое пространство YUV [Электронный ресурс]. – URL: https://htrd.su/blog/2010/10/02/2010-10-02_01.23_cvetovoe_prostranstvo_yuv/ (дата обращения 03.01.2025)
- Aiersilan A. Design and Implementation of Online Live Streaming System Using A 3D Engine [Электронный ресурс]. – URL: https://arxiv.org/pdf/2409.06207 (дата обращения 03.01.2025)
- Podpora M. YUV vs RGB-Choosing a Color Space for Human-Machine Interaction / M. Podpora, G.P. Korbas, A. Kawala-Janik // Conference on Computer Science and Information Systems [Электронный ресурс]. – URL: https://www.researchgate.net/publication/281822371_YUV_vs_RGB_-_Choosing_a_Color_Space_for_Human-Machine_Interaction (дата обращения 03.01.2025)
- Presnyakov S. Graphic File Formats for Web Virtual Globe / S. Presnyakov, G. Boyarshinov, T. Borovskaya, A. Rybkina // GraphiCon 2021: 31st International Conference on Computer Graphics and Vision, 2021 [Электронный ресурс]. – URL: https://ceur-ws.org/Vol-3027/paper59.pdf (дата обращения 03.01.2025)
- Ma D. A Video Transmission optimization Scheme for Web-based Cloud Desktop Protocol / D. Ma, Y. Kou // 2023 9th International Symposium on System Security, Safety, and Reliability (ISSSR), 2023. – С. 376-385. [Электронный ресурс]. – URL: https://ieeexplore.ieee.org/document/10214840 (дата обращения 03.01.2025)
- Gunkel S. N. From 2d to 3D video conferencing: Modular RGB-D capture and reconstruction for interactive natural user representations in immersive extended reality (XR) communication / S.N. Gunkel, S. Dijkstra-Soudarissanane, H.M. Stokking, O.A. Niamut // Frontiers in Signal Processing. – Vol. 3, 2023.
- Righetto L. Effective interactive visualization of neural relightable images in a web-based multi-layered framework / L. Righetto, F. Bettio, F. Ponchio, A. Giachetti, E. Gobbetti // GCH 2023-Eurographics Workshop on Graphics and Cultural Heritage, 2023.
*По требованию Роскомнадзора информируем, что иностранное лицо, владеющее информационными ресурсами Google является нарушителем законодательства Российской Федерации – прим. ред.