Очередные «попугаи»?! О, нет. Три реальных теста, три разных направления, различные устройства и интересные факты.

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

В марте 2016 года была опубликована новая, полностью открытая браузерная игра «Сказ о Пятигоре», сделанная исключительно с помощью свободных инструментов. Ее создатели — разработчики отечественного WebGL-фреймворка Blend4Web. Это первая игра, сделанная с помощью этого движка. Важно, что она не является приоритетным проектом команды разработчиков. Мало того, львиная доля работы была выполнена силами всего двух человек: 3D-художника Михаила Лузянина и программиста Евгения Родыгина. Игра получилась красочная, но не без изъянов. Проект вызвал шквал комментариев на разных ресурсах с полярными мнениями от «спасибо разрабам» до «в топку».

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

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

В августе прошлого года я обратил внимание на интересный WebGL-движок для разработки своих браузерных проектов. Меня подкупила его тесная интеграция с Blender и русская команда разработчиков. И вот совсем недавно на официальном сайте появился своеобразный отчет о прошедшем годе и планах на будущее. Я подумал, а почему бы и мне не высказаться на это тему, но с точки зрения своего опыта и времени работы с этим фреймворком. На хабре уже есть немало обучающих статей написанных мною о Blend4Web. Помимо всего прочего я рассказывал и о текущих проблемах. Теперь я хочу суммировать накопленные положительные и отрицательные оценки в нечто целое. Учтите, что это только личное мнение.

Создание интерактивного приложения немыслимо без обработки событий, будь-то опрос клавиатуры или работа таймера. Реализация этих важных действий зависит от платформы, языка программирования. В этой статье я хочу рассказать о некоторых особенностях использования событий для WebGL-движка Blend4Web. К сожалению, информации по этой теме совсем немного.

Браузер в компьютере, браузер в телефоне или умных часах, а может даже у кого-то в чайнике? Веб-технологии окружают нас со всех сторон и по мере развития железной начинки, становятся все более зрелищными и совершенными. Всего несколько лет назад о WebGL говорили, как о забавной игрушке с туманными перспективами. Но многое изменилось и на смену ранее популярному flash приходят более продвинутые технологии HTML5/WebGL.

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

Даже самый примитивный игровой персонаж должен обладать хоть какими-нибудь “мозгами”. Рыбки априори не блещут интеллектом, но кое-что они все же должны уметь — передвигаться, “смотреть”, убегать или нападать. От них не требуется искать укрытия или “морщить лоб” для умной ответной фразы. Выглядит просто, но легко ли сделать?

Разговор пойдет о реализации AI силами JavaScript и Blend4Web. Поставленные задачи, способы их решения или вынужденные пути обхода — все это на примере разрабатываемого живого, игрового проекта.

На сайте разработчиков движка опубликовано множество материалов, в том числе и по этой теме. Все «разжевано» и на русском языке. Но вот казус — задача оказалась не простой, даже для человека имеющего солидный опыт работы с Blender и искренне считающего себя game developer`ом. Некоторые этапы вызывали критические приступы “зависания”, происходящих от недопонимания особенностей работы с движком и, откровенно говоря, слабого знания JavaScript.

Немаловажным фактором была попытка переноса опыта работы с Unity (c#) на абсолютно иную платформу. И это было серьезной ошибкой. Blend4Web — инструмент заточенный исключительно для создания приложений WebGL, что дает солидное преимущество перед кроссплатформенным Unity, но и накладывает некоторые ограничения. В связи с прекращением поддержки веб-плеера и слабой работоспособностью экспортера Unity WebGL, платформа Blend4Web выглядит очень интересной. Поэтому, хочешь — не хочешь, а разбираться приходится.

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

Допустим, я создал браузерную игру, а что дальше? Если для мобильных — есть магазины Google Play, App Store, Windows Store и куча всяких альтернативных. Можно найти площадки для распространения сборок standalone — Desura, Steam, Itch.io. Но когда задумываешься о судьбе браузерки, то невольно впадаешь в ступор. И куда ее?

Думать о судьбе своего детища необходимо еще на начальном этапе разработки. Так, в случае с Dangerous Insects, я уже знал, где и как буду размещаться, хотя от игры в лучшем случае был только диздок. Вот и с HTML5 захотелось заранее прощупать почву.

“Ты совсем рехнулся с этим WebGL!”, как-то заявил мне знакомый разработчик: “Изучаешь новый движок ради одной платформы?!”

А ведь и, правда, работая с Unity, я получаю доступ ко многим платформам. Работая с Blend4Web — только к одной. Крупные компании могут позволить себе использовать несколько технологий для качественного портирования игры, в случае инди — это большая проблема.

И что, разрабатывая браузерный проект не с Unity, я ставлю крест на остальных платформах? Честно, этот разговор сильно поколебал мою решимость. Но недавно я услышал о фреймворках, с помощью которых можно чудесным образом портировать HTML5 на множество мобильных платформ.

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

Совсем недавно был опубликован пресс-релиз на сайте NASA, где говорилось об уникальной возможности «прогуляться» по Марсу. Я не утерпел и перешел по ссылке — открылась потрясающая интерактивная сцена, где можно «прокатиться» с марсоходом, просмотреть видео с «камеры» и даже узнать технические параметры агрегата. Но самой шокирующей была новость, что все это сделано с помощью движка Blend4Web… А где же Unity?

6 августа исполняется три года со дня посадки на красной планете уже ставшего легендой марсохода Curiosity. Несмотря на масштабы уже затраченных усилий как на сам проект, так на сопровождающую его PR-кампанию, NASA, по всей видимости, останавливаться не собирается. Команда визуализации из знаменитой Лаборатории реактивного движения (JPL) впервые использовала 3D возможности интернета, презентовав Experience Curiosity — интерактивное трехмерное веб-приложение на тему миccии на Марсе.

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

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

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

Есть WebGL — универсальная технология для веб. Есть Blend4Web — платформа для работы с технологией WebGL. Есть документация и примеры работы с этой платформой, но совсем нет игр.

«Совсем?»
«Увы, совсем».

А может я плохо искал? Не знаю, но хочу положить конец этой несправедливости и создать Первую игру. Первую не для себя, ведь у меня уже есть три коммерческие игры на Unity. Первую на этом движке.

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

Я знаю Blender много лет, использую Unity для своих игр, но полный новичок в WebGL. Однако, будущее именно за этой технологией, и неплохо было бы разобраться с ее использованием. К сожалению, экспортер Unity для WebGL пока не рабочий и нужен иной инструмент.

Я не люблю изобретать велосипед и предпочитаю готовые решения. Найденный ранее Blend4Web выглядит очень заманчиво (интеграция с Blender, качественный экспортер и т.д.), но ведь существует немало других библиотек и платформ для работы с WebGL.

Извечный вопрос: что выбрать новичку? Я поработал с платформами Blend4Web и Three.js. Что из этого вышло — читайте дальше.

Когда друзья меня спросили, почему я заинтересовался Blend4Web и стал изучать его, однозначного ответа не получилось. Да, я использую Unity и это мой основной инструмент. Его возможностей с головой хватает для реализации любых задумок. Но я люблю и Blender, так как работаю с ним уже много лет. Все модели, анимации, кинематографические сцены я делаю исключительно в нем. A Blend4Web выглядит очень достойным движком реального времени для WebGL.

И в один прекрасный момент я задумался, а может ли Blend4Web конкурировать со столь популярным Unity, и если да, то в каких сферах…

Когда долго занимаешься каким-либо делом и уже кажется, что ты знаешь все, вдруг появляется Нечто, вызывающее исследовательский зуд. Так случилось и со мной.

Отдыхая от Unity и лениво просматривая очередной урок от мастеров 3D, я наткнулся на ролик, любезно предложенный ютубом. Простой куб изрезанный рисунками постепенно заполнялся некой энергией. Glow-эффект в стилистике Sci-Fi — всего 6 секунд видео и незамысловатое название о релизе какого-то Blend4Web. Ассоциация с моим любимым Blender’ом возникла мгновенно, равно как и желание узнать этого «зверя» поближе.