Архитектура слоёв: pc.Layer, pc.LayerComposition

Библиотека PlayCanvas предоставляет мощные средства для работы с 3D-графикой, и одним из ключевых элементов, определяющих отображение объектов на экране, является система слоёв. В PlayCanvas архитектура слоёв включает два основных компонента: pc.Layer и pc.LayerComposition. Понимание этих компонентов и их взаимодействия необходимо для правильной настройки и оптимизации рендеринга сцены.

pc.Layer — объект слоя

pc.Layer представляет собой абстракцию, которая определяет, как объекты рендерятся в сцене. Каждый объект в PlayCanvas может быть связан с определённым слоем, и на основе этой связи определяется порядок их отрисовки.

Основные параметры слоя

  • name: строковое имя слоя, которое используется для его идентификации. Это имя не имеет влияния на рендеринг, но позволяет легко работать с ним в коде.

  • renderTarget: объект pc.RenderTarget, который определяет целевой рендеринг для слоя. Если у слоя есть свой целевой рендер, все объекты, принадлежащие этому слою, будут рендериться на этот текстурный рендер-таргет, а не на экран.

  • clearColor: цвет, который будет использоваться для очистки рендер-таргета перед рендерингом содержимого слоя. Это полезно, если необходимо задать фон для слоя, отличающийся от стандартного фона сцены.

  • renderOrder: определяет порядок отрисовки слоёв, если слои используются для наложения. Слои с меньшим значением renderOrder будут отрисовываться первыми, а слои с большим — последними.

  • cullMode: задаёт, какие стороны примитивов будут рендериться. Это может быть полезно для оптимизации отрисовки объектов, если с их одной стороны ничего не будет видно.

Создание и использование pc.Layer

Пример создания нового слоя:

var layer = new pc.Layer(app.graphicsDevice);
layer.name = "CustomLayer";
layer.renderOrder = 2;
layer.clearColor = new pc.Color(0.5, 0.5, 0.5); // Серый фон

После создания слоя его можно назначить объектам сцены через компонент pc.Model или другие компоненты, которые поддерживают слои, например, pc.ParticleSystem.

model.model.layers = [layer];  // Назначаем слой модели
Рендеринг на специальный рендер-таргет

Если требуется рендерить объекты на текстуру (например, для пост-обработки или отражений), слой должен быть привязан к pc.RenderTarget.

var renderTarget = new pc.RenderTarget(app.graphicsDevice, 1024, 1024);
layer.renderTarget = renderTarget;

pc.LayerComposition — композиция слоёв

pc.LayerComposition служит для более гибкой настройки порядка рендеринга. Этот объект управляет слоями и их композициями на разных этапах отрисовки. В отличие от простого рендеринга всех объектов на одном слое, композиция слоёв позволяет организовать сложные сцены, где каждый слой рендерится независимо, а затем комбинируется в единую картину.

Структура композиции слоёв

Каждая композиция слоёв состоит из нескольких слоёв, которые могут быть сгруппированы и отрисованы с учётом их порядка и приоритетов. Это позволяет создавать различные эффекты наложения, такие как тени, пост-обработку, стеклянные и прозрачные объекты, и другие.

var composition = new pc.LayerComposition();
composition.layers = [layer1, layer2, layer3];
composition.renderOrder = [0, 1, 2];  // Определяет порядок отрисовки
Рендеринг композиции

Для рендеринга сцены с использованием композиции слоёв, нужно связать её с камерой:

camera.layers = composition;

Это позволяет камере рендерить объекты на разных слоях с учётом их порядка и параметров.

Применение композиции для пост-обработки

Одним из часто используемых случаев композиции является создание эффектов пост-обработки, например, блюра, HDR или глубины поля. Для этого можно создать отдельный слой для рендеринга пост-обработки и применять его к изображению перед выводом на экран.

var postLayer = new pc.Layer(app.graphicsDevice);
postLayer.renderTarget = postProcessingRenderTarget;
composition.layers.push(postLayer);
camera.layers = composition;

Совместное использование pc.Layer и pc.LayerComposition

Использование слоёв и их композиции предоставляет высокий уровень контроля над рендерингом в PlayCanvas. Один из примеров — это настройка различных уровней детализации и эффектов для объектов, таких как применение текстурных карт на отдельные слои, создание наложений с эффектами прозрачности или динамическое управление отображением элементов интерфейса.

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

// Пример распределения объектов по слоям с использованием композиции
var objectLayer = new pc.Layer(app.graphicsDevice);
objectLayer.name = "ObjectLayer";
objectLayer.renderOrder = 1;

var uiLayer = new pc.Layer(app.graphicsDevice);
uiLayer.name = "UILayer";
uiLayer.renderOrder = 3;

var composition = new pc.LayerComposition();
composition.layers = [objectLayer, uiLayer];
camera.layers = composition;

Оптимизация и производительность

Использование слоёв и композиции также позволяет улучшить производительность. Например, можно разделить объекты сцены на отдельные слои, чтобы рендерить только те объекты, которые видны в данный момент. Это снижает нагрузку на систему, особенно при работе с большими сценами или сложными эффектами.

Заключение

Архитектура слоёв в PlayCanvas через компоненты pc.Layer и pc.LayerComposition даёт разработчику мощные инструменты для управления рендерингом сцены. Возможность создавать независимые слои, а затем комбинировать их для сложных эффектов, делает PlayCanvas гибким и мощным инструментом для создания интерактивных 3D-приложений.

Оглавление