PlayCanvas — это визуальная платформа разработки интерактивных веб приложений. Всё что разрабатывается с помощью PlayCanvas основано на возможностях HTML5. PlayCanvas — это веб-приложение, а значит вам не нужно устанавливать специальные программы и вы можете получить доступ к вашему проекту с любого устройства в любой точке земного шара через интернет. Все проекты, которые вы создаёте, могут быть размещены в сети буквально в одно нажатие.
Рабочий процесс в PlayCanvas
Всё в PlayCanvas начинается с визуального редактора.
В левой части экрана находится раздел иерархии сущностей. Он позволяет создавать как пустые сущности, так и уже предустановленные, такие как: камеры, свет, примитивы, аудио, интерфейсы, системы частиц или модели. Любая сущность, добавленная в иерархию, автоматически попадает на сцену.
По центру экрана находится редактор сцены. Тут вы можете изменить расположение сущностей, выделять их для редактирования и просто просматривать то, как будет выглядеть сцена вашего приложения.
Внизу от редактора сцены находится раздел ассетов. Ассеты — это все файлы и другие элементы, которые могут быть добавлены к вашим сущностям. В PlayCanvas есть несколько типов ассетов: папка, css, cubemap, HTML, JSON, материал, скрипт, шейдер и текст. Все они имеют разное предназначение.
Ну и наконец в правой части экрана находится раздел свойств сущности. Сущность имеет базовые свойства: расположение, вращение, масштаб, имя, теги, настройки добавленных компонентов. Свойства меняются в зависимости от того, какая сущность добавлена. Например, если мы добавим куб, он будет иметь следующие свойства: тип, материал, настройки теней, слои и группы.
Общий процесс разработки приложений и игр в PlayCanvas выглядит примерно следующим образом:
- Мы добавляем необходимые ассеты. Например: модели, материалы, аудио, видео.
- Создаем окружение нашей сцены. Например: город, дом, ландшафт.
- Добавляем интерактивные элементы. Например: игрока и его врагов.
- Добавляем логику приложения с помощью скриптов.
- Публикуем игру или приложение в сети.
PlayCanvas и JavaScript
Чтобы добавить логику в нашу игру или приложение в PlayCanvas есть специальный компонент: скрипт. Скрипты могут быть глобальными, и в таком случае они должны быть добавлены к корневой сущности иерархии сцены. Локальные скрипты добавляются непосредственно к сущности внутри иерархии ( например, к модели игрового персонажа). Все скрипты должны быть написаны на JavaScript т.к. всё-таки мы пишем игры в браузере. Любителей ES6, к сожалению, ждёт разочарование, т.к. PlayCanvas до сих пор использует ES5, и при попытке написать какую-нибудь конструкцию из ES6 встроенный линтер начнёт ругаться. В общем виде анатомия скрипта представляет собой следующий шаблон:
var NewScript = pc.createScript('newScript');
NewScript.attributes.add('someString', {
type: 'string',
default: ‘any’,
title: 'Some string'
});
NewScript.prototype.initialize = function() {
this.startPosition = this.entity.getPosition();
};
NewScript.prototype.update = function(dt) {
this.entity.setLocalPosition(this.newPosition);
};
NewScript.prototype.calcaulateNewPosition = function() {
this.newPosition = this.startPosition.dot(pc.Vec3.ZERO)
};
Тут мы создаём новый скрипт. Он получает два основных метода: initialize — будет вызван тогда, когда сущность будет добавлена на сцену. Update — вызывается каждый кадр отрисовки. Параметр dt в update это delta time — % от секунды за которое последний кадр был отрисован. Это хорошо иллюстрируется следующим примером: нужно повернуть некий объект за одну секунду на 360 градусов. Пишем следующий код:
this.entity.rotate(0, 360 * dt, 0);Ну и наконец, последний метод calcaulateNewPosition является пользовательским методом и может быть использован для структурирования кода.
Также в коде присутствует возможность добавления нового атрибута someString. Эта конструкция позволяет определить параметры, которые в дальнейшем могут быть заданы через интерфейс редактора. Для добавить скрипт к выбранной сущности и нажать кнопку “Parse”. Если скрипт имел конструкцию с атрибутами, то появится специальное поле для заполнения значения. Это значение перекроет значение по умолчанию. PlayCanvas поддерживает достаточно много разных типов атрибутов для скрипта. Более подробно об этом можно прочитать тут.
Редактировать скрипты можно как во встроенном редакторе, так и на своей локальной машине в удобном для вас IDE. Но во втором случае придется поиграться с настройками, ведь нужно поднять сервер сопряженный с PlayCanvas.
Ну что же, теперь когда мы разобрали основные особенности PlayCanvas, можно поговорить о том, как создать в PlayCanvas сцены виртуальной реальности.
VR из коробки
PlayCanvas позволяет создать VR сцену из коробки. Для этого необходимо выбрать соответствующую опцию (VR Starter Kit) при создании нового проекта. Итак, давайте посмотрим, что же нам предлагает PlayCanvas по умолчанию (спойлер: не так уж и много как хотелось бы).
Запустив сцену, вы увидите перед собой три куба. При наведении на них взгляда (gaze control) будет запущена шкала прогресса, которая сделает куб прозрачным. Никаких контроллеров и WASD — управления для PC. По сути такое управление позволяет создать небольшое приложение для кардбордов, потому как там по умолчанию есть поддержка тач событий (touch events).
Код нашего стартового VR набора, на самом деле, не очень хорошо структурирован и некоторые его части прямиком завязаны на логику этой сцены. То есть, чтобы сделать что-то своё, придётся разбираться как это всё работает и адаптировать под свои нужды. Никакого API, позволяющего подключить какой-либо функционал отдельно, не предусмотрено.
Теперь давайте попробуем пройтись по файлам стартового набора, чтобы разобраться что за что отвечает и как этом можно использовать для своих целей.
- look-camera.js. Тут находится логика, которая отвечает за сопряжение VR дисплея и камеры. Кроме того, используя mouse-controller.js или touch-controller.js мы можем передавать pitch и yaw, чтобы управлять камерой с PC или мобильного телефона.
- selector-camera.js. В этом файле скрыта логика для имплементации управления взглядом. Каждый элемент, который доступен для взаимодействия должен быть добавлен через событие selectorcamera:add. Причем его AABB должен быть посчитан вручную.Также тут можно найти логику луча (ray \ raycaster). В PlayCanvas есть специальный объект this._ray = new pc.Ray(); который умеет находить пересечения с BoundingBox или BoundingSphere.
- web-vr-ui.js. Просто добавляет интерфейс входа в VR. Прямо скажем, сделано это не очень изящно. Все стили и HTML находятся прямо в этом скрипте. Видимо это сделано по причине того что 2D Экран для интерфейсов имеет свои ограничения, а кнопка должна находится строго в правом нижнем углу.
- box.js. Тут мы найдём всю логику связанную с кубом — управление шкалой прогресса и др.
Как видно из всего вышеописанного, в стартовом VR наборе особо не на что рассчитывать. Всё что можно сделать — это приложение для кардборда и это, по моему мнению, не очень интересно, ведь кардборды это своего рода игрушка, которая не даёт представление о нормальном опыте использования VR. По-настоящему погрузиться в виртуальную реальность можно с Oculus Go, Oculus Rift или HTC Vive.
А теперь давайте поговорим о том как мы можем добавить поддержку контроллеров в наше приложение.
VR контроллеры
Было бы неплохо, если бы PlayCanvas адаптировал свое хранилище так, чтобы можно было одной кнопкой подключать к себе в приложение различные элементы, сопряжённые с необходимой логикой. Но на сегодняшний день так сделать нельзя, поэтому давайте попробуем сделать это по-другому. Чтобы не писать всю логику по сопоставлению позиции контроллеров мы можем воспользоваться уже существующими решениями. Есть замечательный пример Web VR Lab. Там есть много всего интересного, но по коду… сам чёрт ногу сломит. Также есть небольшая сцена VR Tracked Controllers — просто базовая сцена с двумя контроллерами. Вот она как раз-таки и подойдёт для заимствования элементов в ваш проект.
Откроем сцену VR Tracked Controllers для редактирования. Для начала нам нужно перенести контроллер:
- Выделяем контроллер, в разделе свойств находим модель, кликаем на неё, попадаем на неё как на ассет.
- В настройках будет кнопочка Download, которую мы нажимаем и качаем модель и текстуры.
- Разархивируем ассеты и загружаем их в своё приложение. Для этого достаточно перетянуть их в окошко ассетов, которое находится внизу. Нужно перенести всё: модель в формате JSON и все текстуры.
- Модель появится в нашем списке ассетов. Перетаскиваем её на сцену. И вот она уже там. Давайте назовем её Left Controller.
Теперь нам нужно добавить материал:
- Создаём новый материал, нажав на кнопку “+” на панели ассетов. Назовём материал Controller Material.
- Теперь нужно открыть исходный проект и найти там материал tracked-controller и скопировать все настройки в наш материал, включая normals, emissive, specular и diffuse мапы (maps).
Теперь можно скопировать контроллер используя специальную кнопку Duplicate на панели иерархии и назвать второй контроллер Right Controller.
Всё, контроллеры у нас на сцене. Но пока это всего лишь две модели и чтобы все заработало нам нужно перенести скрипты. Давайте посмотрим детальнее что там нужно и как оно работает:
- vr-gamepad-manager.js — по сути содержит всю необходимую логику для того чтобы ваши контроллеры получили позицию и вращения настоящего контроллера. Тут реализована логика фейкового локтя для 3-dof шлемов таких как Oculus Go, Gear VR или Daydream. _updatePadToHandMappings здесь отвечает за обнаружение контроллеров и маппинг их к нашим контроллерам. Вся логика сопоставления реального и виртуального контроллера находится в _poseToWorld функции. По сути тут берутся данные из WebXR API через инстанс самого контроллера — padPose.position, padPose.poseRotation. Логика, которая находится далее, отвечает за нюансы связанные с разными типами девайсов. Сам скрипт должен быть глобальным ( т.е. добавлен к корню иерархии).
- input-vr.js — отвечает за регистрацию наших контроллеров и работает с кнопками. По сути он просто определяет нажатие кнопок и отправляет номер нажатой кнопки. Это не очень удобно, так как разные устройства могут иметь разные кнопки и GamePad API, и не факт что первая кнопка в Oculus Go будет триггером для HTC Vive контроллера. Поэтому мапать придётся вручную. Этот скрипт нужно подключить к элементу контроллера.
Если все будет сделано правильно вы сможете войти в виртуальную реальность и помахать своими контроллерами. Неплохо, хотя сам процесс интеграции нужного функционала достаточно неудобный и нудный.
Итого
PlayCanvas отличный движок, который можно использовать для создания WebGL игр или приложений. Но, нужно признать, что он плохо адаптирован для WebVR. Такое ощущение, что была поставлена задача продемонстрировать что PlayCanvas может, чтобы подогреть интерес публики. Но развития это направление, видимо, не получило. Поэтому сделать VR игру или приложение можно, но придется много копировать и разбираться в запутанном коде, который был создан лишь для демонстрации (Web VR Lab).
В следующей статье я бы хотел провести небольшой урок по созданию телепорт управления, чтобы у нас был какой-то хотя бы мало-мальский набор, позволяющий начать Web VR игру или приложение. Всем спасибо за внимание!
