Оптимизация рендеринга элементов HTML5 canvas посредством многослойного представления

Вне зависимости от платформы большинство графических элементов нуждается в той или иной форме оптимизации. В этой статье описывается метод оптимизации, основанный на многослойном наложении элементов canvas. Мы последовательно рассмотрим простой пример и с его помощью изучим, как задавать слои, а затем рассмотрим уникальные методики рендеринга для оптимизации слоев. Многослойное представление элементов canvas – это стратегия оптимизации, которую можно применить к любой интерактивной сцене реального времени.

Адам Ранфельт, разработчик программного обеспечения, The Nerdery

Adam RanfeltАдам Ранфельт (Adam Ranfelt) являет собой наглядный пример приверженности компании The Nerdery к технологической независимости. В 2009 г. А. Ранфельт окончил университет штата Миннесота с ученой степенью по вычислительной технике и с тех пор находится на переднем краю ИТ-технологий. Он является экспертом в таких областях, как HTML, ActionScript, Java и Objective-C. Перед приходом в компанию The Nerdery в 2010 году А. Ранфельт работал в компании Curb-Crowser Design, где занимался созданием и поддержкой многочисленных проектов в области цифровых медиа. А. Ранфельт уверен в необходимости применения надлежащей технологии для каждого порученного ему задания – он отлично владеет более чем десятью языками программирования и различными числовыми методами. В 2012 г. технические и лидерские навыки А. Ранфельта получили свою достойную оценку – он был назначен ведущим инженером по программному обеспечению.



09.09.2013

Введение

Нередко в двумерных играх или при рендеринге элементов 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. Пример многослойного представления
layer example diagram

Для настройки слоев выполните следующие шаги.

  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
Количество слоевОперативная памятьГрафическая память
030.011.9
137.628.9
137.628.9
249.046.6
352.259.6
858.498.0
1665.0130
32107187

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

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

В следующем разделе объясняется, как использовать многослойное представление для организации сцены.


Многослойное представление сцены: игра

В этом разделе мы освоим создание многослойного решения посредством рефакторинга решения на основе одного элемента canvas. Это решение предназначено для воспроизведения эффекта параллакса в игре с перемещениями в стиле бегуна. На рисунке 2 показано окно этой игры (игровое представление), в котором присутствуют такие объекты, как облака, холмы, земля, фон, а также несколько интерактивных объектов.

Рисунок 2. Составное игровое представление
composite game view

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

В обычных условиях "хорошее" решение очищало бы весь экран и повторно прорисовывало бы его на каждом кадре, поскольку изображение фона непрерывно изменяется. Однако поскольку в данном примере фон изменяется лишь два раза в секунду, у нас нет необходимости осуществлять его рендеринг на каждом кадре.

Теперь, когда рабочее пространство задано, мы можем задать, какие фрагменты сцены должны находиться на том или ином уровне. После того как слои будут организованы, мы исследуем различные стратегии рендеринга на предмет их использования для многослойного представления. Для начала рассмотрим реализацию решения с использованием одного элемента 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. Составное игровое представление с перерисовываемыми областями
Composite game view with redraw regions

С целью визуализации эффектов, показанных на рис. 3, у каждого объекта в сцене имеется перекрытие – т.н. оверлей, представляющий собой перерисовываемую область, которая охватывает всю ширину области просмотра и всю высоту изображения объекта. Данная сцена может быть разделена на три группы: фон (задний план), передний план и интерактивные элементы. Каждая перерисовываемая область в этой сцене имеет оверлей определенного цвета, что позволяет дифференцировать различные области

  • Фон – черный оверлей
  • Облака - красный оверлей
  • Холмы - зеленый оверлей
  • Земля - синий оверлей
  • Красный шар - синий оверлей
  • Желтое препятствие - синий оверлей

У всех оверлеев, за исключением шара и препятствия, перерисовываемая область охватывает всю ширину области просмотра. Изображения этих объектов заполняют почти весь экран. Вследствие требований этих объектов к панорамированию их рендеринг осуществляется на всю ширину области просмотра, как показано на рис. 4. Предполагается, что шар и препятствие двигаются по области просмотра и могут иметь соответствующие области для позиционирования этих объектов. Если вы удалите изображения после их рендеринга в сцену и оставите только перерисовываемые области, то сможете легко увидеть отдельные слои.

Рисунок 4. Перерисовываемые области
Redraw regions

Начальные слои очевидны, поскольку мы можем видеть области, которые накладываются друг на друга. Поскольку области шара и препятствия накладываются на холмы и на землю, эти объекты можно сгруппировать в один слой – т.н. интерактивный слой. Интерактивный слой будет верхним слоем вследствие порядка рендеринга игровых объектов.

Еще один метод для нахождения дополнительных слоев - собрать все неперекрывающиеся области. Красная, зеленая и синяя области, которые охватывают всю область просмотра, не перекрываются. Эти области образуют второй слой — передний план. Область облаков и область интерактивных объектов не перекрываются, тем не менее, поскольку шар способен перепрыгнуть на красную область, нам следует считать, что этот объект находится на отдельном уровне.

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

Рисунок 5. Многослойное игровое представление
layered game view

Теперь, когда слои для всех сгруппированных объектов заданы, можно начинать оптимизацию очистки элемента 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. Очистка прямоугольника
Clear Rect

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. Облака с отдельными перерисовываемыми областями
Clouds with singular redraw regions

Стратегия очистки отдельно взятых объектов дает решение, которое устраняет большинство проблем у игр с многослойными элементами 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. Перерисовываемая область для интерактивного слоя
Redraw region for interactive layer
  • Кадр 1 – Объекты сталкиваются, почти накладываясь друг на друга.
  • Кадр 2 – Перерисовываемые области объектов накладываются.
  • Кадр 3 – Перерисовываемые области накладываются и собираются в один грязный четырехугольник.
  • Кадр 4 – Грязный четырехугольник очищен.

На рис. 8 показана перерисовываемая область, которую описываемый алгоритм рассчитал для объектов в интерактивном слое. Поскольку игра предусматривает взаимодействие именно в этом слое, стратегия очистки грязного прямоугольника является вполне достаточной для решения задачи перерисовывания области для интерактивных и перекрывающихся объектов.


Перезапись в качестве способа очистки

Для полностью непрозрачных объектов, анимация которых осуществляется внутри постоянной перерисовываемой области, в качестве метода оптимизации можно использовать перезапись. Рендеринг непрозрачного битового массива в некоторую область — по умолчанию, это составная операция — поместит пиксели в это место вне зависимости от результатов первоначального рендеринга в эту область. Такая оптимизация устраняет необходимость вызова очистки перед вызовом рендеринга, поскольку этот рендеринг покроет всю первоначальную область.

Перезапись ускоряет рендеринг объекта "земля" посредством повторного рендеринга изображения поверх результатов предыдущего рендеринга. Рендеринг самого большого слоя, а именно, фона, также можно ускорить аналогичным образом.

Сокращение размеров перерисовываемых областей для каждого слоя позволило нам найти эффективные стратегии оптимизации для каждого из этих слоев и содержащихся в них объектов.


Заключение

Многослойное наложение элементов canvas – это стратегия оптимизации, которую можно применить к любой интерактивной сцене реального времени. Для оптимизации посредством многослойного наложение необходимо рассмотреть перекрытия и наложения объектов сцены, для чего проанализировать перерисовываемые области этой сцены. Хорошими кандидатами для оптимизации рендеринга с помощью многослойного наложения слоев элементов canvas являются сцены, которые имеют наборы перекрывающихся областей перерисовки, позволяющие задать соответствующие слои. В ситуациях, когда имеются системы с большим количеством частиц или большие наборы сталкивающихся физических объектов, многослойное наложение элементов canvas является отличным решением для оптимизации.


Загрузка

ОписаниеИмяРазмер
Исходный код к статьеHTML5CanvasRenderingSource.zip3 КБ

Ресурсы

Научиться

  • Оригинал статьи: 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 Canvas: Просмотрите демонстрацию по использованию API 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: Познакомьтесь с методами, которые используются для регистрации поведения пользователя при его взаимодействии с браузером.
  • Раздел для веб-разработчиков на ресурсе developerWorks: Статьи по различным веб-решениям. Материалы по веб-разработке в технической библиотеке: обширный ассортимент технических статей, рекомендаций, учебных пособий и стандартов, а также руководств серии IBM Redbook.
  • Технические мероприятия и Web-трансляции на ресурсе developerWorks: самая актуальная информация о новейших технологиях.
  • Демонстрации «по запросу» на ресурсе developerWorks: Смотрите демонстрации, охватывающие диапазон от демонстраций для новичков по установке и настройке продуктов до демонстраций по углубленным функциональным возможностям для опытных разработчиков.
  • developerWorks в Твиттере: присоединяйтесь к сообществу developerWorks.

Получить продукты и технологии

  • OpenGL: Получите последние драйверы.
  • jQuery: Популярная JavaScript-библиотека, которая упрощает отслеживание HTML-документов, обработку событий, анимацию и Ajax-взаимодействия с целью ускорения веб-разработки.
  • Modernizr: JavaScript-библиотека с открытым исходным кодом, которая помогает создавать веб-сайты следующего поколения на базе технологий HTML5 и CSS3.
  • Kibo: Популярная библиотека, специально написанная для быстрой обработки клавиатурных событий вне зависимости от используемого браузера.

Комментарии

developerWorks: Войти

Обязательные поля отмечены звездочкой (*).


Нужен IBM ID?
Забыли Ваш IBM ID?


Забыли Ваш пароль?
Изменить пароль

Нажимая Отправить, Вы принимаете Условия использования developerWorks.

 


Профиль создается, когда вы первый раз заходите в developerWorks. Информация в вашем профиле (имя, страна / регион, название компании) отображается для всех пользователей и будет сопровождать любой опубликованный вами контент пока вы специально не укажите скрыть название вашей компании. Вы можете обновить ваш IBM аккаунт в любое время.

Вся введенная информация защищена.

Выберите имя, которое будет отображаться на экране



При первом входе в developerWorks для Вас будет создан профиль и Вам нужно будет выбрать Отображаемое имя. Оно будет выводиться рядом с контентом, опубликованным Вами в developerWorks.

Отображаемое имя должно иметь длину от 3 символов до 31 символа. Ваше Имя в системе должно быть уникальным. В качестве имени по соображениям приватности нельзя использовать контактный e-mail.

Обязательные поля отмечены звездочкой (*).

(Отображаемое имя должно иметь длину от 3 символов до 31 символа.)

Нажимая Отправить, Вы принимаете Условия использования developerWorks.

 


Вся введенная информация защищена.


static.content.url=http://www.ibm.com/developerworks/js/artrating/
SITE_ID=40
Zone=Web-архитектура
ArticleID=943826
ArticleTitle=Оптимизация рендеринга элементов HTML5 canvas посредством многослойного представления
publish-date=09092013