Иерархия Screen-Element: world vs screen space

В PlayCanvas координатные системы играют ключевую роль в рендеринге и взаимодействии объектов на экране. Важно понимать разницу между двумя основными пространствами, с которыми работает библиотека: мировым (world space) и экранным (screen space). Знание этих различий позволяет эффективно управлять расположением объектов, их отображением и взаимодействием в 3D-сценах.

Мировое пространство (World Space)

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

Пример работы с мировым пространством

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

Пример:

var entity = new pc.Entity();
entity.setPosition(10, 5, -20); // Устанавливаем позицию объекта в мировом пространстве

var worldPosition = entity.getPosition(); // Получаем позицию объекта в мировом пространстве

В этом примере объект перемещается в мировом пространстве на координаты (10, 5, -20). Все другие объекты в сцене могут использовать эти координаты для взаимодействия.

Экранное пространство (Screen Space)

Экранное пространство — это координатная система, в которой расположены пиксели на экране. В этой системе ось X направлена вправо, ось Y — вниз, а ось Z обычно представляет глубину в пределах экрана. Экранное пространство обычно используется для работы с интерфейсами, HUD (Heads-Up Display) и другими элементами, которые не взаимодействуют напрямую с миром сцены.

Координаты экранного пространства зависят от разрешения экрана и размера окна рендера, поэтому их значение меняется в зависимости от текущего размера экрана.

Преобразование координат в экранное пространство

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

Пример:

var camera = app.root.findByName('camera'); // Находим камеру
var worldPosition = new pc.Vec3(10, 5, -20); // Позиция объекта в мировом пространстве
var screenPosition = camera.worldToScreen(worldPosition); // Преобразуем мировую позицию в экранные координаты

В данном примере происходит преобразование точки из мирового пространства в экранные координаты. После этого объект можно будет отобразить на экране в соответствующем месте.

Использование обоих пространств в иерархии объектов

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

  • Мировые координаты используются для взаимодействия между объектами сцены. Например, чтобы правильно разместить объекты в 3D-мире, необходимо учитывать их положение относительно друг друга и камеры.

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

В PlayCanvas иерархия объектов используется для организации сцены, при этом важно помнить, что элементы интерфейса (например, кнопки, панели и другие UI-элементы) могут располагаться в экране, а не в 3D-мире. Это позволяет создать удобное взаимодействие пользователя с игрой или приложением, отделяя элементы интерфейса от самой сцены.

Пример организации элементов интерфейса

Элементы UI, такие как кнопки и текстовые метки, часто используют экранные координаты для своего позиционирования. Это позволяет легко размещать их на экране, независимо от того, как меняется сцена. В PlayCanvas для этого можно использовать компонент screen:

var button = new pc.Entity();
button.addComponent('element', {
    type: pc.ELEMENTTYPE_BUTTON,
    width: 200,
    height: 50
});
button.setPosition(0, 0); // Устанавливаем положение в экранных координатах

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

Преобразование между мировым и экранным пространствами

Чтобы интегрировать объекты сцены с элементами интерфейса, необходимо периодически преобразовывать координаты из одного пространства в другое. Например, можно отобразить 3D-объект в UI, используя его мировую позицию и преобразовав её в экранные координаты. Это используется для таких эффектов, как индикаторы на экране или стрелки, указывающие на объекты в 3D-мире.

Пример преобразования мировых координат в экранные для отображения на интерфейсе:

var entityPosition = entity.getPosition(); // Получаем мировую позицию объекта
var screenPos = camera.worldToScreen(entityPosition); // Преобразуем мировую позицию в экранные координаты

Такое преобразование позволяет синхронизировать взаимодействие с 3D-объектами и пользовательским интерфейсом, создавая более динамичное и визуально привлекательное приложение.

Работа с различными камерами

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

Пример работы с несколькими камерами:

var camera1 = app.root.findByName('camera1'); // Первая камера
var camera2 = app.root.findByName('camera2'); // Вторая камера

var position = new pc.Vec3(10, 5, -20);
var screenPos1 = camera1.worldToScreen(position); // Преобразование в экранные координаты первой камеры
var screenPos2 = camera2.worldToScreen(position); // Преобразование в экранные координаты второй камеры

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

Заключение

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

Оглавление