Руководство для начинающих / Блендер
«Вердж3Д для Блендера» — это универсальное программное обеспечение, которое можно использовать по-разному. В данном разделе описан один из вариантов построения рабочего процесса, который мы рекомендуем начинающим пользователям. Для успешной работы в «Вердж3Д» вам потребуются лишь базовые навыки использования программы трёхмерного моделирования «Блендер».
- Установка
- Кнопка предпросмотра
- Диспетчер приложений
- Запуск приложения
- Экспорт
- Пазлы
- Публикация
- Активация лицензии
- Что дальше?
Установка
Подробная информация об установке программы находится в соответствующем разделе.
Кнопка предпросмотра
Чтобы убедиться, что «Вердж3Д» установлен правильно, просмотрите любую 3Д-модель в веб-браузере с помощью кнопки Sneak Peek. Эта функция выполнит экспорт во временную папку и запустит штатный веб-браузер с соответствующей визуализацией.

Вы можете использовать Sneak Peek для быстрого предпросмотра сцены на любом этапе работы над проектом.
Диспетчер приложений
И хотя вы можете начинать работу над графикой в самом «Блендере», создав соответствующий «Вердж3Д»-проект позже, мы настоятельно рекомендуем вам использовать диспетчер приложений. Таким образом вы убедитесь, что ваши файлы правильно организованы и хранятся в одной папке, что важно для поддержания целостности проекта. Это особенно актуально, если вы планируете передавать проект третьим лицам.
Еще одним преимуществом использования диспетчера приложений является то, что у вас всегда будет работающее веб-приложение, которое вы cможете запускать/перезагружать в браузере без необходимости предварительного открытия файлов сцены.

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

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

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

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

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

Если вместо куба отображается что-то вроде «This site can’t be reached», это означает, что сервер диспетчера приложений не работает, вероятно, из-за того, что вы случайно закрыли первый запущенный экземпляр вашего 3Д-редактора и сервер разработки вместе с ним. В этом случае вам следует запустить «Блендер» или, если программа уже запущена, снова запустить диспетчер приложений.
Хотя это случается очень редко, может отображаться другое предупреждение: «Ouch! Your graphics card does not support WebGL.». Это может произойти, если вы используете устаревший или неподдерживаемый браузер, либо ваша видеокарта и/или драйверы занесены браузером в черный список. Попробуйте установить последнюю версию «Гугл Хрома», обновить операционную систему, загрузить последние версии драйверов либо просто возьмите другой компьютер.
Экспорт
Щелкнув по иконке B, вы можете открыть основной .blend-файл вашего приложения.

Файл сцены можно открыть и привычным образом, через меню File → Open в «Блендере», либо просто дважды щелкнув по соответствующему значку в папке приложения. Вариант с File → Open может быть более эффективным, поскольку он не запускает новый экземпляр «Блендера».
Важно понимать, что браузерное приложение загружает только файлы, экспортированные в формате glTF (.gltf), а не исходные файлы блендеровских сцен. Поэтому каждый раз, когда вы меняете что-то в исходном файле, вы должны делать экспорт, в противном случае вы не увидите изменений в запущенном приложении.
Экспорт сцены осуществляется с помощью меню File → Export. В будущем для этой операции стоит назначить горячую клавишу, так как она будет выполняться довольно часто.

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

Чтобы проверить, что всё работает как надо, добавьте несколько кубиков или объектов «Сюзанна» в сцену, снова экспортируйте в glTF и запустите приложение, щелкнув на синюю иконку с логотипом «Вердж3Д» в диспетчере приложений.
Процесс можно ускорить, если всегда держать приложение запущенным в какой-нибудь вкладке браузера. После переэкспорта просто нажмите клавишу F5, чтобы вкладка перезагрузилась. А чтобы быстро переключаться между «Блендером» и браузером, используйте сочетание клавиш "Alt+Tab" ("⌘+Tab" на Маке).
Все параметры и кнопки «Вердж3Д для Блендера» снабжены встроенной справкой, доступной по правой кнопке мыши или горячей клавише F1.

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

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

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

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

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

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

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

Закончив с пазлами, вы можете запустить само приложение, используя синюю иконку в диспетчере приложений. Примите наши поздравления, вы только что стали 3Д-программистом!
Также посмотрите наше видео, где мы объясняем работу с пазлами на другом примере.
Публикация
На собственном сайте...
Основное преимущество «Вердж3Д» — то что он создаёт обычные веб-приложения, имеющие потенциальную целевую аудиторию в миллионы (если не миллиарды) пользователей. Если у вас уже есть веб-сайт, задача развёртывания таких приложений упрощается — просто загрузите папку с приложением на свой сервер (например, с использованием протокола ФТП). После этого вы можете разместить ссылку на HTML-файл приложения где-нибудь на сайте либо встроить его с помощью HTML-элемента iframe:
<iframe width="1024" height="640" src="https://www.example.com/my_awesome_app/my_awesome_app.html"></iframe>
С использованием «Вордпресс»...
Задача ещё более упрощается, если вы используете систему управления контентом «Вордпресс». Установите наш бесплатный плагин, служащий для загрузки и встраивания «Вердж3Д»-приложений.
При помощи «Вердж3Д Нетворк»...
Что, если у вас нет сайта и вы не хотите становиться веб-местером? Ничего страшного, нажав одну кнопку в диспетчере приложений, вы сможете загрузить программу в «Вердж3Д Нетворк», облачное хранилище и систему доставки контента, предоставляемые компанией «Софт Эйт Софт».

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

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


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

Что дальше?
Перейдите к разделу рабочий процесс, чтобы получить более подробное представление о рабочем процессе, основанном на использовании ПО «Вердж3Д».
Остались вопросы?
Задавайте их на нашем форуме!