Environment map: cubemap, octahedron

Для создания реалистичных изображений и эффектов в 3D-графике, а также для эффективной работы с освещением, используются карты окружения (environment maps). Эти карты представляют собой изображения, которые позволяют моделям получать информацию о том, что происходит вокруг них. В PlayCanvas существуют несколько способов работы с картами окружения, включая кубические карты (cubemaps) и октойдронные карты (octahedron maps). Каждая из этих технологий используется для различных целей и имеет свои особенности.

Кубическая карта (Cubemap)

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

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

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

Создание кубической карты в PlayCanvas

Для создания кубической карты в PlayCanvas используется объект типа cubemap. Он может быть создан с помощью метода pc.Texture, который позволяет загружать текстуры и настраивать их для использования как кубическую карту.

Пример создания кубической карты:

var texture = new pc.Texture(app.graphicsDevice, {
    width: 1024,
    height: 1024,
    format: pc.PIXELFORMAT_R8_G8_B8_A8,
    cubemap: true
});

Загрузка текстур для каждой из граней куба осуществляется следующим образом:

texture.setSource(srcXPos, pc.TEXTURE_TYPE_CUBEMAP_POSITIVE_X);
texture.setSource(srcXNeg, pc.TEXTURE_TYPE_CUBEMAP_NEGATIVE_X);
texture.setSource(srcYPos, pc.TEXTURE_TYPE_CUBEMAP_POSITIVE_Y);
texture.setSource(srcYNeg, pc.TEXTURE_TYPE_CUBEMAP_NEGATIVE_Y);
texture.setSource(srcZPos, pc.TEXTURE_TYPE_CUBEMAP_POSITIVE_Z);
texture.setSource(srcZNeg, pc.TEXTURE_TYPE_CUBEMAP_NEGATIVE_Z);

После того как текстуры загружены и карта создана, её можно применить к материалам объектов, используя material.emissiveMap или material.reflectionMap.

Октойдронная карта (Octahedron Map)

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

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

Создание октойдронной карты в PlayCanvas

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

var texture = new pc.Texture(app.graphicsDevice, {
    width: 1024,
    height: 1024,
    format: pc.PIXELFORMAT_R8_G8_B8_A8,
    octahedron: true
});

Следующий этап — это применение октойдронной карты к материалу. Этот процесс аналогичен применению кубической карты, но в случае октойдронной карты могут потребоваться дополнительные настройки для получения максимальной производительности.

Сравнение кубической и октойдронной карт

Каждый из этих типов карт имеет свои особенности, и их выбор зависит от конкретной задачи:

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

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

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

Применение карт окружения

Кубические и октойдронные карты широко используются в PlayCanvas для различных целей:

  1. Отражения: С помощью карт окружения можно реализовать реалистичные отражения объектов на поверхности воды, металла и других материалов. В PlayCanvas это реализуется через шейдеры, которые используют данные из карт для имитации отражений.

  2. Индивидуальные источники освещения: Карты окружения могут служить источниками света, которые освещают объекты сцены в зависимости от их положения и ориентации.

  3. Освещённость объектов: Карты окружения могут также быть использованы для вычисления глобального освещения, предоставляя более реалистичное освещение в сценах с динамическими объектами и перемещающимся источником света.

Заключение

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