1. Часто використовувані скорочення
2. Вибір стратегії оптимізації
3. Налаштування шарів
4. Малюнок 1. Приклад багатошарового уявлення
5. Налаштування стека перекриттів для елементів canvas
6. Лістинг 1. Стиль позиціонування елементів canvas
7. прозорі фони
8. Лістинг 2. Правило таблиці стилів для настройки прозорого фону
9. Міркування щодо шарів
10. Таблиця 1. Споживання пам'яті шарами canvas
11. Багатошарове уявлення сцени: гра
12. Малюнок 2. Складений ігрове уявлення
13. Лістинг 3. Псевдокод циклу рендеринга з одним елементом canvas
14. Лістинг 4. Псевдокод Entity
15. завдання шарів
16. перемальовувати області
17. Малюнок 3. Складений ігрове дійство з перемальовувати областями
18. Малюнок 4. перемальовувати області
19. Малюнок 5. Багатошарове ігрове уявлення
20. оптимізація рендеринга
21. Очищення окремо взятого об'єкта
22. Лістинг 5. Об'єкт з очищенням одного прямокутника
23. Малюнок 6. Очищення прямокутника
24. Лістинг 6. Псевдокод PanningEntity з очищенням одного прямокутника
25. Малюнок 7. Хмари з окремими перемальовувати областями
26. Очищення брудного прямокутника
27. Лістинг 7. Псевдокод DirtyRectManager
28. Малюнок 8. перемальовувати область для інтерактивного шару
29. Перезапис як спосіб очищення
30. Висновок
31. Ресурси для скачування

Нерідко в двовимірних іграх або при рендеринге елементів HTML5 canvas виконується оптимізація, що дозволяє використовувати кілька шарів для створення складовою сцени. При низкоуровневом рендеринге (на базі технології OpenGL або WebGL) рендеринг виконується за допомогою очищення і перемальовування сцени на кожному кадрі. Після того, як графічна гра реалізована, вона потребує оптимізації з метою скорочення обсягу рендеринга - ціною тих чи інших компромісів. Оскільки canvas є елементом DOM, можна накладати кілька елементів canvas у вигляді декількох шарів з метою оптимізації рендеринга.

Часто використовувані скорочення

• CSS: Cascading Style Sheets (каскадні таблиці стилів)
• DOM: Document Object Model (об'єктна модель документа)
• HTML: HyperText Markup Language (мова гіпертекстової розмітки, мова HTML)

У статті обґрунтовується доцільність багатошарового накладення елементів canvas. Відомості про настроювання DOM для реалізації багатошарового накладення елементів canvas. Застосування багатошарового уявлення з метою оптимізації вимагає різних прийомів. Крім того, в статті розглядаються концептуальні і технічні аспекти стратегій оптимізації, спрямованих на вдосконалення багатошарового підходу.

Ви можете завантажити вихідний код для прикладів, використаних в цій статті.

Вибір стратегії оптимізації

Вибір найкращої стратегії оптимізації може виявитися непростою справою. При плануванні своєї багатошарової сцени продумайте, з чого ця сцена буде складатися. Так, хорошим кандидатом для нашого випадку є рендеринг на великий екран значного обсягу графічного матеріалу, в якому багато разів використовуються якісь компоненти. Для реалізації таких ефектів, як паралакс або анімовані об'єкти, нерідко потрібен великий обсяг мінливого екранного простору. При розгляді найкращої стратегії оптимізації необхідно мати уявлення про ці ситуаціях. Хоча оптимізація на основі багатошарового накладення елементів canvas вимагає застосування декількох різних методів, вона забезпечує істотне прискорення в разі її належного застосування.

Налаштування шарів

При використанні багатошарового підходу перший крок полягає в налаштуванні canvas в DOM. Як правило, ця нескладна процедура зводиться до завдання елемента canvas і розміщення його в DOM, однак для шарів потрібна певна додаткова настройка стилів. При використанні CSS для успішного багатошарового накладення елементів canvas необхідно дотримати дві вимоги.

• Елементи canvas повинні існувати одночасно в одному місці області перегляду (viewport).
• Кожен елемент canvas має бути видно крізь інші елементи canvas.

на малюнку 1 показана загальна концепція накладення, що лежить в основі настройки шарів.

Малюнок 1. Приклад багатошарового уявлення

Для настройки шарів виконайте наступні кроки.

1. Додайте елементи canvas в DOM
2. Додайте стиль позиціонування елементів canvas, що дозволяє багатошарове накладення.
3. Налаштуйте стиль елементів canvas таким чином, щоб вони мали прозорий фон.

Налаштування стека перекриттів для елементів canvas

Створення стека перекриттів в CSS може вимагати певної настройки стилю. Існує безліч способів для реалізації перекриттів за допомогою HTML і CSS. У прикладі для цієї статті використовується одиночний тег <div>, що містить елементи canvas. Цей тег <div> задає унікальний ідентифікатор, який буде застосовувати стилі до своїх дочірнім елементам HTML5 canvas (див. лістинг 1 ).

Лістинг 1. Стиль позиціонування елементів canvas

#viewport {/ ** * Position relative so that canvas elements * inside of it will be relative to the parent * / position: relative; } #Viewport canvas {/ ** * Position absolute provides canvases to be able * to be layered on top of each other * Be sure to remember a z-index! * / Position: absolute; }

Контейнер <div> дозволяє виконати вищевказане вимога щодо накладення за допомогою застосування стилів до всіх дочірнім елементам canvas з метою використання абсолютного позиціонування. Застосовуючи відносне позиціонування в контейнері #viewport, ви забезпечуєте готовність до майбутніх вимогам, оскільки будь-які стилі абсолютного позиціонування, застосовані до дочірнім стилям, будуть відносними для контейнера #viewport.

Порядок елементів HTML5 canvas має значення. Упорядкування можна задавати згідно з порядком появи елементів в DOM або за допомогою застосування стилю z-index в тому порядку, в якому елементи canvas повинні відображатися. У деяких випадках інші стилі можуть вплинути на рендеринг; будьте обережні при введенні додаткових стилів, в тому числі будь-яких перетворень CSS.

прозорі фони

Для дотримання другої вимоги до стилю при багатошаровому накладення використовуйте прозорість. У наступному прикладі використовується спеціальна опція для налаштування фонового кольору в елементі DOM (див. лістинг 2 ).

Лістинг 2. Правило таблиці стилів для настройки прозорого фону

canvas {/ ** * Set transparent to let any other canvases render through * / background-color: transparent; }

Застосування стилів до елементів canvas для завдання прозорого фону реалізує друга вимога - можливість бачити крізь перекриваються елементи canvas. Тепер, коли ми маємо в своєму розпорядженні розміткою і стилями, які відповідають вимогам багатошарового уявлення, можна приступати до настройки багатошарової сцени.

Міркування щодо шарів

При виборі стратегії оптимізації необхідно мати уявлення про всі можливі компроміси при використанні тієї чи іншої стратегії. Багатошарове уявлення сцени з елементів HTML5 canvas - це стратегія, яка підвищує швидкість виконання ціною збільшення навантаження на пам'ять в процесі виконання. Ми збільшуємо "вага" сторінки в браузері з метою одержання більш високої частоти кадрів. У загальному випадку елемент canvas можна розглядати як графічну поверхню в браузері, що має графічний API-інтерфейс.

Виконавши відповідні тести в браузері Google Chrome 19 і задокументувавши споживання пам'яті його вкладками, ви зможете побачити очевидну тенденцію в споживанні пам'яті. Цей тест використовує тег a <div> зі стилями, описаними в попередньому розділі, і генерує заповнені однорідним кольором елементи canvas, які поміщаються в <div>. Елементи canvas мають розміри 1600 x 900 пікселів. Збір даних здійснює утиліта Task Manager браузера Chrome. Приклад виконання цього тесту показаний в таблиці 1 .

У Google Chrome Task Manager можна бачити обсяг пам'яті, який використовується сторінкою. Крім того, браузер Chrome надає дані по використанню т.зв. "Графічної" пам'яті. У загальному випадку в цій пам'яті міститься така інформація, як геометричні об'єкти, текстури і будь-які інші буферізованние дані, які можуть знадобитися комп'ютера для виведення даних елементів canvas на екран. Чим менше споживання пам'яті, тим нижче навантаження на комп'ютер. Хоча в цій сфері не існує ніяких однозначних числових рекомендацій, завжди здійснюйте тестування, щоб упевнитися в тому, що ваші програми не "викинуті за борт" і що вони не споживають занадто великого обсягу пам'яті. Надмірне споживання пам'яті призведе до збою браузера або сторінки через брак ресурсів пам'яті. Програмування графічної обробки - це окрема, дуже серйозна область, яка виходить за рамки даної статті. Ви можете почати освоєння цієї області з вивчення технології OpenGL або з перегляду відповідної документації браузера Chrome (див. Розділ ресурси ).

Таблиця 1. Споживання пам'яті шарами canvas

Кількість шарів Оперативна пам'ять Графічна пам'ять 0 30.0 11.9 1 37.6 28.9 1 37.6 28.9 2 49.0 46.6 3 52.2 59.6 8 58.4 98.0 16 65.0 130 32 107 187

згідно з даними таблиці 1 , Чим більше елементів HTML5 canvas представлено і використовується на сторінці, тим вище споживання графічної пам'яті. У пам'яті загального призначення також є лінійна кореляція, хоча темпи зростання при збільшенні кількості шарів значно менше. Хоча цей тест не оцінює вплив кількості шарів на продуктивність, він наочно показує, що елементи canvas істотно впливають на споживання графічної пам'яті. Обов'язково виконуйте навантажувальні тести на своїх цільових платформах, щоб упевнитися в тому, що ці платформи не мають обмежень, які робили б неможливим виконання вашої програми.

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

У наступному розділі пояснюється, як використовувати багатошарове подання для організації сцени.

Багатошарове уявлення сцени: гра

У цьому розділі ми освоїмо створення багатошарового рішення за допомогою рефакторінга рішення на основі одного елемента canvas. Це рішення призначене для відтворення ефекту паралакса в грі з переміщеннями в стилі бігуна. на малюнку 2 показано вікно цієї гри (ігрове подання), в якому присутні такі об'єкти, як хмари, пагорби, земля, фон, а також декілька інтерактивних об'єктів.

Малюнок 2. Складений ігрове уявлення

В процесі гри хмари, пагорби, земля і фон будуть переміщатися з різними швидкостями. По суті тим самим і буде досягатися ефект паралакса - коли елементи, розташовані далі від спостерігача, на задньому плані, переміщаються повільніше, ніж елементи, розташовані ближче до спостерігача. Ситуація додатково ускладнюється через те, що задній план (тобто фон) буде переміщатися досить повільно, щоб його рендеринг можна було здійснювати лише два рази в секунду.

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

Тепер, коли робочий простір задано, ми можемо поставити, які фрагменти сцени повинні знаходитися на тому чи іншому рівні. Після того як шари будуть організовані, ми досліджуємо різні стратегії рендеринга на предмет їх використання для багатошарового уявлення. Для початку розглянемо реалізацію рішення з використанням одного елемента canvas (див. лістинг 3 ).

Лістинг 3. Псевдокод циклу рендеринга з одним елементом canvas

/ ** * Render call * * @param {CanvasRenderingContext2D} context Canvas context * / function renderLoop (context) {context.clearRect (0, 0, width, height); background.render (context); ground.render (context); hills.render (context); cloud.render (context); player.render (context); }

Описується рішення має функцію render (див. Код в лістингу 3 ), Виклик якої здійснюється при кожному виклику циклу гри або на кожному інтервалі поновлення. В даному випадку рендеринг абстраговані від виклику основного циклу і від виклику процедури оновлення, яка оновлює положення кожного елемента. При застосуванні марнотратного принципу "очищення-рендеринг", спочатку виклик функції render очищає контекст, а потім здійснюється виклик функції render для кожного відповідного об'єкта на екрані. В лістингу 3 показаний досить "процедурний" спосіб розміщення об'єктів на canvas. Це рішення ефективно при рендеринге об'єктів на екран, однак воно не описує жодного з використовуваних методів рендеринга і не допускає ніякої різновиди оптимізації рендеринга.

Щоб краще зрозуміти методи рендеринга, ми використовуємо два типи об'єктів. В лістингу 4 показано два об'єкти, які ми будемо використовувати і поступово удосконалювати.

Лістинг 4. Псевдокод Entity

var Entity = function () {/ ** Initialization and other methods ** / / ** * Render call to draw the entity * * @param {CanvasRenderingContext2D} context * / this.render = function (context) {context.drawImage ( this.image, this.x, this.y); }}; var PanningEntity = function () {/ ** Initialization and other methods ** / / ** * Render call to draw the panned entity * * @param {CanvasRenderingContext2D} context * / this.render = function (context) {context.drawImage (this.image, this.x - this.width, this.y - this.height); context.drawImage (this.image, this.x, this.y); context.drawImage (this.image, this.x + this.width, this.y + this.height); }};

об'єкти в лістингу 4 зберігають змінні екземпляра для зображення об'єкта (x, y, ширина і висота). Використовувані об'єкти відповідають синтаксису JavaScript, проте в інтересах стислості для обраного об'єкта подано неповний псевдокод. В даний момент алгоритми рендеринга здійснюють досить ресурсозатратне рендеринг своїх зображень на canvas - без будь-якого врахування можливих потреб ігрового циклу.

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

завдання шарів

Тепер, коли ви знаєте, як реалізувати приклад з використанням єдиного елемента canvas, розглянемо способи вдосконалення сцени цього типу і прискорення циклу рендеринга. Щоб використовувати метод шарів, необхідно задати необхідні для багатошарового уявлення елементи HTML5 canvas. Для цього потрібно знайти перекриття при рендеринге об'єктів.

перемальовувати області

Щоб задати перекриття, розглянемо невидимі області, які носять назву redraw region (перемальовувати область). Перемальовувати області - це області, в яких малюються зображення об'єктів, що вимагають очищення елемента canvas. Перемальовувати області важливі для аналізу рендеринга, оскільки вони дозволяють знаходити методи оптимізації для поліпшення рендеринга сцени (див. Мал. 3 ).

Малюнок 3. Складений ігрове дійство з перемальовувати областями

З метою візуалізації ефектів, показаних на Мал. 3 , У кожного об'єкта в сцені є перекриття - т.зв. оверлей, який представляє собою перемальовувати область, яка охоплює всю ширину області перегляду і всю висоту зображення об'єкта. Дана сцена може бути розділена на три групи: фон (задній план), передній план і інтерактивні елементи. Кожна перемальовувати область в цій сцені має оверлей певного кольору, що дозволяє диференціювати різні області

• Фон - чорний оверлей
• Хмари - червоний оверлей
• Пагорби - зелений оверлей
• Земля - ​​синій оверлей
• Червона куля - синій оверлей
• Жовте перешкода - синій оверлей

У всіх оверлеїв, за винятком кулі і перешкоди, перемальовувати область охоплює всю ширину області перегляду. Зображення цих об'єктів заповнюють майже весь екран. Внаслідок вимог цих об'єктів до панорамування їх рендеринг здійснюється на всю ширину області перегляду, як показано на Мал. 4 . Передбачається, що куля і перешкоду рухаються по області перегляду і можуть мати відповідні області для позиціонування цих об'єктів. Якщо ви видалите зображення після їх рендеринга в сцену і залишите тільки перемальовувати області, то зможете легко побачити окремі шари.

Малюнок 4. перемальовувати області

Початкові шари очевидні, оскільки ми можемо бачити області, які накладаються один на одного. Оскільки області кулі і перешкоди накладаються на пагорби і на землю, ці об'єкти можна згрупувати в один шар - т.зв. інтерактивний шар. Інтерактивний шар буде верхнім шаром внаслідок порядку рендеринга ігрових об'єктів.

Ще один метод для знаходження додаткових шарів - зібрати всі неперекривающіеся області. Червона, зелена і синя області, які охоплюють всю область перегляду, не перекриваються. Ці області утворюють другий шар - передній план. Область хмар і область інтерактивних об'єктів не перекриваються, проте, оскільки куля здатний перестрибнути на червону область, нам слід вважати, що цей об'єкт знаходиться на окремому рівні.

Для області чорного кольору легко побачити, що фоновий об'єкт становить заключний шар. Хоча це і не відноситься до даної сцені, необхідно відзначити, що будь-які області, які заповнюють всю область перегляду, такі як фоновий об'єкт, слід розглядати як охоплюють весь шар. Задавши три наших шару, ми можемо приступати до зв'язування цих шарів з елементами canvas (див. Мал. 5 ).

Малюнок 5. Багатошарове ігрове уявлення

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

оптимізація рендеринга

OЦентральная частина стратегії багатошарового уявлення - оптимізація об'єктів. Багатошарове уявлення об'єктів дозволяє застосовуваті стратегію рендеринга. Будь-яка оптимізація в загально випадка націлена на Зменшення накладних витрат. Як було показано в табліці 1 , Введення Додатковий шарів збільшує накладні витрати у виде Підвищення споживання пам'яті. Методи оптимізації, описувані в цій статті, зменшують обсяг роботи, яку повинен виконати процесор для прискорення гри. Мета полягає в тому, щоб знайти спосіб зменшити підлягає рендерингу простір і видалити на кожному кроці максимально можливу кількість викликів функцій рендеринга і очищення.

Очищення окремо взятого об'єкта

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

Першою метою будуть об'єкти "перешкода" і "куля". Метод очищення окремого взятого об'єкта передбачає, що перед рендерингом об'єкта на новому місці необхідно очистити область, в якій був здійснений рендеринг цього об'єкта в попередньому кадрі. З цією метою ми вводимо в процедуру рендеринга кожного об'єкта спеціальний крок і зберігаємо обмежує прямокутник для зображення цього об'єкта. Додавання цього кроку модифікує об'єкт наступним чином (див. лістинг 5 ).

Лістинг 5. Об'єкт з очищенням одного прямокутника

var Entity = function () {/ ** Initialization and other methods ** / / ** * Render call to draw the entity * * @param {CanvasRenderingContext2D} context * / this.render = function (context) {context.clearRect ( this.prevX, this.prevY, this.width, this.height); context.drawImage (this.image, this.x, this.y); this.prevX = this.x; this.prevY = this.y; }};

Для поновлення функції render введемо виклик clearRect, який проводиться до звичайного виклику drawImage. Для цього кроку об'єкт повинен зберігати попереднє положення. на Мал. 6 показані положення, послідовно займані об'єктом.

Малюнок 6. Очищення прямокутника

YЕто рішення рендеринга можна реалізувати за допомогою створення методу clear для кожного об'єкта, виклик якого буде здійснюватися до кроку оновлення (в цій статті метод clear не використовуватиметься). Ви також можете ввести цю стратегію очищення в PanningEntity, щоб додати очищення для таких об'єктів, як земля і хмари (див. лістинг 6 ).

Лістинг 6. Псевдокод PanningEntity з очищенням одного прямокутника

var PanningEntity = function () {/ ** Initialization and other methods ** / / ** * Render call to draw the panned entity * * @param {CanvasRenderingContext2D} context * / this.render = function (context) {context.clearRect (this.x, this.y, context.canvas.width, this.height); context.drawImage (this.image, this.x - this.width, this.y - this.height); context.drawImage (this.image, this.x, this.y); context.drawImage (this.image, this.x + this.width, this.y + this.height); }};

Оскільки PanningEntity охоплює всю область перегляду, як розміру очищаемого прямокутника можна використовувати ширину елемента canvas. Застосування цієї стратегії очищення забезпечує перемальовувати області, які ми поставили для таких об'єктів, як хмари, пагорби і земля.

З метою подальшої оптимізації об'єкта "хмари" ми можемо розділити хмари на окремі об'єкти, кожен з яких матиме свою власну перемальовувати область. Це значно скоротить обсяг очищуваного екранного простору в перемальовувати областях хмар. на Мал. 7 показані нові перемальовувати області.

Малюнок 7. Хмари з окремими перемальовувати областями

Стратегія очищення окремо взятих об'єктів дає рішення, яке усуває більшість проблем у ігор з багатошаровими елементами canvas (як в розглянутому прикладі), проте вона допускає подальшу оптимізацію. Щоб визначити межі застосування для цієї стратегії рендеринга, припустимо, що куля стикається з трикутником. Якщо ці два об'єкти зіткнуться, їх перемальовував області можуть перекритися, що породить небажані артефакти рендеринга. Для багатошарового уявлення буде корисна й інша стратегія оптимізації очищення, найбільш підходяща для об'єктів, які можуть стикатися.

Очищення брудного прямокутника

Якщо не застосовується стратегія очищення окремо взятого об'єкта, гарною заміною може бути стратегія очищення брудного прямокутника. Цю стратегію очищення слід використовувати в ситуаціях з великою кількістю об'єктів, кожен з яких має свою перемальовувати область, таких як системи з високою щільністю частинок або космічна гра з астероїдами.

Концепція даного алгоритму полягає в тому, що він збирає перемальовувати області всіх керованих ним об'єктів і очищає всю область за один виклик операції очищення. В якості додаткової оптимізації ця стратегія очищення також видаляє повторювані виклики очищення, які в іншому випадку здійснив би кожен окремий об'єкт (див. лістинг 7 ).

Лістинг 7. Псевдокод DirtyRectManager

var DirtyRectManager = function () {// Set the left and top edge to the max possible // (the canvas width) amd right and bottom to least-most // Left and top will shrink as more entities are added this.left = canvas.width; this.top = canvas.height; // Right and bottom will grow as more entities are added this.right = 0; this.bottom = 0; // Dirty check to avoid clearing if no entities were added this.isDirty = false; // Other Initialization Code / ** * Other utility methods * / / ** * Adds the dirty rect parameters and marks the area as dirty * * @param {number} x * @param {number} y * @param {number} width * @param {number} height * / this.addDirtyRect = function (x, y, width, height) {// Calculate out the rectangle edges var left = x; var right = x + width; var top = y; var bottom = y + height; // Min of left and entity left this.left = left <this.left? left: this.left; // Max of right and entity right this.right = right> this.right? right: this.right; // Min of top and entity top this.top = top <this.top? top: this.top; // Max of bottom and entity bottom this.bottom = bottom> this.bottom? bottom: this.bottom; this.isDirty = true; }; / ** * Clears the rectangle area if the manager is dirty * * @param {CanvasRenderingContext2D} context * / this.clearRect = function (context) {if (! This.isDirty) {return; } // Clear the calculated rectangle context.clearRect (this.left, this.top, this.right - this.left, this.bottom - this.top); // Reset base values ​​this.left = canvas.width; this.top = canvas.height; this.right = 0; this.bottom = 0; this.isDirty = false; }};

Для інтеграції алгоритму очищення брудного прямокутника в цикл рендеринга потрібно, щоб виклик "менеджера" (manager) в лістингу 7 здійснювався до виклику рендеринга. Додавання об'єктів в цей менеджер дозволяє йому обчислювати розміри очищаемого прямокутника безпосередньо під час очищення. Цей менеджер здійснить необхідну нам оптимізацію, однак в залежності від ігрового циклу, його можна оптимізувати відповідно до цього циклом (див. Мал. 8 ).

Малюнок 8. перемальовувати область для інтерактивного шару

• Кадр 1 - Об'єкти стикаються, майже накладаючись один на одного.
• Кадр 2 - перемальовувати області об'єктів накладаються.
• Кадр 3 - перемальовувати області накладаються і збираються в один брудний чотирикутник.
• Кадр 4 - Брудний чотирикутник очищений.

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

Перезапис як спосіб очищення

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

Перезапис прискорює рендеринг об'єкта "земля" за допомогою повторного рендеринга зображення поверх результатів попереднього рендеринга. Візуалізація найбільшого шару, а саме, фону, також можна прискорити аналогічним чином.

Скорочення обсягів перемальовувати областей для кожного шару дозволило нам знайти ефективні стратегії оптимізації для кожного з цих шарів і містяться в них об'єктів.

Висновок

Багатошарове накладення елементів canvas - це стратегія оптимізації, яку можна застосувати до будь-якої інтерактивної сцені реального часу. Для оптимізації за допомогою багатошарового накладення необхідно розглянути перекриття і накладення об'єктів сцени, для чого проаналізувати перемальовувати області цієї сцени. Добрими кандидатами для оптимізації рендеринга за допомогою багатошарового накладення шарів елементів canvas є сцени, які мають набори перекриваються областей перемальовування, що дозволяють задати відповідні шари. У ситуаціях, коли є системи з великою кількістю частинок або великі набори стикаються фізичних об'єктів, багатошарове накладення елементів canvas є відмінним рішенням для оптимізації.

Ресурси для скачування

Схожі теми

• Оригінал статті: Optimize HTML5 canvas rendering with layering .
• Google Chrome Task Manager : Дізнайтеся, як використовувати інструмент Task Manager для отримання відомостей про певний процесі, виконуючий в браузері Google Chrome, а також для примусового закриття некоректно функціонуючих вкладок і додатків.
• GPU Accelerated Compositing in Chrome : Базова і докладна інформація про реалізацію апаратного прискорення графіки в Chrome.
• Parallax : Стаття у Вікіпедії про ефект паралакса.
• " Створення вражаючих графічних матеріалів за допомогою HTML5 Canvas , DeveloperWorks, лютий 2011 р Дізнайтеся, як вдосконалити свої веб-сторінки за допомогою простого, але досить потужного елемента HTML5 Canvas.
• Основи HTML5: Частина 4. Завершальний штрих - Canvas developerWorks, липень 2011 р Прочитайте це введення в елемент HTML5 canvas. Воно містить кілька прикладів для демонстрації функціональності цього елемента.
• Маніпулювання пікселями за допомогою canvas : Перегляньте цю демонстрацію від Safari Dev Center, яка є чудовим прикладом застосування canvas для створення ефективних візуальних активів.
• WHATWG : Зустрітися з цим співтовариством розробників, яке спільно з організацією W3C займається оптимізацією технології HTML5.
• Навчальний посібник по Canvas : Навчальний посібник і демонстрація від розробників Mozilla.
• Довідник по HTML5 Canvas : Корисні вправи на веб-сайті W3Schools.com, що допомагають відшліфувати свої знання в області canvas.
• jQuery Events API : Зустрітися з методами, які використовуються для реєстрації поведінки користувача при його взаємодії з браузером.
• OpenGL : Отримайте останні драйвери.
• jQuery Популярна JavaScript-бібліотека, яка спрощує відстеження HTML-документів, обробку подій, анімацію і Ajax-взаємодії з метою прискорення веб-розробки.
• Modernizr : JavaScript-бібліотека з відкритим вихідним кодом, яка допомагає створювати веб-сайти наступного покоління на базі технологій HTML5 та CSS3.
• Kibo Популярна бібліотека, спеціально написана для швидкої обробки клавіатурних подій незалежно від використовуваного браузера.

Підпішіть мене на ПОВІДОМЛЕННЯ до коментарів