Web Player JSON. Публикация проекта

Я думаю, вы уже согласны, что работать с проектом Web Player JSON очень просто. Пара прочитанных статей (клик раз, клик два) должны развеять миф о сложности. Если нет, то время читать дальше.

Итак, самый волнительный момент разработки — публикация результата. Именно здесь начинаются проблемы, возникают различные вопросы у начинающих: что, где и как? Но начнем по порядку...

Подготовка проекта

Разработчики фреймворка постарались облегчить жизнь пользователям и добавили механизм сборки проекта. Достаточно щелкнуть по ссылке deploy project и программа создаст архив с необходимыми файлами, который нужно скачать.

Типичный состав такого архива включает в себя файлы HTML, CSS, рабочие сборки движка и файлы экспорта самой сцены (JSON и BIN). Дополнительно могут быть текстуры, звук и иные ресурсы, т.е. всё то, что вы использовали для создания сцены.

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

Веб-плеер Blend4Web умеет работать с адресной строкой браузера и понимает некоторые команды. Главная из них load. Именно с ее помощью указывается путь к файлу сцены JSON. Если все файлы находятся в одной директории, что является по умолчанию, то измените адресную строку следующим образом:

webplayer.html?load=scene.json

Кроме того, у Web Player есть и другие команды, которые могут быть полезными. С полным списком возможностей вы можете познакомиться здесь. Учтите, что директивы в адресной строке должны разделяться знаком &. Например, чтобы включить автоматическое вращение сцены после ее загрузки, добавьте в строку новую команду autorotate:

webplayer.html?load=scene.json&autorotate

Публикация проекта

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

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

Хостинг — это услуга по предоставлению места для размещения и функционирования сайтов на удаленных серверах. В сети Интернет имеется великое множество хостеров с разными предложениями. Выбор хостинга — это холиварная тема и масса копий уже сломались в жарких полемиках по её поводу. Чтобы не ошибиться, нужно определится с критериями выбора. Давайте рассмотрим основные:

 1. Географическая привязка. Многие хозяева сайтов не учитывают этот момент, а зря. Допустим, что ваш сайт физически расположен в Нидерландах, а основные клиенты в США. Несмотря на высокие скорости, ваши пользователи будут ощущать неизбежные задержки при загрузке контента. Поэтому логичный вывод — хостинг сайта должен располагаться в той же географической зоне, что и потенциальные клиенты.

 2. Технические требования. Развертывание проектов Blend4Web не предполагает каких-либо серьезных требований к хостингу. Конечно, если у вас игра MMO с сотнями уникальных посетителей одновременно, то лучше искать что-то подороже или даже арендовать сервер. В простых случаях можно выбрать недорогой тариф. Важно только следить за возможным ограничением трафика.

 3. Стоимость. Все мы стараемся экономить и, если есть вариант более дешевый, то выбираем его. Всегда ли это разумно? Здесь я могу дать только один совет — искать хостера с оплатой в национальной валюте. Допустим, если вы живете в России, а хостинг оплачиваете в евро, то можете представить, какие у вас будут финансовые потери.

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

 5. Доступ по FTP. Все хостеры предлагают встроенные в панель управления файловые менеджеры. Именно их вы будете использовать для закачки проектов на сервер. Однако все станет проще, если у вас будет доступ по FTP. Это специальный протокол сети Интернет, который позволяет напрямую обмениваться файлами с сервером. Существует великое множество клиентов FTP. Лично я могу посоветовать бесплатную программу FileZilla. Раз настроите и забудете.

Итак, вы приобрели хостинг, создали крутой сайт или простейшую «визитку». Настало время подключить свой проект.

Самый простой способ — это загрузить файлы из архива проекта в отдельную папку на сервере. Теперь вы можете в нужном месте на странице сайта указать прямую ссылку на файл webplayer.html. Например, это может выглядеть так:

<a href="http://www.mysite.com/folder/webplayer.html?load=scene.json">Мой крутой проект!</a>

Есть и другой вариант, который позволяет встраивать окно веб-плеера непосредственно в содержимое страницы. Для этого используется тег IFRAME, в котором можно указать размеры окна:

<iframe allowfullscreen src="http://www.mysite.com/folder/webplayer.html?load=scene.json" width="800" height="500"></iframe>

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

Немного практики

Урок это или не урок, в конце-концов! А давайте-ка покажу, как можно опубликовать проект Web Player JSON на живом примере...

Итак, есть сайт www.prandgames.com/. Как вы не знаете, чей он? Это сайт вашего покорного слуги. Немного игр, простенький блог с заметками и портфолио. Открою небольшой секрет — сделан он на WordPress. Это популярная CMS, которая часто используется для быстрого создания сайтов.

Задача. Создать запись в блоге, где помимо текста и картинок, нужно было добавить окно веб-плеера с «живой» трехмерной моделью.

Для этого я создал новый проект в Project Manager со следующими настройками.

Программа добавила новую папку проекта с названием "enemy1", которая располагается в пользовательской директории Projects (в корне SDK Blend4Web).

Типичный состав проекта JSON:

 Папка Assets. Здесь хранятся ресурсы: изображения, видео, звук, а также экспортированные файлы сцены.

 Папка Blender. Исходные файлы Blender.

Для экспорта сцены в JSON нужно выбрать пункт меню в Blender: File | Export | Blend4Web (.json) и сохранить результат в папку Assets.

Настало время публикации. Для этого была выполнена сборка проекта с помощью опции менеджера deploy project. Скачайте полученный архив проекта и распакуйте его в подходящее место.

Подготовленную папку с проектом осталось загрузить на сервер. Лично я использую программу Filezilla. Это бесплатный менеджер, который обеспечивает доступ по FTP и доступен под разные платформы.

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

 1. Название сайта или его IP-адрес.

 2. Имя пользователя, который имеет доступ к серверу через FTP.

 3. Пароль пользователя FTP.

У вас может возникнуть вопрос, что это за пользователь FTP? Как я писал ранее, многие хостинговые компании предоставляют доступ по этому протоколу. Поэтому в панели управления хостинга ищите что-то связанное с FTP. Скорее всего, там уже есть сгенерированное имя и пароль для вашего доступа. В крайнем случае, вы можете обратиться в службу технической поддержки сервиса.

Это настройки программы FileZilla для быстрого подключения по FTP к серверу. Вводите название сайта или его IP-адрес, логин и пароль. Затем нажимаете кнопку Quick Connect. Если всё прошло удачно, то в правом окне программы появляется файловая структура сервера. Открываете в нём директорию, где хранится сайт (совпадает с его названием) и переносите папку со своим проектом из левой панели в правую.

Дальнейшая задача — размещение веб-плеера на странице сайта. Напомню, что мой сайт построен на основе CMS WordPress.

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

<iframe src = "http://www.prandgames.com/promo/revolt/enemy1/webplayer.html?load=enemy1.json&autorotate" width="800" height="500" allowfullscreen="allowfullscreen"></iframe>

Посмотрите на блок IFRAME. Помимо ссылки на плеер со сценой, там добавлена команда включения авто-вращения. Параметры width и height отвечают за размеры блока, а allowfullscreen разрешает плееру переключаться в режим «полный экран».

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

Как видите, ничего сложного в создании и публикации проектов Web Player JSON нет. А если вы предполагаете хранить множество проектов на сервере, то можно отделить файлы веб-плеера от файлов проектов. Это позволит несколько сэкономить место на сервере, исходящий трафик и время ожидания для пользователя. Всё в ваших руках!