Руководство для начинающих / Blender

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

Установка

Подробная информация об установке программы находится в соответствующем разделе.

Кнопка предпросмотра

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

Вы можете использовать Sneak Peek для быстрого предпросмотра сцены на любом этапе работы над проектом.

Диспетчер приложений

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

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

Диспетчер приложений открывается в веб-браузере при нажатии кнопки App Manager. Будет запущен системный браузер по умолчанию (вы можете изменить его в настройках вашей операционной системы). Подойдет любой современный браузер, но мы рекомендуем последнюю версию Google Chrome, поскольку он является быстрым, совместимым со стандартами и предлагающим удобные инструменты для веб-разработки.

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

Введите название проекта (или просто оставьте my_awesome_app) и нажмите Create App. Пока не освоитесь, не меняйте другие параметры создаваемого приложения.

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

Запуск приложения

Вы можете запустить приложение щелкнув по синему или зелёному значку с логотипом Verge3D. Синий значок запускает приложение в его полном виде со сценарием пазлов и программным кодом (если они есть). Зеленый значок открывает только экспортированную сцену.

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

Если вместо куба отображается что-то вроде «This site can’t be reached», это означает, что сервер диспетчера приложений не работает, вероятно, из-за того, что вы случайно закрыли первый запущенный экземпляр вашего 3D-редактора и сервер разработки вместе с ним. В этом случае вам следует запустить Blender или, если программа уже запущена, снова запустить диспетчер приложений.

Хотя это случается очень редко, может отображаться другое предупреждение: «Ouch! Your graphics card does not support WebGL.». Это может произойти, если вы используете устаревший или неподдерживаемый браузер, либо ваша видеокарта и/или драйверы занесены браузером в черный список. Попробуйте установить последнюю версию Google Chrome, обновить операционную систему, загрузить последние версии драйверов либо просто возьмите другой компьютер.

Экспорт

Щелкнув по иконке B, вы можете открыть основной .blend-файл вашего приложения.

Файл сцены можно открыть и привычным образом, через меню File → Open в Blender, либо просто дважды щелкнув по соответствующему значку в папке приложения. Вариант с File → Open может быть более эффективным, поскольку он не запускает новый экземпляр Blender.

Важно понимать, что браузерное приложение загружает только файлы, экспортированные в формате glTF (.gltf), а не исходные файлы блендеровских сцен. Поэтому каждый раз, когда вы меняете что-то в исходном файле, вы должны делать экспорт, в противном случае вы не увидите изменений в запущенном приложении.

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

Экспортируйте сцену в корень папки приложения в формате glTF (.gltf).

Чтобы проверить, что всё работает как надо, добавьте несколько кубиков или объектов «Сюзанна» в сцену, снова экспортируйте в glTF и запустите приложение, щелкнув на синюю иконку с логотипом Verge3D в диспетчере приложений.

Процесс можно ускорить, если всегда держать приложение запущенным в какой-нибудь вкладке браузера. После переэкспорта просто нажмите клавишу F5, чтобы вкладка перезагрузилась. А чтобы быстро переключаться между Blender и браузером, используйте сочетание клавиш "Alt+Tab" ("⌘+Tab" на Маке).

Все параметры и кнопки Verge3D для Blender снабжены встроенной справкой, доступной по правой кнопке мыши или горячей клавише F1.

Пазлы

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

Нажмите серо-зелёную кнопку с характерным значком в диспетчере приложений. Она запустит нужное приложение внутри редактора пазлов.

Редактор блоков визуального программирования

Слева расположена панель инструментов с категориями ("Events", "Selectors", "Objects" и т.д.). Категории открываются щелчком мыши, отображая те пазлы, которые вы можете перетащить в рабочую область. Соединяя различные пазлы между собой, вы можете определять поведение 3D-объектов в ответ на те или иные действия пользователя.

Чтобы узнать что делает тот или иной пазл, наведите курсор мыши, либо вызовите соответствующую справку, доступную по правому клику мыши.

Попробуем сделать что-то осмысленное с нашей сценой. Для этого перетащите пазл when clicked из категории Events и выберите нужный объект в светло-зелёном списке.

Добавление пазла when clicked из панели инструментов

Данный пазл ждёт когда пользователь кликнет на выбранном объекте и вызывает пазлы находящиеся внутри слота do (на данный момент там пусто).

Теперь возьмите пазл hide из категории Objects и вставьте его в этот пустой слот. Выберите в списке тот же самый объект — Cube.

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

Чтобы свежесозданный сценарий сохранился в приложении, обязательно сохраните его.

Закончив с пазлами, вы можете запустить само приложение, используя синюю иконку в диспетчере приложений. Примите наши поздравления, вы только что стали 3D-программистом!

Также посмотрите наше видео, где мы объясняем работу с пазлами на другом примере.

Публикация

На собственном сайте...

Основное преимущество Verge3D — то что он создаёт веб-приложения, имеющие потенциальную целевую аудиторию в миллионы (если не миллиарды) пользователей. Если у вас уже есть веб-сайт, задача развёртывания таких приложений упрощается — просто загрузите папку с приложением на свой сервер (например, с использованием интерфейса администрирования хостинга или протокола ФТП). После этого вы можете разместить ссылку на HTML-файл приложения где-нибудь на сайте.

С использованием WordPress...

Задача ещё более упрощается, если вы используете систему управления контентом WordPress. Установите наш бесплатный плагин, служащий для загрузки и встраивания Verge3D-приложений.

При помощи Verge3D Network...

Что, если у вас нет сайта и вы не хотите становиться веб-мастером? Ничего страшного, нажав одну кнопку в диспетчере приложений, вы сможете загрузить программу в Verge3D Network, облачное хранилище и систему доставки контента, предоставляемые компанией Soft8Soft.

Кнопка для загрузки приложения в Verge3D Network

После завершения загрузки высветится окно со ссылкой, которой можно поделиться любым удобным способом (в блоге, социальных сетях, комментариях, электронной почте и т.д.). Там же сгенерируется HTML-код для встраивания приложения на сторонние веб-сайты, подобно тому как это делается для видеороликов с сайта ЮТуб.

Также посмотрите это видео о публикации приложений с использованием Verge3D Network.

Активация лицензии

Вы можете тестировать ознакомительную версию Verge3D сколько угодно. Тем не менее, для создания реальных приложений (как коммерческих так и некоммерческих) вам потребуется приобрести лицензию. После подтверждения оплаты мы вышлем лицензионный ключ вам на почту (не пытайтесь ввести ключ из примера ниже, он не заработает).

Лицензионный ключ активирует ваш экземпляр Verge3D и удалит водяной знак с имеющихся и новых приложений.

Что дальше?

Перейдите к разделу рабочий процесс, чтобы получить более подробное представление о рабочем процессе, основанном на использовании ПО Verge3D.