Методи прискорення обробки зображень у браузерному клієнті

Автор:

Анотація: У цій роботі досліджені технології та методи, що допоможуть прискорити обробку зображень в браузерному клієнті.

Бібліографічний опис статті:

. Методи прискорення обробки зображень у браузерному клієнті//Наука онлайн: Міжнародний електронний науковий журнал - 2018. - №12. - https://nauka-online.com/publications/technical-sciences/2018/12/metody-uskoreniya-obrabotki-izobrazhenij-v-brauzernom-kliente/

Стаття опублікована у: : Наука Онлайн No12 декабрь 2018

Технічні науки

УДК 004.418

Аміров Олександр Романович

студент

Національного технічного університету України

«Київський політехнічний інститут імені Ігоря Сікорського»

Амиров Александр Романович

студент

 Национального технического университета Украины

«Киевский политехнический институт имени Игоря Сикорского»

Amirov Olexander

Student of the

National Technical University of Ukraine

«Igor Sikorsky Kyiv Polytechnic Institute»

МЕТОДИ ПРИСКОРЕННЯ ОБРОБКИ ЗОБРАЖЕНЬ У БРАУЗЕРНОМУ КЛІЄНТІ

МЕТОДЫ УСКОРЕНИЯ ОБРАБОТКИ ИЗОБРАЖЕНИЙ В БРАУЗЕРНОМ КЛИЕНТЕ

METHODS OF ACCELERATION OF IMAGE PROCESSING IN A BROWSER CLIENT

Анотація. У цій роботі досліджені технології та методи, що допоможуть прискорити обробку зображень в браузерному клієнті.

Ключові слова: обробка зображень, веб асемблі, джаваскріпт, оптимізація обчислень.

Аннотация. В этой работе исследованы технологии и методы, которые помогут ускорить обработку изображений в браузерном клиенте.

Ключевые слова: обработка изображений, веб асембли, джаваскрипт, оптимизация вычислений.

Summary. In this work technologies and methods that help to accelerate the processing of images in the browser client are investigated.

Key words: image processing, web assembly, javascript, computational optimization.

На сьогоднішній день веб-технології розвиваються дуже стрімко. Виділяється тенденція поступового збільшення ролі клієнта у веб-додатках – все більше і більше логіки та обчислень переноситься на сторону клієнта. Це дозволяє полегшити роботу сервера, особливо при збільшенні кількості користувачів. Вже звичним є те, що клієнт виконує на своїй стороні сортування, фільтрацію та групування даних. А от більш важкі обчислення все ще залишаються на стороні серверу, оскільки JavaScript повільна мова для такого роду задач.

Обробка зображень є популярною задачею для різних типів систем. На даний момент вже існує декілька бібліотек мовою JavaScript, що виконують обробку зображень. Для звичайного редагування статичного зображення такі бібліотеки використовувати доцільно, але для використання у системах реального часу, де час виділений на обробку зображення може бути обмеженим необхідно проводити додаткові дослідження продуктивності. Такими системами можуть бути охоронні системи, стрімінгові системи та інші системи, що використовують покадрову обробку відеопотоку в реальному часі.

Оскільки мова йде про роботу з графікою, то в першу чергу було розглянуто таку технологію як WebGl – кросплатформений API для 3D-графіки в браузері, що використовує HTML5 елемент canvas, також оперує з DOM деревом веб сторінки. Код для такої технології реалізується С++ у вигляді написання шейдерів – алгоритмів, що призначені для виконання відеокартою [1]. Мета таких алгоритмів описати динамічне зображення за допомогою коду, а відеокарта може з дуже високою швидкістю його виконувати. Завдання вершинного шейдера – обчислювати положення вершин. Ґрунтуючись на положеннях вершин, які повертає функція, WebGL потім може растеризувати різні примітиви, включаючи точки, лінії і трикутники. В процесі растеризації цих примітивів WebGL вдається до використання другої функції – фрагментного шейдеру. Завдання фрагментного шейдера – обчислювати колір для кожного пікселя примітиву, який в даний момент відмальовується. Але в даному випадку це не надасть ніякої переваги в більшості алгоритмів, оскільки ми маємо працювати з готовим зображенням у вигляді матриці пікселів, а не генерувати нові зображення.

Ще однією ідеєю було паралелізувати алгоритми обробки, що має бути теоретично легким, оскільки зображення можна поділити на секції та обробляти кожну таку секцію окремо для більшості алгоритмів. Теоретично це може надати велике прискорення обробки, а також має розблоковувати інтерфейс додатку під час обчислень, оскільки JavaScript і відображення та інтерактивність браузерного інтерфейсу виконуються на одному потоці. На сьогоднішній день виконувати обчислення в різних потоках на клієнті дозволяє така технологія як WebWorker.

WebWorker – це браузерне API, що дозволяє виконувати JavaScript код у різних потоках. У багатопоточного програмування є багато питань, які необхідно вирішити при реалізації багатопоточності в мові. Одним з таких питань є – як правильно передавати дані між потоками чи поділяти спільні дані [2].

Ця технологія дозволяє описати окремий файл з JavaScript кодом, що при може бути запущений з основного потоку в декількох реплікаціях. Основний потік повністю контролює життєвий цикл дочірнього потоку – запускає його, передає повідомлення, за потреби припиняє його роботу. По суті WebWorker це браузерний фоновий процес, що очікує на команди від основного вікна. Цей процес має власне середовище в якому він може комунікувати з основних вікном через повідомлення – є можливість приймати повідомлення та відправляти основному вікну. Звісно є обмеження на тип передаваємих даних – це мають бути прості примітиви, об’єкти чи масиви. Важливо зазначити, що функції також не можна передавати, хоча в JavaScript функція це є теж об’єкт. Також при передачі через повідомлення виконується повне копіювання даних.

Оскільки ми маємо працювати з великою матрицею пікселів, то створення такої копії може виконуватись довше ніж виконання самого алгоритму та витрачати велику кількість пам’яті. В нашому випадку швидкість виконання алгоритмів досить невелика і не призводить до проблем, якщо б не треба було виконувати їх з великою частотою в реальному часі, де для обробки кожного кадру декілька мілісекунд грають велику роль. Копіювання зображень порівняно з цими алгоритмами досить важка операція, що тільки уповільнить виконання таких алгоритмів. У разі якщо швидкість копіювання набагато більша ніж виконання якогось важкого алгоритму використання технології WebWorker має сенс.

При дослідженні стало зрозуміло, що треба знайти саме таку технологію, яка б могла швидко виконувати алгоритми, але при цьому не мати додаткового навантаження як копіювання даних в WebWorker, за використання її методів. Найновіша з даних технологій WebAssembly якраз має всі необхідні властивості для даної задачі.

WebAssembly – це новий відкритий формат байт-коду, що виконується сучасними браузерами. Він дозволяє транслювати код, написаний на таких мовах як C, C ++, Rust в низькорівневі асемблерні інструкції та використовувати його в браузері. Формат має компактні розміри, високу продуктивність, близьку до нативної, і може одночасно працювати з JavaScript [3].

З wasm коду немає можливості доступитися до браузерного API, але в даному випадку це не проблема, оскільки більшість алгоритмів обробки зображень приймають на вхід матрицю пікселів і ще декілька примітивних параметрів. Реалізувавши такі методи як – корекція яскравості та контрастності, оператор Собеля, convolution фільтр та алгоритм виявлення рухів за допомогою браузерного методу performance.now() було виміряно, що алгоритми реалізовані у wasm модулі виконуються на 30-40% швидше за аналогічні методи реалізовані мовою JavaScript.

Також WebAssembly розробляється як веб-стандарт W3C, що означає, що в майбутньому він буде підтримуватись в усіх браузерах. Але і на даний момент він підтримується у всіх популярних браузерах крім Internet Explorer.

Висновки. Дослідження сучасних браузерних технологій показало, що вже зараз можливо реалізовувати додатки, з обробкою зображень в реальному часі у браузерних клієнтах

Література

  1. Kouichi M. WebGL Programming Guide: Interactive 3D Graphics Programming with WebGL (OpenGL) / Kouichi Matsuda, Rodger Lea – Addison-Wesley Professional, 2013. – 552
  2. Ido G. Web Workers: Multithreaded Programs in JavaScript / Ido Green – O’Reilly Media, 2012. – 62
  3. Mike R. Learn WebAssembly: Build web applications with native performance using Wasm and C/C++ / Mike Rourke – Packt Publishing, 2018. – 328

Перегляди: 475

Коментарі закрито.

To comment on the article - you need to download the candidate degree and / or doctor of Science

Підготуйте

наукову статтю на актуальну тему, відповідно до роздлів журналу

Відправте

наукову статтю на e-mail: editor@inter-nauka.com

Читайте

Вашу статтю на сайті нашого журналу та отримайте сертифікат