Недавно я провел большую часть своего времени, играя с веб-разработкой виртуальной реальности, поэтому, когда я составлял список инструментов, которые было бы интересно изучить глубже, Vizor Create l выглядел интересным, но также и более хлопот, чем оно того стоило. У меня сейчас один из моих основных проектов, и я мог бы решить отказаться от него, поэтому сегодня я сделал перерыв и запустил редактор Vizor, чтобы посмотреть, на что это похоже.

Введение в Vizor Create на YouTube

Прошло около пяти с половиной лет с тех пор, как я в последний раз использовал интерфейс визуального программирования (LabVIEW, для тех из вас, кому это может быть интересно), и к редактору Vizor потребовалось некоторое время, чтобы привыкнуть. Общая идея этого довольно проста: перетаскивайте различные компоненты на свою сцену и соединяйте их с другими объектами, чтобы что-то происходило. Затем этот график можно использовать для создания файла .JSON, который загружается в веб-плеер, отображающий холст WebGL.

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

Теперь важно отметить, что не каждый из этих уровней моей блок-схемы соответствует своему собственному уникальному уровню на графике — он предназначен для логической разбивки различных объектов в моей сцене и для пометки того, как компоненты добавляются к их. Одним из ключевых отличий, на определение которого у меня ушло несколько минут, была анимация. По моему опыту использования ThreeJS для создания сцен WebGL/WebVR, у меня была глобальная функция контроллера анимации, которая обновляла дочерние элементы, но в Vizor Create они были прикреплены к сами объекты. Исходя из опыта работы с Java/.NET, это имело для меня большой смысл, но изначально это не было очевидно из того, что я недавно сделал с Интернетом.

Приступаем к созданию первых элементов сцены! В редакторе Vizor Create доступно несколько готовых к виртуальной реальности объектов, включая сцены с поддержкой движения, скайбоксов и других часто используемых элементов. Чтобы добавить одну из этих сцен на ваш график, дважды щелкните элемент, который вы хотите включить, и он появится на текущем уровне иерархии вашего графика. Я начал с предустановленного шаблона движения VR, чтобы я мог перемещаться по сцене, не управляя элементами управления самостоятельно.

Примечание. Чтобы удалить объект из редактора Vizor Create, щелкните мышью и перетащите ограничивающую рамку вокруг элемента, чтобы выбрать его, а затем нажмите кнопку «Удалить». Вокруг него должна быть синяя рамка, чего не произойдет, если вы просто попытаетесь щелкнуть поле, а затем удалить его.

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

[идентификатор заголовка = ”attachment_1661 align =”aligncenter” ширина =”660]

Цикл рендеринга VR, представленный узлами графа и путями[/caption]

Чтобы отредактировать узел, у которого нет подграфа, щелкните заголовок узла, чтобы развернуть элемент, чтобы его можно было изменить. Узлы, ведущие к новому подграфу, такие как узел Сцена на изображении выше, имеют кнопку редактирования, которая открывает новый граф в пространстве редактора. Вы можете перемещаться между уровнями графика в разделе «Дерево графика» с левой стороны.

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

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

Для каждого нового объекта, который я создал (это сферы и скайбокс, если вы вернетесь к приведенной выше блок-схеме), я создал ссылку с камеры на объект, щелкнув слово «камера» на выходной стороне камеры. объекта и перетащив его на сторону ввода только что добавленного объекта. Напоминание: префабы для объектов находятся в левой части редактора в разделе Префабы и плагины. Текст станет зеленым, если соединение установлено, и красным, если нет. Это не позволяет вам подключать вещи, которые не имеют смысла, и невероятно полезно для того, чтобы ковыряться и пробовать новые вещи.

[идентификатор подписи = ”attachment_1671 align = ”aligncenter” ширина = ”660]

Подграф моей сферы с примененной текстурой[/caption]

Я решил создать простое представление вращения земли, а это означало, что мне нужно было применить эффект масштабирования (размер сферы по умолчанию был крошечным), анимацию вращения и текстуру. Я начал с текстуры, которая является компонентом 3D-объекта, который применяется к сетке или тому, что сцена фактически будет использовать для создания круга. Как правило, при 3D-разработке основные свойства внешнего вида объекта применяются к сетке объекта; Затем я вернулся на уровень выше, чтобы изменить объект, созданный из сетки.

Совет. Для значений ползунка, таких как показанное выше значение H & V Res, вы можете изменить числа на каждой стороне полосы, чтобы получить более конкретный уровень детализации.

[идентификатор подписи = ”attachment_1691 align = ”aligncenter” ширина = ”660]

Объекты Grid и Sphere в графе сцены. К сфере применяются два матричных преобразования: масштабирование и поворот[/caption]

В списке пресетов я обнаружил, что изменить объект будет довольно просто, и дважды щелкнул, чтобы добавить узел Scale. Полученный вывод матрицы был затем подключен к узлу Sphere в разделе «преобразование», но когда я начал добавлять цикл для непрерывной анимации вращения, я узнал, что у каждого узла может быть только один ввод — что имеет смысл. Я быстро отыскал операцию Concatenate, которая позволила бы мне соединить несколько матричных преобразований в одно, и добавил цикл, который будет вращать мою сферу по оси Y.

Преобразование для масштабирования было очень простым — ползунок размера подключался к входам X, Y и Z для узла Scale, который затем выдавал матричный вывод. Анимация была немного сложнее, но я понял, что могу поместить любые преобразования, какие захочу, на таймер, и обнаружил, что объект Время: накопление времени будет создавать желаемый эффект во время работы сцены. путем подачи на вход Y узла вращения.

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

[идентификатор подписи = ”attachment_1721 align="aligncenter" ширина = ”660]

Неанимированный вид моей сцены во время создания графика[/caption]

Как только вы закончите свою сцену или просто захотите сохранить ее или поделиться ею, вы можете сделать это, войдя в систему с помощью учетной записи (я предполагаю, что если вы используете собственную версию Vizor Create, это можно пропустить, но Сам еще не пробовал) и сохраняю для просмотра в плеере. Не делясь сценой (хотя это тоже вариант), вы можете посмотреть ее в веб-плеере, удалив /edit/ из URL-адреса вашего проекта. Мой доступен на http://create.vizor.io/misslivirose/simple_planet.

Хотя я не обязательно буду использовать Vizor для готовых к производству проектов в ближайшее время, это было бесценно с точки зрения обучения себя лучшим способам визуализации 3D-контента и кодирования — то, что становится все более распространенным в отрасли с появлением виртуальной и дополненной реальности. . Это был очень быстрый способ создать простую сцену, хотя у меня еще не было возможности протестировать виртуальную часть. Тем не менее, я видел некоторые другие проекты, которые люди создали с помощью Vizor, и они кажутся действительно многообещающими для определенных типов проектов или быстрой визуализации для POC. Я определенно буду внимательно следить за развитием инструмента, чтобы увидеть, как он будет развиваться — я потенциально могу видеть, что это отличный инструмент для более глубоких проектов по мере его развития. Я также ожидаю, что его можно будет использовать для обучения студентов основным принципам разработки 3D / VR в качестве хорошего введения — здесь большой потенциал.